Session management in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Next.js session hook.

NextJS

import { [1] } from 'next-auth/react';

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

AuseSession

BgetSession

CsignIn

DsignOut

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'getSession' which is for server-side session fetching.

Confusing signIn or signOut as session hooks.

The useSession hook is used to access session data in Next.js components.

2fill in blank

medium

Complete the code to get the session data inside a React component.

NextJS

const { data: session, status } = [1]();

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

AfetchSession

BgetSession

CuseSession

DloadSession

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'getSession' which is asynchronous and used server-side.

Trying to call a non-existent function like 'fetchSession'.

useSession() returns the session data and status inside React components.

3fill in blank

hard

Fix the error in the server-side session fetching code.

NextJS

import { getSession } from 'next-auth/react';

export async function getServerSideProps(context) {
  const session = await [1](context);
  return { props: { session } };
}

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

AgetSession

BloadSession

CuseSession

DfetchSession

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'useSession' server-side which is a React hook.

Calling non-existent functions like 'fetchSession'.

getSession(context) is the correct function to fetch session data server-side in Next.js.

4fill in blank

hard

Fill both blanks to sign in a user with credentials and redirect after success.

NextJS

import { signIn } from 'next-auth/react';

async function handleLogin() {
  const result = await signIn('[1]', { redirect: [2] });
}

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

Acredentials

Btrue

Cfalse

Doauth

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'oauth' instead of 'credentials' for username/password login.

Setting redirect to true when manual handling is needed.

Use 'credentials' as the provider name and redirect: false to handle redirects manually.

5fill in blank

hard

Fill all three blanks to create a session-aware API route that returns the user's email or an error.

NextJS

import { getSession } from 'next-auth/react';

export default async function handler(req, res) {
  const session = await [1](req[2]);
  if (!session) {
    return res.status(401).json({ error: 'Unauthorized' });
  }
  res.status(200).json({ email: session.user[3] });
}

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

AgetSession

B.context

C.email

D.user

Attempts:

3 left

💡 Hint

Common Mistakes

Passing context instead of request to getSession in API routes.

Accessing session.email directly instead of session.user.email.

getSession(req) fetches the session from the request. The request object is passed directly. Access the email via session.user.email.