Secure Google Sign-On with NestJS and React
In this tutorial, we will explore how to implement a secure Google single sign-on (SSO) in a NestJS backend service and connect it to a React frontend application.
Setting up the Client and Server Folders
To get started, create the frontend client and backend server folders. Initialize the React application by running npx create-react-app react-nestjs in the terminal. For the backend side, run nest new server to scaffold a new NestJS project directory.
Starting the Development Server
Navigate to the client folder and run npm run start to get the frontend app up and running. This will start a local development server at localhost:3000. For the backend, navigate to the server folder and run npm run start to start the development server at localhost:8080.
Creating a Secure SSO Project on the Google Cloud Platform
Create a new project on the Google Cloud Platform by navigating to the console and selecting “Project Bar” in the top left corner. Click “New Project” and enter your project details. Search for credentials in the search bar and select “API and Services”. Configure the consent screen by clicking “Configure Consent Screen” before creating credentials.
Configuring React OAuth 2.0 for Google Sign-In
To set up the Google Auth Library, use React OAuth 2.0 by running npm i @react-oauth/google in the terminal. Wrap the home page with the GoogleOAuthProvider and pass the clientId to the provider.
Using the Client ID
Sign in with your email and check the console for the logged credential response. Store the clientId in an environment variable file and add it to the .gitignore file to avoid exposing it to the browser or repository.
State Management with Zustand
Use Zustand for global state management by running npm install zustand to install the package. Create a hook folder and a useStore.js store file to manage the state.
Building the NestJS Folder
Set up the NestJS folder in the server created earlier. Confirm that the connection between NestJS and the frontend app is successful by returning a text response from the backend.
Implementing Google OAuth in NestJS
Install the Google Auth Library by running npm i google-auth-library and import the OAuth2Client to retrieve an access token. Initialize a new OAuth2Client instance and pass the clientId and secret generated when setting up the Google Cloud Platform.
Saving User Data to MongoDB
Use MongoDB to save users’ information in the database. Create a new free-tier cluster and connect with your application to get the MONGO URI. Copy the URI and paste it into the .env file for the server.
Building the User Schema
Create a user schema by creating a user.schema.ts file and send the name, email, and image props as a response when a login request is made.
Applying the Frontend Secure Single Sign-On
Create an app service to create new users and log existing users into the app. Verify the existence of a user’s email and create a new user if they do not exist.
Conclusion
In this tutorial, we learned how to implement a secure Google sign-on in a NestJS project and connected it to a basic frontend React application while saving user information in a database.