DEV Community

Cover image for Implement Google OAuth in NestJS using Passport

Implement Google OAuth in NestJS using Passport

Tosin Moronfolu on August 15, 2022

Introduction Authentication is an essential part of most applications. Implementing authentication in your application depends on requir...
Collapse
 
matias_c85bccf34e791038ff profile image
Matias • Edited

@chukwutosin_ At this point how can I handle state?

I need to pass a custom parameter from the frontend, and get this parameter on backend redirection.

This is to save extra on my DB apart of the data google give me.

Thank you so much!

Collapse
 
matias_c85bccf34e791038ff profile image
Matias • Edited

I found a solution:

In file: google.strategy.ts add this function.

async authenticate(req: Request) {
    if (req.query.myData) {
      // /auth
      return super.authenticate('google', {
        state: req.query.myData,
      });
    }
    // /auth/callback
    return super.authenticate(req);
  }
Enter fullscreen mode Exit fullscreen mode

In file: google.strategy.ts update constructor.

constructor() {
    super({
      clientID: '',
      clientSecret: '',
      callbackURL: '',
      scope: ['email', 'profile'],
      passReqToCallback: true, // <---- add this.
    });
  }
Enter fullscreen mode Exit fullscreen mode

In file: google.strategy.ts update validate function.

  async validate(
    req: Request, // <---- add this.
    accessToken: string,
    refreshToken: string,
    profile: Profile,
    done: VerifyCallback,
  ): Promise<void> {
...

console.log(req.query.state); // <----- Your data will be here.
Enter fullscreen mode Exit fullscreen mode
Collapse
 
chukwutosin_ profile image
Tosin Moronfolu

Cool

Collapse
 
ht35 profile image
Huy Tran

nice

Collapse
 
devgancode profile image
Ganesh Patil

Well written @chukwutosin A great article consist well research and this is actually amazing!

Collapse
 
chukwutosin_ profile image
Tosin Moronfolu

Thank you! I appreeciate the feedback.

Collapse
 
denernun profile image
Dener Rocha

How to integrate with an angular app ? Just call the route in nestjs ?

Collapse
 
chukwutosin_ profile image
Tosin Moronfolu

yes. just call the endpoints like you normally would in a frontend app

Collapse
 
abhikbanerjee99 profile image
Abhik Banerjee

This was helpful. Thanks!

Collapse
 
chukwutosin_ profile image
Tosin Moronfolu

I'm glad you found it helpful. Thanks!

Collapse
 
jesseazevedo profile image
Jessé Azevêdo

Hi @chukwutosin_ ,

Thank you very much for your amazing How To!

Collapse
 
chukwutosin_ profile image
Tosin Moronfolu

You're welcome!

Collapse
 
alexkar13 profile image
Alex Karydis

Thank you for this amazing tutorial! Can confirm that everything is up to date.

Collapse
 
chukwutosin_ profile image
Tosin Moronfolu

There might be upgrades in the versions of the several tools used, but it should still work just fine

Collapse
 
igeorge17 profile image
iGEORGE17

juss started learning nestJS, nice article

Collapse
 
chukwutosin_ profile image
Tosin Moronfolu

Oh, that's cool! I'm glad you found it helpful

Collapse
 
seghodavid profile image
Seghosimhe David

When running locally, the first route does not take me to the google authentication page, is that how it's supposed to be on localhost?

Collapse
 
chukwutosin_ profile image
Tosin Moronfolu

No, you probably missed a step. What route did you visit?

Collapse
 
seghodavid profile image
Seghosimhe David

I created a route path in my user auth controller, localhost:3000//auth/google
Does it have to be just localhost:3000/

Thread Thread
 
chukwutosin_ profile image
Tosin Moronfolu

following the article. you just need to visit: localhost:3000/auth

Thread Thread
 
seghodavid profile image
Seghosimhe David

it works, It did not work previously because I tried to access it from my swagger documentation

Thread Thread
 
seghodavid profile image
Seghosimhe David

I have a question if you don't mind, In a case where you do not need a refreshToken, what other option can be passed to super() aside accessType?

Thread Thread
 
chukwutosin_ profile image
Tosin Moronfolu

Any other Google specific options can be passed there. Every other option can be found on Google's documentation which I linked at the end of the article

Thread Thread
 
seghodavid profile image
Seghosimhe David

Thanks

Collapse
 
seghodavid profile image
Seghosimhe David

Thanks

Collapse
 
mundzirmuin profile image
mundzirmuin

Thanks, I'll try implement this in my next project

Collapse
 
chukwutosin_ profile image
Tosin Moronfolu

Great! Thanks

Collapse
 
shifoo28 profile image
shifoo28

Well done, bro

Collapse
 
thisisazeez profile image
Abdul Azeez

Please @chukwutosin_ is this going to save to the database?

Collapse
 
chukwutosin_ profile image
Tosin Moronfolu

There's no database setup here.