NextAuth.js (Auth.js) setup in NextJS - Mini Project: Build & Apply

NextAuth.js (Auth.js) Setup in Next.js

📖 Scenario: You are building a Next.js app that needs user login functionality. You will set up NextAuth.js (now called Auth.js) to handle authentication securely and easily.

🎯 Goal: Set up NextAuth.js in a Next.js app with a basic email provider configuration. You will create the data setup, configure the provider, implement the authentication handler, and complete the API route.

📋 What You'll Learn

Create a NextAuth.js options object with an Email provider

Set up a secret string for NextAuth.js

Implement the NextAuth handler function using the options

Export the NextAuth handler as the default export in the API route

💡 Why This Matters

🌍 Real World

NextAuth.js is widely used in Next.js apps to add secure and easy user authentication with many providers.

💼 Career

Understanding NextAuth.js setup is valuable for frontend and full-stack developers working on modern web apps requiring login features.

1

Create NextAuth.js options with Email provider

Create a constant called authOptions that is an object. Inside it, add a providers array with one provider: EmailProvider imported from 'next-auth/providers/email'. Configure this provider with server set to process.env.EMAIL_SERVER and from set to process.env.EMAIL_FROM.

NextJS

import EmailProvider from "next-auth/providers/email";

// Create authOptions with EmailProvider
// Your code here

Hint

Remember to create an object named authOptions with a providers array containing EmailProvider configured with server and from from environment variables.

2

Add a secret string to NextAuth.js options

Add a secret property to the existing authOptions object. Set it to process.env.NEXTAUTH_SECRET.

NextJS

import EmailProvider from "next-auth/providers/email";

export const authOptions = {
  providers: [
    EmailProvider({
      server: process.env.EMAIL_SERVER,
      from: process.env.EMAIL_FROM
    })
  ],
  // Add secret property here
  // Your code here
};

Hint

Add the secret property to authOptions using the environment variable NEXTAUTH_SECRET.

3

Create NextAuth handler function with options

Import NextAuth from 'next-auth/next'. Then create a constant called handler and assign it the result of calling NextAuth with authOptions as argument.

NextJS

import EmailProvider from "next-auth/providers/email";
import NextAuth from "next-auth/next";

export const authOptions = {
  providers: [
    EmailProvider({
      server: process.env.EMAIL_SERVER,
      from: process.env.EMAIL_FROM
    })
  ],
  secret: process.env.NEXTAUTH_SECRET
};

// Create handler using NextAuth and authOptions
// Your code here

Hint

Import NextAuth and create handler by calling NextAuth(authOptions).

4

Export NextAuth handler as default API route

Export the handler constant as the default export from the file using export default handler.

NextJS

import EmailProvider from "next-auth/providers/email";
import NextAuth from "next-auth/next";

export const authOptions = {
  providers: [
    EmailProvider({
      server: process.env.EMAIL_SERVER,
      from: process.env.EMAIL_FROM
    })
  ],
  secret: process.env.NEXTAUTH_SECRET
};

const handler = NextAuth(authOptions);

// Export handler as default
// Your code here

Hint

Use export default handler to make the NextAuth handler the default export.

Practice

1. What is the main purpose of NextAuth.js in a Next.js application?

easy

A. To optimize images automatically

B. To manage database connections

C. To style components with CSS

D. To handle user authentication and login flows easily

Solution

1. Step 1: Understand NextAuth.js role

   NextAuth.js is a library designed to simplify adding authentication to Next.js apps.

2. Step 2: Identify main functionality

   It manages login flows, sessions, and providers for user authentication.

3. Final Answer:

   To handle user authentication and login flows easily -> Option D

4. Quick Check:

   NextAuth.js = Authentication helper [OK]

Hint: NextAuth.js is all about login and user sessions [OK]

Common Mistakes:

• Confusing NextAuth.js with styling or database tools
• Thinking it manages images or CSS
• Assuming it handles API routing unrelated to auth

2. Which file path is the correct place to create the NextAuth.js API route in a Next.js app?

easy

A. /pages/api/auth/[...nextauth].js

B. /pages/auth/nextauth.js

C. /api/auth.js

D. /pages/api/nextauth.js

Solution

1. Step 1: Recall NextAuth.js API route convention

   NextAuth.js requires a catch-all API route named [...nextauth].js inside /pages/api/auth/.

2. Step 2: Match the correct path

   Only /pages/api/auth/[...nextauth].js matches the required path: /pages/api/auth/[...nextauth].js.

3. Final Answer:

   /pages/api/auth/[...nextauth].js -> Option A

4. Quick Check:

   API route = /api/auth/[...nextauth] [OK]

Hint: NextAuth.js uses catch-all API route [...nextauth].js [OK]

Common Mistakes:

