NextAuth.js (Auth.js) setup in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this NextAuth.js sign-in callback?

Consider this NextAuth.js configuration snippet. What will be the value of token.userRole after a successful sign-in?

NextJS

import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";

export default NextAuth({
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        username: { label: "Username", type: "text" },
        password: { label: "Password", type: "password" }
      },
      async authorize(credentials) {
        if (credentials.username === "admin" && credentials.password === "pass") {
          return { id: 1, name: "Admin User", role: "admin" };
        }
        return null;
      }
    })
  ],
  callbacks: {
    async jwt({ token, user }) {
      if (user) {
        token.userRole = user.role;
      }
      return token;
    }
  }
});

A undefined

B "admin"

C "user"

D null

💡 Hint

Look at the authorize function and what it returns for the user object.

The authorize function returns a user object with a role property set to "admin" when credentials match. The jwt callback adds this role as userRole on the token. So after sign-in, token.userRole is "admin".

📝 Syntax

intermediate

Which option correctly configures NextAuth.js to use Google provider?

Choose the correct NextAuth.js provider configuration for Google OAuth.

A

import GoogleProvider from "next-auth/providers/google";

providers: [
  GoogleProvider({
    clientId: process.env.GOOGLE_ID,
    clientSecret: process.env.GOOGLE_SECRET
  })
]

B

import GoogleAuth from "next-auth/providers/google";

providers: [
  GoogleAuth({
    id: process.env.GOOGLE_ID,
    secret: process.env.GOOGLE_SECRET
  })
]

C

import GoogleProvider from "next-auth/providers/google";

providers: [
  GoogleProvider({
    client_id: process.env.GOOGLE_ID,
    client_secret: process.env.GOOGLE_SECRET
  })
]

D

import GoogleProvider from "next-auth/providers/google";

providers: [
  GoogleProvider({
    clientId: process.env.GOOGLE_CLIENT_ID,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET
  })
]

💡 Hint

Check the exact property names required by NextAuth.js Google provider.

The Google provider requires clientId and clientSecret properties matching environment variables. Option A uses the correct import and property names.

🔧 Debug

advanced

Why does this NextAuth.js session callback cause an error?

Examine this session callback code. What error will it cause when running?

NextJS

callbacks: {
  async session({ session, token }) {
    session.user.id = token.sub;
    session.user.role = token.userRole;
    return session;
  }
}

A ReferenceError: token is not defined

B TypeError: Cannot set properties of undefined (setting 'id')

C SyntaxError: Unexpected token

D No error, session updated correctly

💡 Hint

The session.user object is always available and mutable in the session callback.

No error occurs. The session object always includes a user property that is an object. You can safely set additional properties like id and role. This is a common and documented pattern in NextAuth.js.

❓ state_output

advanced

What is the value of session.user.email after sign-in with this NextAuth.js config?

Given this NextAuth.js configuration, what will session.user.email be after a user signs in?

NextJS

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, token }) {
      session.user.email = token.email ?? "[e-mail]";
      return session;
    },
    async jwt({ token, user, account }) {
      if (user) {
        token.email = user.email;
      }
      return token;
    }
  }
});

A The user's GitHub email address

B "[e-mail]"

C undefined

D null

💡 Hint

Look at how the jwt callback sets token.email and how session callback uses it.

The jwt callback sets token.email from the user object after sign-in. The session callback then assigns session.user.email from token.email. So it will be the user's GitHub email.

🧠 Conceptual

expert

Which statement about NextAuth.js adapter usage is correct?

NextAuth.js supports adapters to connect to databases. Which of these statements is true about using an adapter?

A Adapters are required for all providers to store user sessions in a database.

B Adapters automatically encrypt user passwords before storing them in the database.

C Adapters allow NextAuth.js to persist user accounts and sessions but are optional for JWT-based sessions.

D Adapters replace the need for callbacks like jwt and session in NextAuth.js.

💡 Hint

Think about when adapters are necessary and how sessions can be managed.

Adapters let NextAuth.js save user accounts and sessions in a database. They are optional if you use JWT sessions, which store session data in tokens instead of a database.