Add Google Authentication to your NextJs project using NextAuth.js

Next-Auth is a complete open-source authentication for Next.Js applications. You can learn more about it here.

Here in this blog tutorial, I will show you how you can use NextAuth.js in your NextJs project to add Google authentication. In this particular tutorial I am using Typescript but you can follow it for Javascript.

You can install it using yarn or using npm.

To add NextAuth.js in your project you need to first create [...nextauth].ts inside you pages/api/auth.

Click here and setup you app

Step 1: Create a project with any name you want. Step 2: Go to Credentials tab Step 3: Create credentials Step 4: Choose OAuth client ID option Step 5: Fill some details to get you google client Id and Secret

Step 6: After you press create button, You will get you google client id and google client secret. Save these credentials in your pc.

Create a .env.local file inside you root directory.

To be able to use useSession inside your app, you'll first need to wrap your top level component inside <SessionProvider></SessionProvider> which is coming from next-auth/react

Now we are good to go.

To use authentication, we need to import some functions from next-auth/react

Now, inside our components we can use useSession, signin and signout functions

You have successfully added NextAuth.js in your project for Google Authentication.

you can see the full code on GitHub - Link