Authentication
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
You can generate a random string using this command:
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.
Create a Project: Go to the Projects tab, you’ll see all the projects there.
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.
Now create the credentials by clicking on the CREATE CREDENTIALS and then the 0Auth client ID.
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.
Once it’s done click on the 0Auth client ID once again and follow the steps to set it up
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.
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
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.
Go to your GitHub account then navigate to the Developer Settings
Click on the 0Auth App button then click on the Register a new Application button to register an Application.
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.
Generate the Client's Secret: Click on the Generate a new client secret button to generate the Secret.
Now Copy the Client ID and Client Secret from here. And add those to the env variable
Magic Link
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
