---
description: >-
  In this section of the documentation, we will show you how to integrate
  Authentication in the SaaSPilot boilerplate.
---

# Authentication

Overview

The authentication setup in SaaSPilot includes configuring NextAuth, integrating Google Auth and GitHub Auth. This guide will provide detailed steps to set up each authentication method.\
\
In this boilerplate, we are using NextAuth to manage the authentication. Let's get started.

### NextAuth Setup

First, let's set up NextAuth.js. It's a great tool for handling authentication because it supports multiple providers, making it ideal for your SaaS application.\
\
**Environment Variables**\
\
To get started, configure these two essential environment variables in the `.env` file:

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

{% hint style="warning" %}
**Note:** To generate a random string using this command, please make sure OpenSSL is installed
{% endhint %}

To generate a random string, use this command:

```
openssl rand -base64 32
```

For development, the <mark style="color:purple;">**NEXTAUTH\_URL**</mark> is <mark style="color:blue;">**`https://localhost:3000/`**</mark>**,** and for the live site, replace it with your live site's URL (e.g., <mark style="color:blue;">**`https://example.com/`**</mark>)

{% hint style="danger" %}
**Note**: If these variables are not set correctly, authentication will not work properly, and you will not be able to access the protected routes.
{% endhint %}

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 <mark style="color:purple;">`Secret`</mark>and <mark style="color:purple;">`Client ID`</mark>.

**Getting the Google Client ID and Secret**

