DEV Community

How to Implement Login with Google in Nest JS

Michael Owolabi on April 30, 2020

In this article, we are going to implement (OAuth) login with google in Nest JS. Coming from Express, implementing OAuth in Nest JS may seem not so...

Read full post

Egor Makarenko • Nov 25 '20 • Edited

@imichaelowolabi, done callback should not be used in validate method, because it is invoked internally by nestjs/passport. It is better to just return user object from validate:

async validate (accessToken: string, refreshToken: string, profile: any): Promise<any> {
    const { name, emails, photos } = profile
    const user = {
      email: emails[0].value,
      firstName: name.givenName,
      lastName: name.familyName,
      picture: photos[0].value,
      accessToken
    }
    return user;
}

Kaivan Mehta • Mar 10 '21 • Edited

Thanks for this detailed explanation.

I am working on angular + nestJs project, which are configured at different ports (localhost:4200 and localhost:8080). I am trying to request from angular to nestJs.

But it is not redirected on CallbackUrl, rather it is giving me some CORS error. However,
I have put, localhost:8080 and my endpoint at authorized URI and also configured app.enablecors() in main.js

I am having this error instead,
Access to XMLHttpRequest at 'https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Fv1%2Fauth%2Fredirect&scope=email%20profile&client_id=XXX' (redirected from 'localhost:8080/v1/auth') from origin 'localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

....
However, after clicking that redirection link manually, it is working properly. Did I miss anything?
Any help is appreciated.

Michael Owolabi • Mar 15 '21

Hi Kaivan,

Thanks for the feedback. As per the error you're getting, this simply has to do with the "Authorized Javascript origin" and the redirect URI. Kindly crosscheck these two values from your google console to ensure they are the correct endpoints for your frontend and backend app.

Kaivan Mehta • Mar 22 '21

Thanks for your reply,
As I am requesting from angular and default port is 4200, I have given localhost:4200 in authorized JavaScript uri and I am redirecting it to the backend, thus I have given localhost:8080 over there in the redirect uri.

Kindly can refer this picture.
dev-to-uploads.s3.amazonaws.com/up...

WassilaBen • Sep 18 '21

Hello Kaivan,
Did you find a solution? cuz I have the same problem. I'm using nextJs and I have a cors problem even if I've enabled it

Joe • Sep 6 '23

Hello WassilaBen,
Did you find a solution? cuz I have the same problem too...😅

Rafael Santos • Apr 28

vcs resolveram o problema? como?

Abubakar • Sep 11 '23

In your Nest Js app open your main.ts add this
after creating an instance of nest application

Change the origin to localhost:8080

mehdiparastar • Nov 27 '22

I've faced the same issue, please share your solution if you find finally.

Rafael Santos • Apr 28

vcs resolveram o problema? como?

rayenbac • Apr 30

did you find a solution because i got the same problem

(redirected from 'localhost:3000/google') from origin 'localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

zicjin • May 29 '20 • Edited

InternalOAuthError: Failed to obtain access token
at GoogleStrategy.OAuth2Strategy._createOAuthError (C:\Work_test\google-oauth-nestjs\node_modules\passport-oauth2\lib\strategy.js:408:17)

i just test github.com/iMichaelOwolabi/google-...

I got the correct google account login interface and logged in successfully, but reported an error when calling back the localhost:3000/google/redirect?cod....

How can I tell if I have a problem with my google project settings or JS code?

Michael Owolabi • Jun 1 '20

Hi Zicjin, try to reconfirm your redirect URL both on google and in your code as well as the scope. Sometimes when asking for non-existent scope, you may get such error.
Please let me know how it goes.

Steven Masala • Dec 22 '20

For others: double check your client ID and secret for the typos.

Humayun Kabir • May 26 '20 • Edited

I am getting the following error after applying this method.

node_modules/apollo-server-core/dist/ApolloServer.d.ts:5:8 - error TS1259: Module '"/Users///node_modules/@types/ws/index"' can only be default-imported using the 'esModuleInterop' flag

5 import WebSocket from 'ws';
~~~~~~~~~

node_modules/@types/ws/index.d.ts:270:1
270 export = WebSocket;
~~~~~~~~~~~~~~~~~~~
This module is declared with using 'export =', and can only be used with a default import when using the 'esModuleInterop' flag.

Humayun Kabir • May 27 '20

Sorry, this Error is not related to this module.

Michael Owolabi • Jun 1 '20

Thanks for the clarification Humayun

zlfikar24 • May 26 '21

I am getting following error when I ran npm run start

src/app.controller.ts:1:49 - error TS2307: Cannot find module '@nestjs/common' or its corresponding type declarations.

1 import { Controller, Get, Req, UseGuards } from '@nestjs/common';
~~~~~~~~
src/app.module.ts:1:24 - error TS2307: Cannot find module '@nestjs/common' or its corresponding type declarations.

1 import { Module } from '@nestjs/common';
~~~~~~~~
src/app.service.ts:1:28 - error TS2307: Cannot find module '@nestjs/common' or its corresponding type declarations.

