Client-side session access in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the hook used for client-side session access in Next.js.

NextJS

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

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

AsignIn

BgetSession

CuseSession

DuseRouter

Attempts:

3 left

💡 Hint

Common Mistakes

Using getSession which is for server-side or client-side but returns a promise.

Using signIn which is for authentication actions, not session access.

The useSession hook is used to access the session data on the client side in Next.js.

2fill in blank

medium

Complete the code to get the session data and loading state from the hook.

NextJS

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

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

Astatus

Bloading

Cerror

DisLoading

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'loading' or 'isLoading' which are not returned by useSession.

Using 'error' which is not part of the useSession return.

The useSession hook returns an object with data and status. The status indicates if the session is loading, authenticated, or unauthenticated.

3fill in blank

hard

Fix the error in the code to correctly check if the user is authenticated.

NextJS

if (session && session.user[1]) { console.log('User is logged in'); }

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

A!== undefined

B== null

C!== null

D!= null

Attempts:

3 left

💡 Hint

Common Mistakes

Using strict inequality which only checks one type.

Using equality to null which checks for absence, not presence.

Using != null checks for both null and undefined, which is a common way to verify if session.user exists.

4fill in blank

hard

Fill both blanks to correctly display the user's email if authenticated.

NextJS

return (<div>{session?.user[1] ? session.user[2] : 'Not logged in'}</div>);

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

A.email

B.name

C?.email

D?.name

Attempts:

3 left

💡 Hint

Common Mistakes

Using dot notation without optional chaining causing runtime errors.

Checking for name instead of email.

The optional chaining operator ?. safely accesses email without errors if user is undefined. The first blank checks if the email exists, the second accesses it.

5fill in blank

hard

Fill all three blanks to fetch session data client-side and handle loading and unauthenticated states.

NextJS

const { [1]: session, [2] } = useSession();

if ([3] === 'loading') return <p>Loading...</p>;
if (!session) return <p>Please sign in</p>;

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

Adata

Bstatus

Dloading

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing 'loading' string with variable names.

Not aliasing data to session.

The useSession hook returns data as session and status for loading state. We check if status is 'loading' to show a loading message.