Authentication

In this section of the documentation, we will show you how to set up NextAuth for OAuth and Credential based authentication.

NextAuth Setup

First, let’s set up NextAuth. It’s a great tool for handling authentication as it supports handling multiple providers.

To get started, add an auth secret to the .env file:

AUTH_SECRET=

openssl rand -base64 32

Now that NextAuth is configured properly, let’s integrate Google Auth. This is a convenient option for many users and simplifies the sign-up process.

Google Auth

To integrate Google Authentication, you must create a project on Google Console and obtain 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 the 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. Go to the Projects tab. You’ll see all the projects listed.

   

2. Click on the New Project button below and follow the on-screen instructions to create your new project. Once you’ve created the project, make sure to select it.

   

3. Now, create the credentials by clicking the CREATE CREDENTIALS and then the 0Auth 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.

   

5. OAuth Consent Screen: Choose “External” as the user type to indicate that your app will be used by users outside of your organization.

   

6. Set Up OAuth Client: After completing the OAuth consent screen, click on “OAuth client ID” again and follow the instructions to set it up.

   

7. Authorized JavaScript Origin: 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 (http://localhost:3000) there.

   

8. Authorized Redirects URI: After that, you have to provide the redirects URI. For the Authorized redirects URI you have to include your domain with the callback path included in the end.

   For production: https://YOUR_DOMAIN/api/auth/callback/google
   For development: http://localhost:3000/api/auth/callback/google

   

9. Obtain Client ID and Secret: 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="Your Google Client ID"
   GOOGLE_CLIENT_SECRET="Your Google Client Secret"

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

   

GitHub Auth

AiStarterKit also comes with GitHub authentication, let’s go ahead and see how to integrate GitHub authentication.

Steps to Integrate GitHub Authentication:

To integrate Github, we will need the GitHub Client ID and Secret; follow the steps below to generate the keys.

1. Register a New OAuth Application: Go to your GitHub account then navigate to the Developer Settings .

   

2. Click on the 0Auth App button then click on the Register a new Application or “New OAuth App” button to register an Application.

   

3. Provide all necessary information and set the Authorization Callback URL for production.

   

   Important
   Change the Authorization Callback URL for production. Replace http://localhost:3000 with your website’s URL.

4. Generate Client Secret: Click on the Generate a new client secret button to generate the Secret.

   

5. Update Environment Variables: Now Copy the Client ID and Client Secret from here. And then update it in the .env file.

   

   GITHUB_CLIENT_ID=YOUR_GITHUB_CLIENT_ID
   GITHUB_CLIENT_SECRET=YOUR_GITHUB_CLIENT_SECRET