Authentication

NextAuth Setup

For authentication, we are using NextAuth.

Before integrating Github and Google authentication you have to set up NextAuth.

To set up NextAuth, first, create a .env file in the root of your project.

Then add NextAuth_SECRET and NextAuth_CLIENT to the .env file.

NEXTAUTH_SECRET=SECRET_KEY
NEXTAUTH_URL=http://localhost:3000

NEXTAUTH_SECRET is just a random string. You can generate a random string using this command

openssl rand -base64 32

or you can go to this URL it’ll give you a unique string too.

The NEXTAUTH_URL for development is http://localhost:3000 and for deployment it’s the canonical URL of your site.

Google Login

In this part of the documentation, we are going to show you how you can integrate Google Authentication into the Next.js Template.

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 Secret and Client ID

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.

2. After that click on the New Project button as shown below, then follow the steps to create a new project.

3. Once you’ve created the project make sure to select it.

4. Now create the credentials by clicking on the CREATE CREDENTIALS and then the 0Auth client id.

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

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

7. 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 URI there.

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

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

The .env variables will look like this:

GOOGLE_CLIENT_ID=YOUR_GOOGLE_CLIENT 
GOOGLE_CLIENT_SECRET=YOUR_GOOGLE_SECRET

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

GitHub Login

In this part of the documentation, we are going to show you how you can integrate GitHub Authentication on your Next.js Template.

To integrate Github Authentication you have to create a 0Auth app on GitHub. Then you have to get the Client ID and Secret.

Follow the steps below to create a 0Auth account on GitHub and then get the keys.

Getting The Github Secret and Client ID

To generate the Github Secret and Client ID first, you have to create a 0Auth Application on Github.

1. 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 button to register an Application.

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

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

5. Now Copy the Client ID and Client Secret from here.

6. Now, add those keys to your .env file to the following variables

GITHUB_CLIENT_ID=PASTE_YOUR_CLIENT_ID_HERE
GITHUB_CLIENT_SECRET=PASTE_YOUR_CLIENT_SECRET_HERE

Database Connection

For Authenticating using Username and Password, we are using SQL Database with the Prisma ORM.

We are going to use the PlanetScale database to show you, how to integrate the database with the Next.js template.

Feel free to choose any SQL database that fits your requirements.

MySQL on PlanetScale

Getting the Database URL

Login to your PlanetScale account and follow the steps to create a Database and generate a URL.

1. Click on the New Database button to create a Database.

Add the Name and choose the Region from the dropdown menu and then click on the Create Database.

2. Once you click on that button it’ll take a few seconds to create the Database.

3. Get the Database Connection URL by clicking the Connect button.

4. When you click on that button you’ll be asked to generate a new password. Go ahead and choose the Branch and Role for this Connect URL.

5. Now get the connection string from here. Make sure to choose the framework you are using. We are using Prisma, so we’ll choose Prisma. After you choose the framework you’ll get the Database URL as shown below.

6. Copy it and paste it to the .env file to the following variable:

DATABASE_URL=YOUR_DB_CONNECT_URL

Migrate the Schema

Now that you’ve added the connection string to the .env file you have to push the schema to the PlanetScale Database you created earlier.

Run this command to push the schema to PlanetScale.

npx prisma db push

If the code runs properly the schema will be added to the PlanetScale Database. You can go to the Console and run show tables; to see the Schema.

Now run this command.

npx prisma generate

Go ahead and signup using the form. If everything is done properly you’ll see the user on your PlanetScale database.

PostgreSQL on Vercel

In the Solid starter template, we used Vercel Postgres Database for Authentication. In this part of the documentation, we are going to show you you can integrate Vercel Postgres with the Next.js template.

Getting the Database URL

Before we integrate the database in the template first you have to deploy it to Vercel.

Once you deploy it follow the instruction to create the database.

1. Go to the Storage tab.

1. Now Scroll down and click on the Create New Database button.

After that select Postgres and then the Continue button. ****

Now do the following to create a new database:

1. Enter the database name. The name can only contain alphanumeric letters, "_" and "-" and can't exceed 32 characters.
2. Select a region.
3. Click Create.

The Database is created successfully.

Because we created the database in a project, we won’t have to add the environment variables manually to Vercel. It’ll be added automatically.

Now we have to pull the environment variables to the local project.

To do that, first of all, you have to install Vercel CLI

npm i -g vercel@latest

After that run this command to pull the .env variables.

vercel env pull .env

Note: You have to connect the local project with Vercel for this command to work. Follow this instruction to link the project.

Migrate the Schema

Now that you’ve added the connection string to the .env file you have to push the schema to the Database you created earlier.

Run this command to push the schema to Vercel Storage.

npx prisma db push

After you run this you’ll be able to see the Tables on Vercel Storage.

Now run this command

npx prisma generate

Now go ahead and signup using the Form. If everything was done properly you’ll see the user on the Database.

Notes:

If you are using Prisma ORM

Make sure you run Prisma generate command before the final build

prisma generate

then

npm run build

Also, while deploying your app on Vercel, edit build command and make it like the screenshot below: