Add OAuth2 example for passport

[weeco]

I was trying to use the new Passport module in order to implement the whole OAuth2 Process (Google Login). However I was not sure how I am supposed to handle the callback where one would usually call passport.authenticate().

Can you add documentation which shows an OAuth2 login via Google (or some other provider)?

[weeco]

@kamilmysliwiec https://github.com/bojidaryovchev/nest-angular/tree/master/src/server/modules/auth <- Is this the proper way to add the Facebook auth? If so I could probably create a pullrequest for this issue.

[kamilmysliwiec]

Looks promising :)

[Offlein]

I'm confused about this as well... But @weeco's code doesn't really look much like the current Nest documentation (export class AuthModule implements NestModule isn't something that you see ever in the docs, plus a lot of stuff that appears way more advanced than what you get from reading through the entire docs.nestjs.com sidebar).

...And the comment "Looks promising" is really mysterious -- are you saying that, yes, that is a proper implementation, presumably without going incredibly deeply into it? Or are you saying that it is promising but in no way "there" yet?

[kamilmysliwiec]

@Offlein a part with applying middleware inside AuthModule is probably redundant since we have @nestjs/passport module already. It wasn't always the case so this implementation doesn't differ too much with the previously recommended approach. All stuff inside services looks quite good though.

[Offlein]

@kamilmysliwiec Thanks very much. Sorry, I hadn't intended to push you into giving a more thorough review, but I appreciate it very much. I'll try to replicate @weeco's functionality for my own Google OAuth02 implementation. I'm using passport-google-oauth20 as opposed to the Google+ implemention he uses, and I'm having a lot of issues otherwise.

... That said (and not to muddy the comment thread up too much) I think NestJS is really well thought-out and, with the exception of some documentation issues, pretty usable in general! So thank you so much for your hard work.

[kamilmysliwiec]

No worries @Offlein 🙂 Thank you!

[joe307bad]

Has anyone successfully implemented an OAuth2 strategy? I am attempting to implement a strategy with passport-google-oauth2 and will report back once I have it working.

[joe307bad]

Hey everyone, so I have a basic example of what I consider the most succinct way of implementing Google OAuth2 with NestJS located here: https://github.com/joe307bad/sc-webservice. I am not sure if this is the correct way to do this, but it works and makes sense to me.

As you will see below, I used a method of combining the usage of passport-google-oauth2 to request the initial "code" from Google and using the googleapis npm package to request an Bearer token.

After obtaining this "code" using passport-google-oauth2, we then redirect the user to an oauth/callback path, submit the code to another Google service using the googleapis npm package, which then returns the access token we need to authenticate the user.

After receiving the access token, we can verify the authenticity of the user using a basic Bearer token/HttpStrategy. Within the HttpStrategy we will also want to create the user in our database if they do not exist and store any user information in a UserModel to pass around in our application.

Again, this probably isn't the proper way to do this, but for me, it works well enough until we get some documentation on how to only use one strategy (utilizing passport-google-oauth2 I assume).

I would appreciate any feedback! Hope this helps someone!

app.controller.ts

import { Get, Controller, UseGuards, Req } from '@nestjs/common';
import { AuthGuard } from '@nestjs/passport';
import { OAuth2Service } from './core/oauth';
import { Credentials } from 'google-auth-library';

@Controller()
export class AppController {
  constructor(private readonly oauth2: OAuth2Service) { }

  @Get()
  root(): string {
    return "Hello World!";
  }

  @Get('oauth/callback')
  async callback(@Req() request): Promise<Credentials> {
    return await this.oauth2.getToken(request.query.code).then(_ => _.tokens);
  }

  @Get('protected')
  @UseGuards(AuthGuard())
  protected(): string {
    return "This is protected";
  }

  @Get('token')
  token() {
    return "token endpoint"
  }
}

auth.module.ts

import { Module, NestModule, MiddlewareConsumer } from '@nestjs/common';
import { GoogleStrategy } from './strategies';
import { PassportModule } from '@nestjs/passport';
import { authenticate } from 'passport';
import { HttpStrategy } from './strategies/http.strategy';
import { OAuth2Service } from '../core/oauth';

