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.