Client-side session access in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Next.js client component display?

Consider this Next.js client component that tries to read a session value using useSession from next-auth/react. What will it render if the user is not logged in?

NextJS

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

export default function UserStatus() {
  const { data: session } = useSession();

  if (!session) {
    return <p>Loading session...</p>;
  }

  return <p>Welcome, {session.user.name}!</p>;
}

A <p>Welcome, undefined!</p>

B <p>Error: session is undefined</p>

C <p>Welcome, guest!</p>

D <p>Loading session...</p>

💡 Hint

Think about what useSession returns before the session is loaded.

The useSession hook returns data as null initially if the user is not logged in or the session is loading. The component checks if session is falsy and shows "Loading session...". It does not immediately show a welcome message.

❓ state_output

intermediate

What is the value of userName after this code runs?

This Next.js client component uses useSession and useEffect to set a local state userName. What will userName be after the component mounts if the user is logged in with name "Alice"?

NextJS

import { useSession } from 'next-auth/react';
import { useState, useEffect } from 'react';

export default function Profile() {
  const { data: session } = useSession();
  const [userName, setUserName] = useState('');

  useEffect(() => {
    if (session?.user?.name) {
      setUserName(session.user.name);
    }
  }, [session]);

  return <p>{userName}</p>;
}

A "Alice"

B "" (empty string)

C undefined

D null

💡 Hint

Remember when useEffect runs and how state updates work.

When the session data is available and contains the user name "Alice", the useEffect runs and sets userName to "Alice". Initially, it is empty, but after mount and session load, it updates.

📝 Syntax

advanced

Which option correctly accesses session data in a Next.js client component?

Choose the code snippet that correctly uses useSession to access the user's email in a client component.

A const { data: session } = useSession(); const email = session.user.email;

B const session = useSession(); const email = session.user.email;

C const { session } = useSession(); const email = session.user.email;

D const { data } = useSession(); const email = data.user.email;

💡 Hint

Check the exact structure returned by useSession.

The useSession hook returns an object with a data property containing the session. Option A correctly destructures data as session. Option A treats the whole return as session, which is incorrect. Option A destructures a non-existent session property. Option A destructures data but uses it directly without renaming, which is valid but option A matches the question's pattern.

🔧 Debug

advanced

Why does this Next.js client component throw an error?

This component tries to access session data but throws an error. What is the cause?

NextJS

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

export default function Dashboard() {
  const { data: session } = useSession();
  return <p>{session.user.email}</p>;
}

A useSession cannot be used in client components

B session is null initially, so accessing user.email causes a TypeError

C The component must be server-side to access session

D Missing import for React causes the error

💡 Hint

Think about the initial value of session when the component first renders.

The useSession hook returns data as null initially while loading or if no session exists. Accessing session.user.email without checking if session is null causes a TypeError.

🧠 Conceptual

expert

Which statement about client-side session access in Next.js is true?

Choose the correct statement about accessing session data on the client side in Next.js using next-auth.

A Client components can access session data synchronously via props without hooks.

B Session data is always immediately available on the client without delay when using <code>useSession</code>.

C The <code>useSession</code> hook provides session data asynchronously and may be null initially, so components must handle loading states.

D Next.js requires server components to access session data; client components cannot access it.

💡 Hint

Consider how useSession works and the nature of client-side data fetching.

The useSession hook fetches session data asynchronously on the client. Initially, the session data may be null while loading, so components must handle this state. Options A, B, and C are incorrect because session data is not instantly available, client components rely on hooks for session, and client components can access session data with useSession.

Practice

1. What does the useSession hook from next-auth provide in a Next.js app?

easy

A. Access to the current user's session data and status on the client side

B. Server-side rendering of session data only

C. A way to store session data in local storage manually

D. Automatic user authentication without any configuration

Solution

1. Step 1: Understand the purpose of useSession

   The useSession hook is designed to provide session data and status on the client side in Next.js apps using next-auth.

2. Step 2: Compare options with the hook's functionality

   Access to the current user's session data and status on the client side correctly states it provides access to current user's session data and status. Other options describe unrelated or incorrect behaviors.

3. Final Answer:

   Access to the current user's session data and status on the client side -> Option A

4. Quick Check:

   useSession gives client session data = A [OK]

Hint: Remember: useSession is for client-side session info [OK]

Common Mistakes:

• Thinking useSession works only server-side
• Confusing useSession with local storage
• Assuming useSession auto-authenticates without setup

2. Which of the following is the correct way to import and use useSession in a Next.js component?

easy

A. import { useSession } from 'next-auth/client'; const session = useSession();

B. import useSession from 'next-auth/client'; const session = useSession();