• Placing the file outside /api/auth/
• Using a non-catch-all filename
• Missing the brackets in filename

3. Given this NextAuth.js configuration snippet, what will be the value of session.user.name after a successful login?

import NextAuth from "next-auth";
import GithubProvider from "next-auth/providers/github";

export default NextAuth({
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET
    })
  ],
  callbacks: {
    async session({ session, user }) {
      session.user.name = "CustomName";
      return session;
    }
  }
});

medium

A. The GitHub username

B. "CustomName"

C. Undefined

D. The user's email

Solution

1. Step 1: Understand the session callback

   The session callback modifies the session object before it is returned to the client.

2. Step 2: Check the modification

   It sets session.user.name explicitly to "CustomName" regardless of original data.

3. Final Answer:

   "CustomName" -> Option B

4. Quick Check:

   Session callback overrides user.name = "CustomName" [OK]

Hint: Session callback can override user data before sending [OK]

Common Mistakes:

• Assuming user.name stays as GitHub username
• Thinking session.user.name is undefined by default
• Confusing email with name property

4. You wrote this NextAuth.js provider config but get an error: TypeError: GithubProvider is not a function. What is the likely cause?

import { GithubProvider } from "next-auth/providers/github";

export default NextAuth({
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET
    })
  ]
});

medium

A. Provider config must be inside callbacks

B. Missing environment variables

C. Incorrect import syntax; should use default import without braces

D. NextAuth must be imported from 'next-auth/client'

Solution

1. Step 1: Check import style for GithubProvider

   GithubProvider is the default export, so it should be imported without braces.

2. Step 2: Identify correct import syntax

   Use import GithubProvider from "next-auth/providers/github"; instead of curly braces.

3. Final Answer:

   Incorrect import syntax; should use default import without braces -> Option C

4. Quick Check:

   Default export = no braces in import [OK]

Hint: Default exports import without braces {} [OK]

Common Mistakes:

• Using named import syntax for default export
• Assuming environment variables cause this error
• Placing provider config inside callbacks

5. You want to add Google and GitHub login providers in NextAuth.js with environment variables. Which is the correct way to configure both providers in /pages/api/auth/[...nextauth].js?

hard

A. import GoogleProvider from "next-auth/providers/google";
import GithubProvider from "next-auth/providers/github";

export default NextAuth({
providers: [
GoogleProvider({ clientId: process.env.GOOGLE_ID, clientSecret: process.env.GOOGLE_SECRET }),
GithubProvider({ clientId: process.env.GITHUB_ID, clientSecret: process.env.GITHUB_SECRET })
]
});

B. import { GoogleProvider, GithubProvider } from "next-auth/providers";

export default NextAuth({
providers: [
GoogleProvider(process.env.GOOGLE_ID, process.env.GOOGLE_SECRET),
GithubProvider(process.env.GITHUB_ID, process.env.GITHUB_SECRET)
]
});

C. import GoogleProvider from "next-auth/providers/google";
import GithubProvider from "next-auth/providers/github";

export default NextAuth({
providers: {
google: GoogleProvider,
github: GithubProvider
}
});

D. import GoogleProvider from "next-auth/providers/google";
import GithubProvider from "next-auth/providers/github";

export default NextAuth({
providers: [
GoogleProvider,
GithubProvider
]
});

Solution

1. Step 1: Import providers correctly

   Each provider is a default export from its own module and must be imported separately.

2. Step 2: Configure providers as array with clientId and clientSecret

   Providers must be called as functions with an object containing clientId and clientSecret from environment variables.

3. Step 3: Validate options

   import GoogleProvider from "next-auth/providers/google"; import GithubProvider from "next-auth/providers/github"; export default NextAuth({ providers: [ GoogleProvider({ clientId: process.env.GOOGLE_ID, clientSecret: process.env.GOOGLE_SECRET }), GithubProvider({ clientId: process.env.GITHUB_ID, clientSecret: process.env.GITHUB_SECRET }) ] }); correctly imports and configures both providers in an array with proper keys.

4. Final Answer:

   Correct import and provider function calls with env variables -> Option A

5. Quick Check:

   Providers array with clientId/clientSecret = import GoogleProvider from "next-auth/providers/google"; import GithubProvider from "next-auth/providers/github"; export default NextAuth({ providers: [ GoogleProvider({ clientId: process.env.GOOGLE_ID, clientSecret: process.env.GOOGLE_SECRET }), GithubProvider({ clientId: process.env.GITHUB_ID, clientSecret: process.env.GITHUB_SECRET }) ] }); [OK]

Hint: Providers need clientId and clientSecret in array [OK]

Common Mistakes:

• Importing providers as named imports from a single module
• Passing env vars directly without object keys
• Using object instead of array for providers