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.

Practice

1. What is the main purpose of configuring a provider in Next.js authentication setup?

easy

A. To create API routes for fetching data

B. To style the login page with CSS

C. To store user data in a database

D. To connect your app to external login services like Google or GitHub

Solution

1. Step 1: Understand provider role in authentication

   Providers allow your app to use external services for user login, such as Google or GitHub.

2. Step 2: Differentiate from unrelated tasks

   Styling, data storage, and API routes are separate concerns not handled by provider configuration.

3. Final Answer:

   To connect your app to external login services like Google or GitHub -> Option D

4. Quick Check:

   Provider = External login connection [OK]

Hint: Providers link your app to login services like Google [OK]

Common Mistakes:

• Confusing providers with styling or database setup
• Thinking providers handle API data fetching
• Assuming providers store user data directly

2. Which of the following is the correct way to import the GitHub provider in Next.js authentication configuration?

easy

A. import { GitHubProvider } from 'next-auth/providers/github';

B. import GitHubProvider from 'next-auth/providers/github';

C. import GitHub from 'next-auth/providers';

D. import { github } from 'next-auth/providers';

Solution

1. Step 1: Check official import syntax

   The correct import uses default import from 'next-auth/providers/github' as GitHubProvider.

2. Step 2: Eliminate incorrect syntax

   Named imports or wrong paths cause errors; only default import from the specific path is correct.

3. Final Answer:

   import GitHubProvider from 'next-auth/providers/github'; -> Option B

4. Quick Check:

   Default import from provider path = C [OK]

Hint: Use default import from 'next-auth/providers/github' [OK]

Common Mistakes:

• Using named import instead of default import
• Importing from wrong module path
• Misspelling provider name or path

3. Given this Next.js provider configuration snippet, what will be the value of providers[0].id?

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

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

medium

A. undefined

B. "GoogleProvider"

C. "google"

D. "googleProvider"

Solution

1. Step 1: Understand provider object structure

   GoogleProvider returns an object with an id property set to "google" (lowercase provider name).

2. Step 2: Check the id property value

   Accessing providers[0].id returns "google" as per NextAuth provider conventions.

3. Final Answer:

   "google" -> Option C

4. Quick Check:

   Provider id for Google = "google" [OK]

Hint: Provider id is lowercase provider name like "google" [OK]

Common Mistakes:

• Expecting the id to be the import name
• Assuming id is undefined or camelCase
• Confusing provider instance with string

4. Identify the error in this Next.js credentials provider configuration:

import CredentialsProvider from 'next-auth/providers/credentials';

export const authOptions = {
  providers: [
    CredentialsProvider({
      name: 'Credentials',
      credentials: {
        username: { label: 'Username', type: 'text' },
        password: { label: 'Password', type: 'password' }
      },
      authorize: async (credentials) => {
        if (credentials.username === 'admin' && credentials.password === '1234') {
          return { id: 1, name: 'Admin' };
        }
        return null;
      }
    })
  ]
};

medium

A. No error, configuration is correct

B. Missing async keyword before authorize function

C. authorize function should return false instead of null on failure

D. Credentials object keys must be strings, not objects

Solution

1. Step 1: Review credentials provider syntax

   The credentials object correctly defines username and password with label and type.

2. Step 2: Check authorize function correctness

   authorize is async, returns user object on success, null on failure, which is valid.

3. Final Answer:

   No error, configuration is correct -> Option A

4. Quick Check:

   Credentials provider config valid = B [OK]

Hint: authorize returns user or null; credentials keys are objects [OK]

Common Mistakes:

• Thinking authorize must return false instead of null
• Confusing credentials keys as strings only
• Missing async on authorize function

5. You want to configure both GitHub OAuth and custom credentials login in Next.js. Which is the correct way to combine these providers in authOptions?

hard

A. Set providers as an array with GitHubProvider and CredentialsProvider inside, each configured properly

B. Use only one provider at a time; combining causes errors

C. Merge GitHub and Credentials provider objects into one before adding to providers array

D. Add GitHubProvider inside credentials object as a nested provider

Solution

1. Step 1: Understand multiple provider setup

   NextAuth supports multiple providers by listing them in the providers array separately.

2. Step 2: Avoid incorrect merging or nesting

   Providers must be separate objects; merging or nesting causes errors.

3. Final Answer:

   Set providers as an array with GitHubProvider and CredentialsProvider inside, each configured properly -> Option A

4. Quick Check:

   Multiple providers = separate objects in array [OK]

Hint: List each provider separately in the providers array [OK]

Common Mistakes:

• Trying to merge providers into one object
• Nesting providers inside credentials config
• Assuming only one provider allowed