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

Need a 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
};

Need a 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

Need a 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

Need a hint?

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