Google sign-in authentication with NestJS

Today we are going to see how to login on Google by using NestJS framework. For the authentication we are going to use Passport.js with strategy https://github.com/jaredhanson/passport-google-oauth.

Introduction

First of all, create application on your google console.

Follow this guide : https://developers.google.com/identity/sign-in/web/server-side-flow

Create a project nest

Installation ofnest cli (https://docs.nestjs.com/).

$ nest new nest-auth

Adding library

To communicate with the client we are using socket.io.

$ npm i --save @nestjs/websockets socket.io express-session

Add socket.io on project

In main.ts file add

// Add socket.io on your http server
app.useWebSocketAdapter(new WsAdapter(app.getHttpServer()));
// Connecting sockets to the server and adding them to the request
// so that we can access them later in the controller
const io = socketio(app.getHttpServer());
app.set('io', io);

Once socket.io is setup now, we starting to add passport.

$ npm i --save passport-google-oauth passport

Add this following code in main.ts

app.use(passport.initialize());
app.use(passport.session());
app.use(expressSession({    
  secret: 'SECRET_SESSION',    
  resave: true,    
  saveUninitialized: true,  
}));

Auth module

Let’s write the authentication module.

$ nest g module auth && nest g controller auth

Now, we adding the endpoints for Google.

Writing our middleware

Now we are writing the different middleware :

1. SessionAuthMiddleware . Used for store the socketId client into session. The socketId will be useful to send the user connected on client after authentification.
2. StrategyMiddleware . Used for authenticating request (http://www.passportjs.org/docs/authenticate/)
3. StrategyCallbackMiddleware . It’s the middleware called from Google after the signin.

Don’t forget to import the services in AuthModule

Setting your middleware

Now we have wrote the middleware, we are configuring it. On the AuthModule we need to implement the middleware (https://docs.nestjs.com/middleware).

Add the google strategy

Create a file named google.strategy.ts on your auth folder. This file it’s for setup the authentication on google provider.

Don’t forget to import GoogleStrategy on AuthModule.

We have finished the server side. Place to …

Client app

For keeping simply we are using vuejs framework.

Place you into a new folder. For example create a client folder

Create index.html file.

Explain the following code :

• On vue component loading we creating a socket session and subscribe on google channel.
• On click on sign-in button we open a popup with Google Auth API.
• After the authentication Google call the server in /google/callback endpoint.
• The server send user profile on socket google channel with user information.
• As we are subscribed on google channel we received user information and we display the photo and displayName on UI.

Conclusion

It’s very easy to implement the authentication with google. Now you are able to connect and create your Google user in your server Nest.

The full code is available here.

Follow us