Why Use Google Auth

In today's fast-paced digital era, where user data security and seamless user experiences are non-negotiable, Google Authentication emerges as a pivotal solution for developers. Google Auth offers a robust and reliable identity provider, streamlining the authentication process while ensuring the highest standards of security. With the prevalence of data breaches and privacy concerns, integrating Google Authentication into your applications becomes a strategic move to safeguard user information

The simplicity and familiarity of Google Auth significantly enhance user experience, reducing friction during the login process. Users appreciate the convenience of logging in with their Google credentials, eliminating the need to remember yet another set of login credentials. Moreover, Google's authentication mechanisms are continuously updated and fortified, providing a dynamic defense against evolving security threats.

By choosing Google Authentication, developers not only prioritize the security of their applications but also contribute to building trust with users. It's a win-win situation that combines user-friendly authentication with robust security protocols, making Google Auth a compelling choice for today's web developers seeking to elevate their applications in a privacy-conscious and user-centric digital landscape.

Tech Stack Used:

• Next.Js (v14.1.3)
• NextUI (v2.2.10) + Tailwind CSS
• React OAuth2 | Google (v0.12.1)
• SWR (v2.2.5)
• jsonwebtoken (v9.0.2)

Prerequisites

To follow along with this tutorial, you need to have the following in place:

• Node.js 18.17 or later.
• Google OAuth Credentials

Project Setup

Create a new Next.js TypeScript application

• run below command in your preferred command-line tool.

On installation, you'll see the following prompts:

after installation is complete, open the location in preferred code editor

Remove boilerplate code

• edit app/globals.css file and just keep below code in it.

Install required packages

• Follow NextUI Manual Installation for App Directory Setup
• Follow this guide to add a Navigation strategy for NextUI components
• Install React OAuth2 | Google, jsonwebtoken and swr Packages. Open a terminal at root of Your Project (where package.json file is available) and run below commands

Get OAuth client IDs

Follow the setup guide provided by google to get a CLIENT_ID Which can be used to authenticate your users with your next.js app

• For testing our application with google auth, add http://localhost and http://localhost:3000 to Authorized JavaScript origins.
• When you deploy your application in a Production Environment, Add provided or configured URL to Authorized JavaScript origins. (example: https://your-app-name.vercel.app is provided by Vercel)
• Add ./auth/userinfo.email and ./auth/userinfo.profile scopes when editing OAuth consent screen (you can add other scopes as well when needed)
• Once you have a web application, Create a .env.local file in the root of your Next.Js Project, copy the Client ID shown in Google Cloud Console and paste it in the newly created File.

• The .env.local is a file which is added in .gitignore file which will prevent it to be pushed it to a remote git repository. You can read more about this here

Backend Api to check if User is Logged In

• Create two new variable called AUTH_TOKEN_NAME and JWT_SECRET in .env.local file.

• Create a new file at /app/api/auth/route.tsx and Add below code in the file.

Using SWR

• We are using SWR instead of useEffect and useState hooks so we can use the single hook in multiple pages to check if a user has logged-in
• Create a new file at the root of your project utils/useUser.tsx and paste the following code in it.

• Edit the app/layout.tsx file. remove the boilerplate code and paste the following code in it.

• Edit the app/page.tsx file. remove the boilerplate code and paste the following code in it.

• Ensure that the dev server is running at http://localhost:3000. when you open the browser and navigate to it, you will see a single card which says "Your Details will be displayed here when you login"

Google Sign-In Button

Create a Login Page and Layout.

• Create a file at app/login/layout.tsx and paste the following code in it.

• Create a file at app/login/page.tsx and paste the following code in it.

Add backend Api to get user Response from frontend

• Create a file at /app/api/login/google/credentialResponse/route.tsx and paste the following code in it

• Ensure that the dev server is running at http://localhost:3000. when you open the browser and navigate to http://localhost:3000/login, you will be able to login using google sign-in button.

One-tap Sign-In Flow

• If you wish to sign in using Google One-Tap Sign-in, you can comment out the useOneTap parameter in GoogleLogin located at /app/login/page.tsx.

Custom Sign-In Button

We will need to use useGoogleLogin provided by @react-oauth/google library to trigger the Login Flow using a Custom Button.

• Download a Google Logo svg file and move it to /public directory. (optional)
• Create a file at /app/login/custom/page.tsx and paste the following code in it.

• Create a file at /app/api/login/google/tokenResponse/route.tsx and paste the following code in it.

• Ensure that the dev server is running at http://localhost:3000. when you open the browser and navigate to http://localhost:3000/login/custom, you will be able to login using custom google sign-in button.

Logout Api

• We need to add a Logout Api Route for Users to Logout when They are Logged In. Create a new file at app/api/logout/route.tsx and paste the following code in it.

• Ensure that the dev server is running at http://localhost:3000. Open the browser, navigate to http://localhost:3000, and click Logout Button, You will be logged out and can access /login and /login/custom routes again.

Pushing Your Code to Github

The source code of this Project is available here. You can fork the repo or Push your local code to your own github repo following this guide

Deploying on Vercel

If you have not made any changes to the repo, You can directly deploy this repo with your custom environment variables using This Link

Conclusion

In conclusion, integrating Google Authentication with Next.js offers a robust and secure way to enhance user experience while ensuring the integrity of your web application. This seamless authentication process not only streamlines user access but also adds an extra layer of trust and credibility to your site.

By following the steps outlined in the blog, developers can empower their Next.js applications with the power of Google Authentication, providing users with a convenient and familiar login method. The OAuth 2.0 protocol, coupled with the NextAuth.js library, simplifies the implementation process, making it accessible to developers of varying skill levels.

Furthermore, the blog highlights the importance of proper configuration and security measures to safeguard user data and maintain the confidentiality of sensitive information. As a result, developers can create a more reliable and resilient authentication system.

In a world where online security is paramount, integrating Google Authentication with Next.js not only meets industry standards but also aligns with user expectations. The enhanced user trust and simplified login experience contribute to a positive overall impression of your web application.

In the ever-evolving landscape of web development, embracing technologies like Google Authentication in combination with the versatility of Next.js positions developers to deliver modern, user-friendly, and secure applications. This concluding step marks the successful implementation of a powerful authentication mechanism that sets the foundation for a robust and trustworthy web presence.