Provider configuration (OAuth, credentials) in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

OAuth Provider Redirect Behavior

In a Next.js app using NextAuth.js, what happens immediately after a user successfully signs in with an OAuth provider?

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
    })
  ],
  pages: {
    signIn: '/auth/signin'
  },
  callbacks: {
    async redirect({ url, baseUrl }) {
      return url.startsWith(baseUrl) ? url : baseUrl;
    }
  },
  debug: false
});

A The user is redirected to the URL returned by the redirect callback or the default base URL.

B The user stays on the sign-in page and must manually refresh to see the authenticated state.

C The OAuth provider returns an error because redirect is not supported in NextAuth.js.

D The user is redirected to the OAuth provider's homepage instead of the app.

💡 Hint

Consider the role of the redirect callback after successful authentication.

NextAuth.js automatically redirects the user to the URL returned by the redirect callback or the default base URL after successful sign-in.

📝 Syntax

intermediate

Correct Credentials Configuration for OAuth Provider

Which option correctly configures the Google OAuth provider credentials in NextAuth.js?

NextJS

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

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: "your-client-id",
      clientSecret: "your-client-secret"
    })
  ]
});

A GoogleProvider({ client_id: process.env.GOOGLE_CLIENT_ID, client_secret: process.env.GOOGLE_CLIENT_SECRET })

B GoogleProvider({ clientId: process.env.GOOGLE_CLIENT_SECRET, clientSecret: process.env.GOOGLE_CLIENT_ID })

C GoogleProvider({ clientId: process.env.GOOGLE_CLIENT_ID, clientSecret: process.env.GOOGLE_CLIENT_SECRET })

D GoogleProvider({ clientId: "", clientSecret: "" })

💡 Hint

Check the exact property names required by the provider.

The correct property names are clientId and clientSecret. Using environment variables is best practice.

🔧 Debug

advanced

Fixing Credential Provider Callback Error

Given this NextAuth.js credential provider configuration, what error will occur and why?

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) return null;
        if (credentials.username === "admin" && credentials.password === "pass") {
          return { id: 1, name: "Admin" };
        }
        return null;
      }
    })
  ]
});

A Runtime error because CredentialsProvider is not imported correctly.

B TypeError because credentials can be undefined and properties accessed without check.

C SyntaxError due to missing return statement in authorize function.

D No error; the user is authenticated if credentials match.

💡 Hint

Consider what happens if credentials is undefined.

If credentials is undefined, accessing credentials.username causes a TypeError. A check for credentials is needed before accessing its properties.

❓ state_output

advanced

Session Object Content After OAuth Sign In

After a user signs in with an OAuth provider in NextAuth.js, what does the session object typically contain?

NextJS

import { useSession } from "next-auth/react";

export default function Profile() {
  const { data: session } = useSession();
  return <pre>{JSON.stringify(session, null, 2)}</pre>;
}

A An object with <code>user</code> (name, email, image), <code>expires</code> timestamp, and optionally <code>accessToken</code>.

B A string with the user's email only.

C An empty object because session is not set automatically.

D Only the OAuth provider's raw token string.

💡 Hint

Think about what information NextAuth.js stores in session by default.

NextAuth.js session object includes user info like name, email, image, and an expiration timestamp. Access tokens may be added via callbacks.

🧠 Conceptual

expert

Security Implication of Storing OAuth Credentials in Client Code

What is the main security risk if OAuth client secrets are exposed in client-side Next.js code instead of server-side configuration?

A The app will run slower due to client-side secret usage.

B The OAuth provider will reject all authentication requests automatically.

C There is no risk because client secrets are public by design.

D Anyone can see the client secret and impersonate the app to the OAuth provider, risking unauthorized access.

💡 Hint

Consider what client secrets protect and who can access client-side code.

Client secrets must be kept private on the server. Exposing them in client code allows attackers to misuse the app's identity with the OAuth provider.