C. import { useSession } from 'next-auth/react'; const session = useSession.data;

D. import { useSession } from 'next-auth/react'; const { data: session } = useSession();

Solution

1. Step 1: Check the correct import path and usage

   The official import for useSession in next-auth v4+ is from 'next-auth/react'. The hook returns an object with data and status.

2. Step 2: Validate the destructuring syntax

   import { useSession } from 'next-auth/react'; const { data: session } = useSession(); correctly imports and destructures data as session. Other options use wrong import paths or incorrect usage.

3. Final Answer:

   import { useSession } from 'next-auth/react'; const { data: session } = useSession(); -> Option D

4. Quick Check:

   Correct import and destructuring = C [OK]

Hint: Use 'next-auth/react' and destructure data as session [OK]

Common Mistakes:

• Importing from 'next-auth/client' which is outdated
• Not destructuring the returned object
• Accessing session data incorrectly

3. Given this Next.js component using useSession:

import { useSession } from 'next-auth/react';
export default function Profile() {
  const { data: session, status } = useSession();
  if (status === 'loading') return <p>Loading...</p>;
  if (!session) return <p>Not signed in</p>;
  return <p>Welcome, {session.user.name}!</p>;
}

What will be rendered if the user is signed in with name "Alex"?

medium

A. Not signed in

B. Loading...

C. Welcome, Alex!

D. Nothing is rendered

Solution

1. Step 1: Understand the session states

   The component shows "Loading..." if status is 'loading', "Not signed in" if no session, and welcome message if session exists.

2. Step 2: Apply the signed-in user condition

   Since the user is signed in with name "Alex", session exists and status is not 'loading'. So it renders the welcome message with the user's name.

3. Final Answer:

   <p>Welcome, Alex!</p> -> Option C

4. Quick Check:

   Signed-in user shows welcome message = A [OK]

Hint: Check session presence to show welcome, else loading or sign-in [OK]

Common Mistakes:

• Confusing loading and signed-in states
• Assuming session.user.name is undefined
• Ignoring the status check order

4. Identify the error in this Next.js component using useSession:

import { useSession } from 'next-auth/react';
export default function Dashboard() {
  const session = useSession();
  if (session.status === 'loading') return <p>Loading...</p>;
  if (!session.data) return <p>Please sign in</p>;
  return <p>Hello, {session.user.name}</p>;
}

medium

A. Accessing session.user.name directly instead of session.data.user.name

B. Incorrect import path for useSession

C. Missing useEffect to fetch session

D. Using session.status instead of session.state

Solution

1. Step 1: Check how useSession returns data

   useSession returns an object with data and status. The user info is inside data.user.

2. Step 2: Identify incorrect property access

   The code tries to access session.user.name directly, but it should be session.data.user.name. This causes an error.

3. Final Answer:

   Accessing session.user.name directly instead of session.data.user.name -> Option A

4. Quick Check:

   Use session.data.user for user info, not session.user [OK]

Hint: Remember session data is in session.data, not top-level [OK]

Common Mistakes:

• Accessing user info directly on session object
• Confusing status property names
• Adding unnecessary hooks like useEffect

5. You want to show a personalized greeting only if the user is signed in and their email is verified in the session. Given useSession returns { data: session, status }, which code snippet correctly implements this in a Next.js component?

hard

A. if (!session) return Please verify your email;
if (status === 'loading') return Loading...;
return Welcome back, {session.user.name}!;

B. if (status === 'loading') return Loading...;
if (!session || !session.user.emailVerified) return Please verify your email;
return Welcome back, {session.user.name}!;

C. if (status === 'loading') return Loading...;
if (!session.user.emailVerified) return Please verify your email;
return Welcome back, {session.user.name}!;

D. if (status === 'loading') return Loading...;
if (!session || session.user.emailVerified) return Please verify your email;
return Welcome back, {session.user.name}!;

Solution

1. Step 1: Check loading state first

   Always handle status === 'loading' first to avoid rendering before session is ready.

2. Step 2: Verify session existence and email verification

   We must check if session exists and if session.user.emailVerified is true. If not, show the verification message.

3. Step 3: Render personalized greeting if checks pass

   If session exists and email is verified, show welcome message with user name.

4. Final Answer:

   if (status === 'loading') return <p>Loading...</p>; if (!session || !session.user.emailVerified) return <p>Please verify your email</p>; return <p>Welcome back, {session.user.name}!</p>; -> Option B

5. Quick Check:

   Check loading, then session and emailVerified before greeting [OK]

Hint: Check loading first, then session and emailVerified [OK]

Common Mistakes:

• Checking session after loading state
• Not verifying session existence before accessing properties
• Incorrect logic for email verification condition