In this part of the documentation, we are going to show you how to integrate Authentication in the SaaSBold 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

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.

  1. 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.

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

  1. 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.

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

  1. 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.

  1. 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 in the end.

For production: https://{YOUR_DOMAIN}/api/auth/callback/google

For development: http://localhost:3000/api/auth/callback/google

  1. 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


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

GitHub Auth

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

Getting The Github Secret and Client ID

To integrate Github we will need the GitHub Client ID and Secret.

Follow the steps below to generate the keys.

  1. Go to your GitHub account then navigate to the Developer Settings

  1. Click on the 0Auth App button then click on the Register a new Application button to register an Application.

  1. Register an App by providing all the information.

    Remember to change the Authorization Callback URL for the production. Just change the http://localhost:3000 part of the URL with the URL of your website.

  1. Generate the Client's Secret: Click on the Generate a new client secret button to generate the Secret.

  1. Now Copy the Client ID and Client Secret from here. And add those to the env variable


We are done with GitHub and Google authentications, now let's look at how we can integrate Magic Link Auth.

To enable Magic Link we will need SMTP credentials. Check out the Emails guide to see how to get SMTP credentials.

Last updated