NextAuth.js (Auth.js) setup 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'

Anext-auth

Breact-auth

Cnext-auth-client

Dauth-next

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect package names like 'react-auth' or 'auth-next'.

Forgetting to install the 'next-auth' package before importing.

The NextAuth function is imported from the next-auth package, which is the official library for authentication in Next.js.

2fill in blank

medium

Complete the code to export the NextAuth handler as the default export.

NextJS

export default NextAuth([1]);

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

Acallbacks

Bconfig

Cproviders

Doptions

Attempts:

3 left

💡 Hint

Common Mistakes

Passing only 'providers' without wrapping in a config object.

Using incorrect property names.

The NextAuth function expects a configuration object, often named config, which includes providers and other settings.

3fill in blank

hard

Fix the error in the providers array by completing the import for GitHub.

NextJS

import GitHub from '[1]';

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

Anext-auth/providers/github

Bnext-auth/github-provider

Cnext-auth/providers/GitHub

Dnext-auth/provider/github

Attempts:

3 left

💡 Hint

Common Mistakes

Capitalizing 'GitHub' in the import path.

Using incorrect folder names like 'provider' instead of 'providers'.

The correct import path for GitHub is next-auth/providers/github with lowercase 'github'.

4fill in blank

hard

Fill both blanks to complete the providers array with GitHub and its clientId and clientSecret.

NextJS

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

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

AGITHUB_ID

BGITHUB_SECRET

CGITHUB_CLIENT

DGITHUB_KEY

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect environment variable names like 'GITHUB_CLIENT'.

Swapping clientId and clientSecret values.

The environment variables for GitHub OAuth are usually named GITHUB_ID and GITHUB_SECRET.

5fill in blank

hard

Fill all three blanks to add a secret, enable debug mode, and set a custom session strategy.

NextJS

export default NextAuth({ providers, secret: process.env.[1], debug: [2], session: { strategy: '[3]' } });

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

ANEXTAUTH_SECRET

Btrue

Cjwt

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'false' for debug when intending to enable it.

Setting session strategy to an invalid value.

The secret is stored in NEXTAUTH_SECRET. Debug mode is enabled with true. The session strategy can be set to jwt for JSON Web Tokens.