How to implement google auth with NextAuth on Nextjs Apps.

In this article, you will learn how to add Google social login to Nextjs Applications using NextAuth, an open-source authentication library for Nextjs applications.

To follow along, make sure you have the following installed:

NextAuth is an open-source secured authentication solution for Nextjs Applications. NextAuth has been designed and built to serve next and serverless applications. NextAuth supports OAuth service, popular sign-in providers/services, and serverless and stateless authentication.

To set up a Nextjs project, run this command:

After the setup is complete, navigate to the newly created project directory of the nextjs app and run this command.

Open your browser and navigate to ** http://localhost:3000**. This should be the expected result.

NextAuth authentication solution provides a clientside API that your users use to authenticate with different sign-in providers with whom they have created accounts.

Under the hood, the API redirects your users' to different sign-in providers' pages such as Google, they get authenticated, and successful authentication payload data is then sent to your app to authorize access to the users.

Run this command to install next auth into your project:

Next, on the ** /pages** directory, create a new folder and name it api. Change the directory to the api folder, and create another folder called auth. In the auth folder, create a new file and name it […nextauth].js and add the following lines of code.

In the code above, you import from the nextauth and google provider modules from the nextauth library. Next, you export the NextAuth component having configured the google provider with your google client's ID and secret.

To authenticate with google, you will need to register your app on the Google developer console and obtain a client ID and client secret provided by google.

To do that, navigate to google developer console..

Next, sign in with your google email to access the console.

Once logged in, navigate to the APIs and services tab and choose the ** create credentials **option and then select *OAuth client ID*. See below.

Next, specify the type of application from the options given and then provide a name for your application.

Afterward, specify your app's home route URL and finally specify the callback redirect URL after authentication is done, save and you are all done. See below.

Upon successful registration, google will provide you with a client ID and Client secret for use in your app.

In your project's root folder, create a new file and name it** .env**. The file will hold your client ID, secret, and JWT key.

Add the following lines of code:

To generate your jwt key, you can use this link.

In the pages folder directory, create a new file and name it **login.js **, then add the following lines of code.

UseSession, signIn, and signOut are hooks provided by next-auth. UseSession hook access the current user session object. Once a user signs in and is authenticated by the google provider, a session object is created on the client. This allows nextjs to render the user details on the client side of the app, for this case the email.

Wrapping the app.js component with a session provider will allow the session state and consequentially the user details, to be preserved and shared across different pages.

Navigate to the _app.js file and add the following lines of code:

Afterward, run this command to spin up the server.

and then navigate your project running on your browser on localhost:8000/login. Clicking on the login button redirects you to the Google signing page. Once you sign in you will be redirected back to your app's home route and your signing email displayed.

This tutorial only covers authentication with only one provider, Google. However, NextAuth supports multiple authentication services from different providers with can easily be integrated into your nextjs apps. Moreover, you can integrate a local development database such as Postgres to store your users' data. NextAuth has inbuilt support for different databases.

Check out NextAuth official documentation to learn more.