@Module({
    imports: [
        PassportModule.register({ defaultStrategy: 'bearer' })
    ],
    providers: [OAuth2Service, GoogleStrategy, HttpStrategy],
})
export class AuthModule implements NestModule {
    public configure(consumer: MiddlewareConsumer) {
        consumer
            .apply(authenticate('google', {
                session: true,
                scope: ['profile']
            }))
            .forRoutes('token');
    }
}

google.strategy.ts

import { Strategy } from 'passport-google-oauth20';
import { PassportStrategy } from '@nestjs/passport';
import { Injectable } from '@nestjs/common';
import { OAuth2Service } from '../../core/oauth';

@Injectable()
export class GoogleStrategy extends PassportStrategy(Strategy) {
  constructor(private readonly oauth2: OAuth2Service) {
    super(oauth2.getConfig());
  }
}

http.strategy.ts

import { Strategy } from 'passport-http-bearer';
import { PassportStrategy } from '@nestjs/passport';
import { Injectable, UnauthorizedException } from '@nestjs/common';
import { OAuth2Service } from '../../core/oauth';

@Injectable()
export class HttpStrategy extends PassportStrategy(Strategy) {

  constructor(private readonly oauth2: OAuth2Service) {
    super();
  }

  async validate(token: string) {
    const user = await this.oauth2.verify(token)
    if (!user) {
      throw new UnauthorizedException();
    }
    return user;
  }
}

oauth2.service.ts

import { google } from 'googleapis';
import { OAuth2Client } from 'google-auth-library';
import { GetTokenResponse } from 'google-auth-library/build/src/auth/oauth2client';
import { googleClientId, googleClientSecret, redirectUrl } from '../../app.settings';

export interface IOAuthConfig {
    clientID: string;
    clientSecret: string;
    callbackURL: string;
    passReqToCallback: boolean;
}

export class OAuth2Service {

    private readonly _clientId: string = googleClientId;
    private readonly _clientSecret: string = googleClientSecret;
    private readonly _redirectUrl: string = redirectUrl

    private _oauth2Client: OAuth2Client;

    constructor() {

        this._oauth2Client = new google.auth.OAuth2(
            this._clientId,
            this._clientSecret,
            this._redirectUrl,
        );

    }

    getConfig(): IOAuthConfig {
        return {
            clientID: this._clientId,
            clientSecret: this._clientSecret,
            callbackURL: this._redirectUrl,
            passReqToCallback: true,
        }
    }

    async verify(token: string) {
        return await this._oauth2Client.verifyIdToken({
            idToken: token,
            audience: this._clientId
        })
    }

    async getToken(code: string): Promise<GetTokenResponse>{
        return await this._oauth2Client.getToken(code);
    }
}

[zhenwenc]

@joe307bad I think you don't need to use the library's underlaying method. Here is an alternative solution, let me know if I did anything wrong (only have 2 days NestJS experience hehe). NestJS is so awesome!

import { Injectable } from '@nestjs/common';
import { PassportStrategy } from '@nestjs/passport';
import {
  Profile,
  Strategy,
  StrategyOptionWithRequest,
  VerifyFunctionWithRequest,
} from 'passport-google-oauth20';

import { AuthService } from './AuthService';

type AuthProvider = 'google' | 'facebook';

@Injectable()
export class GoogleStrategy extends PassportStrategy(Strategy) {
  // Facebook strategy should be pretty much the same
  constructor(auth: AuthService) {
    super(
      <StrategyOptionWithRequest>{
        clientID: "foo",
        clientSecret: "foo",
        callbackURL: '<domain>/auth/google/callback',
        passReqToCallback: true,
      },
      <VerifyFunctionWithRequest>(async (
        req,     // express request object
        access,  // access token from Google
        refresh, // refresh token from Google
        profile, // user profile, parsed by passport
        done
      ) => {
        // transform the profile to your expected shape
        const myProfile: AuthProfile

        return auth
          .handlePassportAuth(myProfile)
          .then(result => done(null, result))
          .catch(error => done(error));
      })
    );
  }
}

@Controller('auth')
export class AuthController {
  constructor(private readonly auth: AuthService) {}

  @Get(':provider(google|facebook)')
  async handleOauthRequest(
    @Req() req: Request,
    @Res() res: Response,
    @Next() next: NextFunction,
    @Param('provider') provider: AuthProvider
  ) {
    const params = {
      session: false,
      scope: ['<specify scope base on provider>'],
      callbackURL: `<domain>/auth/${provider}/callback`,
    };
    authenticate(provider, params)(req, res, next);
  }

  @Get(':provider(google|facebook)/callback')
  async handleOauthCallback(
    @Req() req: Request,
    @Res() res: Response,
    @Next() next: NextFunction,
    @Param('provider') provider: AuthProvider
  ) {
    const params = {
      session: false,
      state: req.query.state,
      callbackURL: `<domain>/auth/${provider}/callback`,
    };

    // We use callback here, but you can let passport do the redirect
    // http://www.passportjs.org/docs/downloads/html/#custom-callback
    authenticate(provider, params, (err, user) => {
      if (err) return next(err);
      if (!user) return next(new UnauthorizedException());

      // I generate the JWT token myself and redirect the user,
      // but you can make it more smart.
      this.generateTokenAndRedirect(req, res, user);
    })(req, res, next);
  }
}

@Injectable()
export class AuthService {
  async handlePassportAuth(profile: AuthProfile) {
    // Return the existing user, or create the user entity
    // form profile returned by the OAuth provider
    const user: User;

    // Preform your business logic here

    // Return the user instance
    return user;
  }
}

@Module({
  controllers: [AuthController],
  providers: [AuthService, GoogleStrategy, FacebookStrategy],
  exports: [AuthService],
})
export class AuthModule {}

[joe307bad]

Thanks @zhenwenc! This looks really promising. Especially since it avoids using middleware, which I think @kamilmysliwiec suggested was the correct way to go about it. A couple questions:

1. What do you mean you don't need to use the library's underlaying method. Which method are you referring to?
2. I think I am a fan of the getToken method from the google-auth-library. Is there a reason you would rather generate your own token rather than use this method?
3. Where did you find the proper usage of StrategyOptionWithRequest and VerifyFunctionWithRequest from the passport-google-oauth20 library? These are definitely interesting but I can't find any docs on them.

Thanks again for the response. I will definitely use some of this in my own implementation.

[zhenwenc]

@joe307bad

Thanks @zhenwenc! This looks really promising. Especially since it avoids using middleware, which I think @kamilmysliwiec suggested was the correct way to go about it. A couple questions:

1. What do you mean you don't need to use the library's underlaying method. Which method are you referring to?

In your oauth2.service.ts:

import { OAuth2Client } from 'google-auth-library';
import { GetTokenResponse } from 'google-auth-library/build/src/auth/oauth2client';

I see you verify the code returned from Google, I suspect that this logic should be embedded in the passport plugin. But I might be wrong.

2. I think I am a fan of the getToken method from the google-auth-library. Is there a reason you would rather generate your own token rather than use this method?

Passport already returned the access token for you, see the second argument in VerifyFunctionWithRequest function. In my case, after the user authenticated with Google or Facebook, I will create and return a JWT token (containing payload like { id, email, role }) to the user. The access tokens from oauth providers are only staying in the backend.

If you don't need this step, I think the solution should be more simpler, such as you don't need to specify the callback for authenticate function in handleAuthCallback, passport can do it for you.

3. Where did you find the proper usage of StrategyOptionWithRequest and VerifyFunctionWithRequest from the passport-google-oauth20 library? These are definitely interesting but I can't find any docs on them.

Oh I see.. I know its funny, I found them from passport-facebook as there is no type definition available for passport-google-oauth20. The API of these two libraries should be identical anyway.

Thanks again for the response. I will definitely use some of this in my own implementation.