To get the Google Secret, go to [**Google Console**](https://console.developers.google.com/apis/credentials)**.** 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. **Create a Project**: Go to the Projects tab. You’ll see all the projects there.

<figure><img src="https://4163021955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ft40347ZB9PUpZzu3pTeZ%2Fuploads%2F2n7XlRHuQfk4EVhD4UZE%2Fimage%20(3).png?alt=media&#x26;token=114d3947-0259-489f-b7a4-882aa94142b8" alt=""><figcaption><p>Projects tab link</p></figcaption></figure>

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.

<figure><img src="https://4163021955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ft40347ZB9PUpZzu3pTeZ%2Fuploads%2F22ZQbjPg4n2FqgskMRey%2Fimage%20(5).png?alt=media&#x26;token=d5caa72b-5237-4ba9-a4f8-0fd422b3a8d8" alt=""><figcaption><p>New Project<br></p></figcaption></figure>

3. **Generate Credentials**: Now, create the credentials by clicking the **CREATE CREDENTIALS** and then the **0Auth client ID.**

<figure><img src="https://4163021955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ft40347ZB9PUpZzu3pTeZ%2Fuploads%2FpF68rIS1P03Nsvy8501M%2Fimage%20(7).png?alt=media&#x26;token=642df231-0f62-429e-a4c2-4d480250fa0a" alt=""><figcaption><p>OAuth Client ID</p></figcaption></figure>



4. **Configure OAuth 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.

<figure><img src="https://4163021955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ft40347ZB9PUpZzu3pTeZ%2Fuploads%2FyOTkKOFqY79QpWnTLGg3%2Fimage%20(8).png?alt=media&#x26;token=ececedce-6cc9-4dde-98ad-d89e709d904c" alt=""><figcaption><p>Configure consent screen</p></figcaption></figure>

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

<figure><img src="https://4163021955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ft40347ZB9PUpZzu3pTeZ%2Fuploads%2Frrf8UHcaoiUbXps72Jbh%2Fimage%20(9).png?alt=media&#x26;token=698cdada-b474-44c3-ae1c-7b69e78e30dc" alt=""><figcaption><p>OAuth Consent Screen</p></figcaption></figure>

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.

<figure><img src="https://4163021955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ft40347ZB9PUpZzu3pTeZ%2Fuploads%2FVCtYRsWSOmBRwTjKDDr9%2Fimage%20(10).png?alt=media&#x26;token=481501ff-2d21-4c74-9f0e-edaf57f7d368" alt=""><figcaption><p>Create OAuth Cleint ID</p></figcaption></figure>

7. **Authorized JavaScript Origin**: You’ll be asked to provide the **Authorized JavaScript Origin.** Click on the **ADD URI** button to add it.

{% hint style="info" %}
Since we are setting up a local environment, we are going to add our **localhost** URL (`http://localhost:3000`) there.
{% endhint %}

<figure><img src="https://4163021955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ft40347ZB9PUpZzu3pTeZ%2Fuploads%2FGyNmK5VzGgFS7uooJ7LQ%2Fimage%20(11).png?alt=media&#x26;token=9884198b-774a-4f88-9c0f-4b0745886ea7" alt=""><figcaption><p>Authorized JavaScript Origins</p></figcaption></figure>

8. &#x20;**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**, us&#x65;**:** <mark style="color:purple;">`https://YOUR_DOMAIN/api/auth/callback/google`</mark> \
   \
   **For development**, us&#x65;**:** <mark style="color:purple;">`http://localhost:3000/api/auth/callback/google`</mark>&#x20;

<figure><img src="https://4163021955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ft40347ZB9PUpZzu3pTeZ%2Fuploads%2Fz2Be0fRQQcgP6i47Uzjt%2Fimage%20(12).png?alt=media&#x26;token=0e48a307-0e89-4edd-8f09-97a8879bebd0" alt=""><figcaption><p>Authorized redirect URIs</p></figcaption></figure>

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 <mark style="color:purple;">.env</mark> file

<figure><img src="https://4163021955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ft40347ZB9PUpZzu3pTeZ%2Fuploads%2FOXZpkdXJp9F5s7dYu4O3%2Fimage%20(13).png?alt=media&#x26;token=94227405-779d-4eeb-8a56-be87b7798fc3" alt=""><figcaption><p>Client ID and Secret</p></figcaption></figure>

```
GOOGLE_CLIENT_ID="Your Google Client ID"
GOOGLE_CLIENT_SECRET="Your Google Client Secret"
```

{% hint style="danger" %}
If you’ve accidentally closed the tab, click on this button to open it again.
{% endhint %}

<figure><img src="https://4163021955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ft40347ZB9PUpZzu3pTeZ%2Fuploads%2FSXr3RIH6ZQQXzukGAwMM%2Fimage%20(14).png?alt=media&#x26;token=f2821475-bfa6-4472-bc7e-d8f118b7bcc7" alt=""><figcaption><p>Client IDs</p></figcaption></figure>

***

### GitHub Auth

SaaSPilot 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](https://github.com/settings/developers).

<figure><img src="https://4163021955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ft40347ZB9PUpZzu3pTeZ%2Fuploads%2FuuFEqh4nt1jievqZEztn%2Fimage%20(15).png?alt=media&#x26;token=ab439cc1-e27a-450d-b3c5-db04f4c1744d" alt=""><figcaption><p>GitHub - Developer Setting</p></figcaption></figure>

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

<figure><img src="https://4163021955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ft40347ZB9PUpZzu3pTeZ%2Fuploads%2FByJry2jbYXPPYRvQJHf6%2Fimage%20(16).png?alt=media&#x26;token=f66090a7-79a1-4f11-ac09-1eceeaaacf4e" alt=""><figcaption><p>GitHub -Register New OAuth app</p></figcaption></figure>

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

{% hint style="warning" %}
Remember to change the **Authorization Callback URL** for production. Replace the `http://localhost:3000` part of the URL with your website's URL.
{% endhint %}

<figure><img src="https://4163021955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ft40347ZB9PUpZzu3pTeZ%2Fuploads%2Fa9mYOTg8q83BsUgUHmPI%2Fimage%20(17).png?alt=media&#x26;token=1b05304f-b168-4167-bff5-6699a4619a9d" alt=""><figcaption><p>Register OAuth App</p></figcaption></figure>

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

<figure><img src="https://4163021955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ft40347ZB9PUpZzu3pTeZ%2Fuploads%2F3a6e984EVFZq5X8AGYS7%2Fimage%20(18).png?alt=media&#x26;token=97a8675e-afaa-477a-8858-f9ae635b692b" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://4163021955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ft40347ZB9PUpZzu3pTeZ%2Fuploads%2FjuoOYwSs2TNn3XWeeofP%2Fimage%20(19).png?alt=media&#x26;token=4d3ab44b-b904-4849-af46-9465775a1329" alt=""><figcaption><p>GitHub- Clinet ID and Secrets</p></figcaption></figure>

```
GITHUB_CLIENT_ID=YOUR_GITHUB_CLIENT_ID
GITHUB_CLIENT_SECRET=YOUR_GITHUB_CLIENT_SECRET
```

We are done with GitHub and Google authentications.

***

### Tips

* **User-Friendly Design**: Ensure that the authentication pages are intuitive and easy to navigate.
* **Clear Instructions**: Provide instructions and error messages to guide users through the login and signup processes.
* **Testing**: Thoroughly test each authentication method in both development and production environments.

By following these steps and tips, you can effectively integrate authentication methods into the SaaSPilot boilerplate, enhancing the user experience and ensuring secure access to your application.
