Authentication

In this part of the documentation, we are going to show you how to integrate Authentication in the NextAdmin boilerplate.

NextAuth Setup

In this boilerplate, we are using NextAuth to manage the authentication. To get started first of all you have to update these two .env variables

NEXTAUTH_URL="YOUR_SITE_URL"
SECRET="A Random String"

You can generate a random string using this command:

openssl rand -base64 32

For development, the NEXTAUTH_URL is localhost:3000 and for the live site, it's your live site URL.

If you don't provide these pieces of information correctly the authentication will not work properly, and you will not be able to access the protected routes.

Google Auth

Now that NextAuth is configured properly let's integrate Google Auth.

To integrate Google Authentication you have to create a project on Google Console. Then you have to get the Secret and Client Key.

Follow these steps to create a project on Google Console, after that get the Secret and Client ID.

Getting the Google Client ID and Secret

To get the Google Secret go to Google Console. If you already have projects you’ll see CREATE CREDENTIALS button at the top, from there you can generate the Secret and Client ID.

If you don’t have a project already then create one.

1. Create a Project: Go to the Projects tab, you’ll see all the projects there.

   

   Projects tab link
2. Click on the New Project button as shown below, then follow the steps to create a new project. Once you’ve created the project make sure to select it.

   

   New Project
3. Now create the credentials by clicking on the CREATE CREDENTIALS and then the 0Auth client ID.

   

   OAuth Client ID
4. Once you click on the 0Auth client ID you might see something like this. If you see this, go ahead and configure the consent screen.

   

   Configure consent screen
5. Once it’s done click on the 0Auth client ID once again and follow the steps to set it up

   
6. You’ll be asked to provide the Authorized JavaScript Origin. Click on the ADD URI button to add it. Since we are setting up a local environment, we are going to add our localhost URL there.

   
7. After that, you have to provide the Authorized redirects URI. For the Authorized redirects URI you have to include your domain with the callback path included at the end. For production: https://{YOUR_DOMAIN}/api/auth/callback/google For development: http://localhost:3000/api/auth/callback/google

   
8. Once the setup is done click on the Create button, if everything is done perfectly you’ll be redirected to this page. Here you can see the Client ID and Client Secret, go ahead and copy-paste them to the .env file

   

   GOOGLE_CLIENT_ID=
   GOOGLE_CLIENT_SECRET=

   If you’ve accidentally closed the tab, click on this button to open it again.