Provider configuration (OAuth, credentials) in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the NextAuth function from the correct package.

NextJS

import NextAuth from '[1]';

Drag options to blanks, or click blank then click option'

Aauth-next

Breact-auth

Cnext-auth/client

Dnext-auth

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'react-auth' instead of 'next-auth'.

Importing from 'next-auth/client' which is outdated.

The NextAuth function is imported from the next-auth package.

2fill in blank

medium

Complete the code to add GitHub as an OAuth provider in NextAuth configuration.

NextJS

providers: [
  GitHubProvider({
    clientId: process.env.[1]_CLIENT_ID,
    clientSecret: process.env.[1]_CLIENT_SECRET
  })
],

Drag options to blanks, or click blank then click option'

AGITLAB

BGITHUB

CGOOGLE

DFACEBOOK

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'GITLAB' or 'GOOGLE' instead of 'GITHUB'.

Forgetting to match both clientId and clientSecret environment variables.

GitHub OAuth credentials are usually stored in environment variables named GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET.

3fill in blank

hard

Fix the error in the NextAuth options by completing the secret configuration.

NextJS

export default NextAuth({
  providers: [/* providers here */],
  secret: process.env.[1]
});

Drag options to blanks, or click blank then click option'

ANEXTAUTH_SECRET

BAUTH_SECRET

CSESSION_SECRET

DNEXT_SECRET

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'AUTH_SECRET' or 'SESSION_SECRET' which are not standard for NextAuth.

Leaving the secret undefined causes runtime errors.

The secret key for NextAuth is conventionally stored in NEXTAUTH_SECRET environment variable.

4fill in blank

hard

Fill both blanks to configure Google OAuth provider with environment variables.

NextJS

providers: [
  GoogleProvider({
    clientId: process.env.[1],
    clientSecret: process.env.[2]
  })
],

Drag options to blanks, or click blank then click option'

AGOOGLE_CLIENT_ID

BGOOGLE_CLIENT_SECRET

CGOOGLE_ID

DGOOGLE_SECRET

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up clientId and clientSecret variables.

Using non-standard environment variable names.

Google OAuth credentials are commonly stored as GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET environment variables.

5fill in blank

hard

Fill all three blanks to complete the NextAuth configuration with credentials provider.

NextJS

CredentialsProvider({
  name: 'Credentials',
  credentials: {
    username: { label: 'Username', type: 'text' },
    password: { label: 'Password', type: 'password' }
  },
  async authorize(credentials) {
    const user = await authenticateUser(credentials.[1], credentials.[2]);
    if (user) {
      return user;
    } else {
      throw new Error('[3]');
    }
  }
})

Drag options to blanks, or click blank then click option'

Ausername

Bpassword

CInvalid username or password

Duser

Eemail

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'email' instead of 'username' if the form uses username.

Returning a generic or unclear error message.

The authorize function uses credentials.username and credentials.password to authenticate. The error message should clearly state the login failure reason.

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