1 import { Injectable } from '@nestjs/common';
~~~~~~~~
src/google.strategy.ts:5:28 - error TS2307: Cannot find module '@nestjs/common' or its corresponding type declarations.

5 import { Injectable } from '@nestjs/common';
~~~~~~
src/google.strategy.ts:14:17 - error TS2580: Cannot find name 'process'. Do you need to install type definitions for node? Try npm i --save-dev @types/node.
14 clientID: process.env.GOOGLE_CLIENT_ID,
~~~
src/google.strategy.ts:15:21 - error TS2580: Cannot find name 'process'. Do you need to install type definitions for node? Try npm i --save-dev @types/node.
15 clientSecret: process.env.GOOGLE_SECRET,
~~~~~
src/main.ts:1:29 - error TS2307: Cannot find module '@nestjs/core' or its corresponding type declarations.

1 import { NestFactory } from '@nestjs/core';
~~~~~~
../node_modules/@nestjs/passport/dist/auth.guard.d.ts:1:29 - error TS2307: Cannot find module '@nestjs/common' or its corresponding type declarations.

1 import { CanActivate } from '@nestjs/common';
~~~~~~~~
../node_modules/@nestjs/passport/dist/interfaces/auth-module.options.d.ts:1:38 - error TS2307: Cannot find module '@nestjs/common/interfaces' or its corresponding type declarations.

1 import { ModuleMetadata, Type } from '@nestjs/common/interfaces';
~~~~~~~~~~~
../node_modules/@nestjs/passport/dist/passport.module.d.ts:1:31 - error TS2307: Cannot find module '@nestjs/common' or its corresponding type declarations.

1 import { DynamicModule } from '@nestjs/common';
~~~~~~~~
../node_modules/dotenv/types/index.d.ts:2:23 - error TS2688: Cannot find type definition file for 'node'.

2 ///
~~~~
../node_modules/dotenv/types/index.d.ts:23:17 - error TS2580: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try npm i --save-dev @types/node.

Muhammad Ali Fahri • Jun 27 '21

You miss install @nestjs/core and @nestjs/common, and don't forget to install @types/node an dev dependencies 😅

Ups3t • Jul 6 '20 • Edited

hi, thanks for the code works perfectly;).
on the other hand I have a question when the page reloads I have an

Error Server:
error: TokenError: Bad Request
at GoogleStrategy.OAuth2Strategy.parseErrorResponse,

Page:
statusCode: 500
message: "Internal server error",

how would you solve the problem? thank you so much.

Joe Beretta • Nov 7 '21

Hi, have same issue, could u help with solving this error?

microchip78 • Jun 24 '20

How to load ClientID, ClientSecret and CallbackURL from database instead of loading from env in this example. Here is the code where you are loading it from env.

constructor() {
    super({
      clientID: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_SECRET,
      callbackURL: 'http://localhost:3000/google/redirect',
      scope: ['email', 'profile'],
    });
  }

Muhammad Ijaz • Dec 15 '21

I am facing this error when login with google
Any body face this issue and resolved it?

{"statusCode":404,"message":"Cannot GET /google/redirect?code=4/0AX4XfWg_370s0nW_gRVvaBql7g8u0TPVmgoLkly22yTxM7JIccz0-tFAht0ELvLn6BOQ7A&scope=email%20profile%20https://www.googleapis.com/auth/userinfo.email%20https://www.googleapis.com/auth/userinfo.profile%20openid&authuser=0&prompt=consent","error":"Not Found"}

Michael Owolabi • Dec 21 '21

Hi,
From the error message you shared, it seems the redirect endpoint doesn't exist or doesn't have use the right HTTP method in your app.
You should confirm that you have the google redirect endpoint setup in your application with the right GET http method and try again

cziermann • Aug 23 '21

Thx for the Article,

But i have an problem with this.
I am using graphl with this first i had an problem that i had not an Response object i fixed this with

  getResponse(context: ExecutionContext) {
    const ctx = GqlExecutionContext.create(context);
    const res = ctx.getContext().res;
    return res;
  }

but now i dont get any real response at all.

i debuged alot and found out that the google-strategy never calls success, error or fail to realy end the transaction.

the only function that calls these is self._oauth2.getOAuthAccessToken

but this gets also never called.
i also could not find where this function is called at all i search for this function in my node_modules folder and only found the declaration.

Thx for Help

Greetings

cziermann • Aug 23 '21

i think i found an fix for that.
the problem is that the oauth2 strategy is looking for req.query.code

so one fix is just write the token in the req.query.code in the getRequest function

  getRequest(context: ExecutionContext) {
    const ctx = GqlExecutionContext.create(context);
    const req = ctx.getContext().req;
    req.query.code = tokenExtractor(req);
    return req;
  }

cziermann • Sep 1 '21

did think that this fixes the issue but no.
does anyone has experience with nestjs + passport (google) and graphql?

Abel Simon • Jan 4 • Edited

