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 localhost:3000 and for deployment it’s the canonical URL of your site.
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.
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.
After that 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.
Since we are setting up a local environment, we are going to add our localhost URI there.
For production: https://{YOUR_DOMAIN}/api/auth/callback/google
For development: http://localhost:3000/api/auth/callback/google
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.
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.
To generate the Github Secret and Client ID first, you have to create a 0Auth Application on Github.
Register an App by providing all the information.
Remember to change the Authorization Callback URL for the production. Just change the localhost:3000 part of the URL with the URL of your website.
GITHUB_CLIENT_ID=PASTE_YOUR_CLIENT_ID_HERE
GITHUB_CLIENT_SECRET=PASTE_YOUR_CLIENT_SECRET_HERE
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.
Login to your PlanetScale account and follow the steps to create a Database and generate a URL.
Add the Name and choose the Region from the dropdown menu and then click on the Create Database.
DATABASE_URL=YOUR_DB_CONNECT_URL
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.
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.
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.
After that select Postgres and then the Continue button. ****
Now do the following to create a new database:
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.
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.
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: