DEV Community

Markus Häcker
Markus Häcker

Posted on

2 1

OAuth2 in NestJS for Social Login with GitHub (and Google, Facebook, …)

This sample NestJS app is one of the kind you get with nest new, but with the addition of Passport to

  • authenticate a user by identity token issued from GitHub as an Identity Provider,
  • manage authenticated state (by issuing a JSON Web Token, JWT),
  • attach information about the authenticated user to the Request object for further use in route handlers.

It is easy to add another strategy or replace GitHub with Google or Facebook for instance.

The code has many comments that make everything very clear and understandable.

Run

First you have to register a new OAuth application in GitHub:

GitHub Screenshot

Then copy file .env.sample and name it .env. Open .env and fill the values of GITHUB_OAUTH_CLIENT_ID and GITHUB_OAUTH_CLIENT_SECRET according to the application just created in GitHub. Also set an arbitrary value for JWT_SECRET.

Then you can start the app with

$ npm run dev
Enter fullscreen mode Exit fullscreen mode

In your browser, open http://localhost:5000 or http://localhost:5000/profile. You will get HTTP status 401 "Unauthorized" because these are protected routes that are accessible only to requests that contain a valid JWT.

So open http://localhost:5000/auth/github. This route allows users to authenticate via GitHub, returning a JWT for use in subsequent calls to protected API endpoints. The JWT is included in the response body and as a cookie named jwt. Because of the cookie, you are now able to visit http://localhost:5000 and http://localhost:5000/profile.

Protection is realized by annotating the routes with @UseGuards(JwtAuthGuard): When such a route is hit, the Guard will automatically invoke our passport-jwt custom configured logic, validating the JWT, and assigning the user property to the Request object. Clients can send the JWT either

  • as a bearer token in an authorization header ("Authorization: Bearer eyJhbGciO…") or
  • in a cookie (name "jwt", its value is the token).

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

AWS GenAI LIVE!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️