Hi there! thanks for the article, but I keep having this error that I can't fix. I get:

"Access blocked: Authorization Error
Missing required parameter: scope
Error 400: invalid_request"

I do have the scope parameter, and I have my callback URL also, any other ideas? I don't know what else to try.


import { Injectable } from '@nestjs/common';
import { ConfigService } from '@nestjs/config';
import { PassportStrategy } from '@nestjs/passport';
import { Strategy, Profile, VerifyCallback } from 'passport-google-oauth20';

@Injectable()
export class GoogleStrategy extends PassportStrategy(Strategy, 'google') {
  constructor(private readonly configService: ConfigService) {
    super({
      clientID: configService.get<string>('GOOGLE_CLIENT_ID'),
      clientSecret: configService.get<string>('GOOGLE_CLIENT_SECRET'),
      callbackURL: configService.get<string>('GOOGLE_CALLBACK_URL'),
      scope: ['profile', 'email'],
    });
  }

  async validate(
    req: any,
    accessToken: string,
    refreshToken: string,
    profile: Profile,
    done: VerifyCallback,
  ): Promise<any> {
    // Validate or create user based on Google profile
    const userProfile = {
      email: profile._json.email,
      firstname: profile._json.given_name,
      lastname: profile._json.family_name,
      picture: profile._json.picture,
    };

    // You can access the request object using req.user if needed

    done(null, userProfile);
  }
}

thisismydesign • Apr 23 '21

Hey Michael, this is a nice guide to get started, but isn't it incomplete? Every time I visit a guarded page I'm redirected to Google's OAuth page again. Shouldn't there be a step to use the received accessToken? Or how should the server handle subsequent requests?

Michael Owolabi • Apr 24 '21 • Edited

Hello @thisismydesign thank you for your kind words.

About your question, yes the received access token should be used but the use will differ across various applications which will be determined by the use case in the application and the developer. My aim in writing this article is just to show to authenticate with Google OAuth in a Nest application.

Gideon A. • Jul 16

Man! You're amazing! Real omo iya mi! I've been using resources to build Nest.js + Passport (for Google). All confusing but I moved on. But something was off still... This is the last resource I've visited and now, it works! Why am I appreciating you especially? Just the fact that you added that I could visit the Google endpoint and other details you've given!

Soumik Chakraborty • Aug 3 '20 • Edited

the refreshtoken comes as undefined and even the accestype offline parameter wont solve it. Please Help

MercurialUroboros • Jun 7 '21

Does anybody know why after login I get this

Rodolfo • May 23 '20

Well done, very useful.

Michael Owolabi • May 23 '20

Thanks Rodolfo, glad it helped.

Ivan • Jun 22 '20

this one's neat!! but can u make the graphql version of this ??

Barin Britva • Jul 5 '20

Thanks a lot for the article!

Michael Owolabi • Jul 6 '20

You're welcome Barin. Glad it helped

'Seun Somefun • May 3 '20

Nice piece. Keep it up!!!

Michael Owolabi • May 4 '20

Thank you man

OlojaMuyiwa • May 16 '23

Nice content boss. it was really helpful

Ahmed Olawale • Nov 23 '23

Thanks man.
Super useful and straith forward.
No errors encountered too.
Thanks a lot.

Agustin Mouratoglou • May 6 '22

5 mins setup and my app now supports google login.
i'm trying to make now authentication to connect to google calendar api and bring calendar data.
any hint?

Subramanya Shenoy • Sep 24 '22 • Edited

Hi Any tutorial u suggest to integrate with this stack :
NestJS + GraphQL + passport-google-oauth20

completely hit the roadblock on this one. 😢

DouglasHFonseca • Aug 17 '21

Hi I'm looking for a way to integrate google calendar using nestjs. However I am confused with authentication using OAuth2.

rahulto • Jul 6 '23

Good article

Ruchit Gandhi • Feb 26 '21

Hello,

Objective **: To get **refresh_token.

Can you please suggest on how to add
access_type=offline
approval_prompt=force

as parameter for the OAuth url?

Tausif Ezaj Khan • Jul 29 '20

Hi Michael,
How to store the user info in cookie session in Nest? Could you point me to the right direction?

Goffy • Nov 28 '20 • Edited

Hi, I think this example is for jwt.
If you want to use a cookie session you can add a route guard that creates a session cookie for you.

Controller

    @Post('/signin')
    @UseGuards(LoginGuard)
    signin(@Request() req: IUserRequest): void {
        console.log(`@AuthController ${JSON.stringify(req.user)}`)
    }

Guard

import { ExecutionContext, Injectable } from '@nestjs/common';
import { AuthGuard } from '@nestjs/passport';

@Injectable()
export class LoginGuard extends AuthGuard('local') {
    async canActivate(context: ExecutionContext): Promise<boolean> {
        const result = (await super.canActivate(context)) as boolean;
        const request = context.switchToHttp().getRequest();
        await super.logIn(request);
        return result;
    }
}