🍪 Note: Our web-capstone-docs subdomain is a cookie-free zone.
Additional Libraries
NextAuth
Register O-Auth-App

Register O-Auth-App at GitHub

When working with NextAuth to implement an OAuth login to our application, as a first step, we need to decide on one or multiple OAuth provider(s). We will be working exemplatory with GitHub as our provider. In case you wish to implement a different provider, take a look at the supported providers (opens in a new tab) and follow the respective guides in order to register your application.

On GitHub

  • On GitHub go to the developer settings (opens in a new tab) and select "New OAuth App"
  • Once there, enter
    • the name of your application,
    • the Homepage URL (this can either be http://localhost:3000 for local development or the URL of your vercel deployment),
    • the Authorization callback URL (this API route always starts with your Homepage URL, i.e. http://localhost:3000/api/auth/callback/github)
  • Register the application
  • Note down the CLIENT ID and generate a new CLIENT SECRET

In your project

  • create an .env.local file based on the example below
GITHUB_ID=this sould be the CLIENT ID
GITHUB_SECRET=this should be the CLIENT SECRET
NEXTAUTH_URL=this should be the URL of your application, localhost or vercel deployment
NEXTAUTH_SECRET=this can be any random string
  • assign the GITHUB_ID, GITHUB_SECRET, NEXTAUTH_URL and NEXTAUTH_SECRET their respective values
  • for the NEXTAUTH_SECRET, you can use the command openssl rand -base64 32 in your terminal to generate a random 32 character string
  • the NEXTAUTH_SECRET is used to encrypt the NextAuth.js JWT, and to hash email verification tokens

Ensure these values are securely stored and not exposed in your repository - keep the .gitignore file in mind.

For your deployment on Vercel, you should set these environment variables in the project settings under 'Environment Variables' as well. For more details on using environment variables in Vercel, you can refer to Vercel's documentation (opens in a new tab).

⚠️

The OAuth app is always registered for only one URL, meaning you need to create an OAuth app for your testing environment (localhost) and another one for your Vercel deployment. Strictly speaking, you even need to register an OAuth app for each PR because Vercel generates a new URL for every PR. To circumvent this issue, you can set up a CredentialsProvider (login via username and password) in the config (pages/api/auth/[...nextauth].js) alongside the GitHub provider.

See this code snippet from the advanced section for an example that allows users to test our application by entering certain credentials.

NextAuthBasic Setup and Login