API with NestJS #42. Authenticating users with Google

July 26, 2021

This entry is part 42 of 180 in the API with NestJS

Authenticating users with emails and passwords is a valid and common approach. However, a convenient alternative is to shift this responsibility to a third party. In this article, we look into adding Google authentication to a NestJS project.

We can achieve the above because Google uses the OAuth (Open Authorization) framework. With it, Google users can grant access to some of their data to an application – in this case, us. In this series, we’ve already implemented a way to register users. Therefore, this article aims to implement an additional way of registering users with Google that can work besides authenticating with a password and an email. Because of that, in this article, we won’t be using the popular passport-google-oauth20 library.

Registering an application

The first step in implementing authentication with Google is registering an application in the Google Cloud Platform dashboard.

When we have a project, we need to set up the OAuth consent screen.

When configuring it, we need to set up some basic information about our application. For example, if we would like to deploy our application and use it outside of localhost, we would need to register our domain.

For testing purposes, we also need to specify a list of users that are allowed to use our application. If we would like our application to be available to any user, we need to submit our app for verification.

After sorting out the above, we need to generate OAuth Client ID credentials for our application in the credentials dashboard.

We could also set the redirect URL, but in this article we use a different approach that doesn’t use it.

Above, in the authorized JavaScript origins, we put the URL of our frontend application. We also need to specify the redirect URL. Google will redirect the user to it after successful authentication.

Finalizing the process of creating the credentials gives us the client ID and the client secret. We need to save them in the environment variables.

app.module.ts

import { Module } from '@nestjs/common';

import { ConfigModule } from '@nestjs/config';

import * as Joi from '@hapi/joi';

@Module({

imports: [

ConfigModule.forRoot({

validationSchema: Joi.object({

GOOGLE_AUTH_CLIENT_ID: Joi.string().required(),

GOOGLE_AUTH_CLIENT_SECRET: Joi.string().required(),

// ...

})

}),

// ...

})

export class AppModule {}

.env

GOOGLE_AUTH_CLIENT_ID=...

GOOGLE_AUTH_CLIENT_SECRET=...

# ...

The frontend side

To implement authentication with Google in our application, we need to allow the users to type in their Google credentials. A straightforward way to do that in React is to use the react-google-login library.

In this simple example we use Create React App.

First, we need to add some environment variables.

.env

PORT=8080

REACT_APP_GOOGLE_AUTH_CLIENT_ID=...

REACT_APP_API_URL=http://localhost:3000

react-app-env.d.ts

namespace NodeJS {

interface ProcessEnv {

REACT_APP_GOOGLE_AUTH_CLIENT_ID: string;

REACT_APP_API_URL: string;

}

Once we have the above, we can use the react-google-login library.

GoogleButton.tsx

import React from 'react';

import GoogleLogin from 'react-google-login';

import useGoogleAuthentication from "./useGoogleAuthentication";

function GoogleButton() {

const clientId = process.env.REACT_APP_GOOGLE_AUTH_CLIENT_ID;

const { handleSuccess } = useGoogleAuthentication();

return (

<GoogleLogin

clientId={clientId}

buttonText="Log in"

onSuccess={handleSuccess}

);

}

export default GoogleButton;

Clicking on the above button causes a popup to show.

To change the above behavior, we could pass uxMode="redirect" to the GoogleLogin component. This would cause a full redirect instead of opening a popup.

When the user successfully authenticates, the onSuccess callback is invoked.

useGoogleAuthentication.tsx

import { GoogleLoginResponse, GoogleLoginResponseOffline } from 'react-google-login';

function useGoogleAuthentication() {

const handleSuccess = (response: GoogleLoginResponse | GoogleLoginResponseOffline) => {

if ('accessToken' in response) {

const accessToken = response.accessToken;

fetch(`${process.env.REACT_APP_API_URL}/google-authentication`, {

method: 'POST',

body: JSON.stringify({

token: accessToken

}),

headers: {

'Content-Type': 'application/json'

});

}

return {

handleSuccess,

}

export default useGoogleAuthentication;

Above, we take the accessToken from the response and send it to our NestJS API.

Implementing Google authentication with NestJS

The last step in authenticating our users is receiving the accessToken from Google and logging the user into our system.

googleAuthentication.controller.ts

import {

Controller,

Post,

ClassSerializerInterceptor,

UseInterceptors,

Body,

Req,

} from '@nestjs/common';

import TokenVerificationDto from './tokenVerification.dto';

import { GoogleAuthenticationService } from './googleAuthentication.service';

import { Request } from 'express';

@Controller('google-authentication')

@UseInterceptors(ClassSerializerInterceptor)

export class GoogleAuthenticationController {

constructor(

private readonly googleAuthenticationService: GoogleAuthenticationService

) {

}

@Post()

async authenticate(@Body() tokenData: TokenVerificationDto, @Req() request: Request) {

const {

accessTokenCookie,

refreshTokenCookie,

user

} = await this.googleAuthenticationService.authenticate(tokenData.token);

request.res.setHeader('Set-Cookie', [accessTokenCookie, refreshTokenCookie]);

return user;

}

Above, we expect the frontend to call the /google-authentication endpoint with the access token.

tokenVerificationDto.ts

import { IsString, IsNotEmpty } from 'class-validator';

export class TokenVerificationDto {

@IsString()

@IsNotEmpty()

token: string;

}

export default TokenVerificationDto;

The final part of the implementation is the authenticate method.

googleAuthentication.service.ts

import { Injectable, UnauthorizedException } from '@nestjs/common';

import { UsersService } from '../users/users.service';

import { ConfigService } from '@nestjs/config';

import { google, Auth } from 'googleapis';

import { AuthenticationService } from '../authentication/authentication.service';

import User from '../users/user.entity';

@Injectable()

export class GoogleAuthenticationService {

oauthClient: Auth.OAuth2Client;

constructor(

private readonly usersService: UsersService,

private readonly configService: ConfigService,

private readonly authenticationService: AuthenticationService

) {

const clientID = this.configService.get('GOOGLE_AUTH_CLIENT_ID');

const clientSecret = this.configService.get('GOOGLE_AUTH_CLIENT_SECRET');

this.oauthClient = new google.auth.OAuth2(

clientID,

clientSecret

);

}

async authenticate(token: string) {

const tokenInfo = await this.oauthClient.getTokenInfo(token);

const email = tokenInfo.email;

try {

const user = await this.usersService.getByEmail(email);

return this.handleRegisteredUser(user);

} catch (error) {

if (error.status !== 404) {

throw new error;

}

return this.registerUser(token, email);

}

// ...

}

Registering new users

The crucial part is that the users can be signed up into our system at this point, but they don’t have to be. Therefore, we need to handle both cases. Let’s start with registering the user.

googleAuthentication.service.ts

async registerUser(token: string, email: string) {

const userData = await this.getUserData(token);

const name = userData.name;

const user = await this.usersService.createWithGoogle(email, name);

return this.handleRegisteredUser(user);

}

In our API, we require the user to provide a name. We can get this data from the Google API. Unfortunately, the googleapis library requires us to do that in a way that is a bit odd.

googleAuthentication.service.ts

async getUserData(token: string) {

const userInfoClient = google.oauth2('v2').userinfo;

this.oauthClient.setCredentials({

access_token: token

})

const userInfoResponse = await userInfoClient.get({

auth: this.oauthClient

});

return userInfoResponse.data;

}

When the users are not registered yet, we add them to our database with the createWithGoogle method.

googleAuthentication.service.ts

import { Injectable } from '@nestjs/common';

import { InjectRepository } from '@nestjs/typeorm';

import { Repository } from 'typeorm';

import User from './user.entity';

import StripeService from '../stripe/stripe.service';

@Injectable()

export class UsersService {

constructor(

@InjectRepository(User)

private usersRepository: Repository<User>,

private stripeService: StripeService

) {}

async createWithGoogle(email: string, name: string) {

const stripeCustomer = await this.stripeService.createCustomer(name, email);

const newUser = await this.usersRepository.create({

email,

name,

isRegisteredWithGoogle: true,

stripeCustomerId: stripeCustomer.id

});

await this.usersRepository.save(newUser);

return newUser;

}

// ...

}

Above, you can see that we add the user to Stripe. If you want to know more, check out API with NestJS #36. Introduction to Stripe with React

To handle it properly, let’s make some changes to the UserEntity:

user.entity.ts

import { Column, Entity, PrimaryGeneratedColumn } from 'typeorm';

import { Exclude } from 'class-transformer';

@Entity()

class User {

@PrimaryGeneratedColumn()

public id: number;

@Column({ unique: true })

public email: string;

@Column()

public name: string;

@Column({ nullable: true })

@Exclude()

public password?: string;

@Column({ default: false })

public isRegisteredWithGoogle: boolean;

// ...

}

export default User;

Please notice that the password is now nullable, because we don’t need it for users authenticated with Google. It would be a good idea to modify the existing code usef for verifying the user’s password to account for this change.

Returning the data of the user

When the users are registered, we need to generate cookies for them.

If you want to know more about this approach, check out API with NestJS #3. Authenticating users with bcrypt, Passport, JWT, and cookies

googleAuthentication.service.ts

async getCookiesForUser(user: User) {

const accessTokenCookie = this.authenticationService.getCookieWithJwtAccessToken(user.id);

const {

cookie: refreshTokenCookie,

token: refreshToken

} = this.authenticationService.getCookieWithJwtRefreshToken(user.id);

await this.usersService.setCurrentRefreshToken(refreshToken, user.id);

return {

accessTokenCookie,

refreshTokenCookie

}

async handleRegisteredUser(user: User) {

if (!user.isRegisteredWithGoogle) {

throw new UnauthorizedException();

}

const {

accessTokenCookie,

refreshTokenCookie

} = await this.getCookiesForUser(user);

return {

accessTokenCookie,

refreshTokenCookie,

user

}

Above you can see that we generate refresh tokens. To read more about it, check out API with NestJS #13. Implementing refresh tokens using JWT

Thanks to implementing all of the above, the /google-authentication handles both new and returning users.

To see the whole picture more accurately, check out the full code for the GoogleAuthenticationService.

Summary

In this article, we’ve implemented a way for our users to authenticate with Google. Moreover, we’ve done it in a way that integrates with our existing system. To do that, we register users into our own database instead of relying upon Google. Thanks to doing so, we don’t have to make significant changes to the existing code that takes care of registering users with the email and the password.

Series Navigation<< API with NestJS #41. Verifying phone numbers and sending SMS messages with TwilioAPI with NestJS #43. Introduction to MongoDB >>

9 Comments

Oldest

Newest Most Voted

Inline Feedbacks

View all comments

Nathanael Cunningham

3 years ago

What is the workflow for checking if the user is authenticated from a request on the frontend after the user logs in?

Twelve

2 years ago

Reply to Nathanael Cunningham

According to this article: https://stackoverflow.com/questions/33860262/how-to-interact-with-back-end-after-successful-auth-with-oauth-on-front-end

Here’s how the flow works, in this system:

User-Agent IdentityProvider (Google/Twitter) Front-End Back-End

|-------------------"https://your.app.com"------------------>|

|---cookies-->|

your backend knows the user or not.

if backend recognizes cookie,

user is authenticated and can use your API

ELSE:

if the user is unknown:

|<--"unknown"-|

|<----"your/login.js"----------+

"Do you Authorize this app?"

|<------------------+

|--------"yes"----->|

+----------auth token--------->|

|<---------/your/moreinfo.js---|

|-------access_token ---------->|

1. verify access token

2. save new user info, or update existing user

3. generate expiring, random string as your own API token

+----------->|

|<-------------- set cookie: your API token --------------------|

NOW, the user can directly use your API:

1 2	\|--------------- some API request, with cookie ---------------->\| \|<-------------- some reply, depends on your logic, rules ------\|

EDIT
Based on discussion – adding that the backend can authenticate a user by verifying the access token with the identity provider:
For example, Google exposes this endpoint to check a token
XYZ123

1	https://www.googleapis.com/oauth2/v3/tokeninfo?id_token=XYZ123

Twelve

2 years ago

Reply to Nathanael Cunningham