Client-side session access in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is client-side session access in Next.js?

Client-side session access means reading or using session data directly in the browser, allowing your app to personalize content without needing a full page reload.

beginner

Which Next.js feature helps you access session data on the client side?

Using React hooks like useSession from next-auth/react allows you to get session info directly in your components.

intermediate

Why should you avoid storing sensitive session data directly in client-side storage like localStorage?

Because localStorage is accessible by any script on the page, exposing sensitive data can lead to security risks like cross-site scripting (XSS) attacks.

intermediate

How does Next.js ensure session data stays up to date on the client side?

Next.js with next-auth uses React hooks that automatically update session state when it changes, keeping the UI in sync without manual refresh.

intermediate

What is a common pattern to protect pages that require a session on the client side in Next.js?

Use the useSession hook to check if a user is logged in, and if not, redirect them or show a loading message until session data is ready.

Which hook from next-auth lets you access session data on the client side?

A useSession

B useState

C useEffect

D useRouter

useSession is the hook designed to access session info in Next.js apps using next-auth.

Why is storing sensitive session data in localStorage discouraged?

A It does not persist after reload

B It is slow to access

C It can be read by any script, risking security

D It requires server-side code

localStorage is accessible by all scripts on the page, so sensitive data can be stolen if the site is vulnerable to XSS.

What does the useSession hook return?

A Server logs

B User session data and loading status

C Only a boolean true/false

D Only user ID

useSession returns an object with session data and a loading state to help manage UI updates.

How can you protect a page that needs a logged-in user in Next.js client-side?

A Disable JavaScript

B Use localStorage to store user data

C Use server-side rendering only

D Check session with useSession and redirect if no session

Checking session client-side and redirecting unauthorized users is a common protection method.

What happens if session data changes on the server while the user is on the client?

A useSession hook updates session data automatically

B Client session stays stale forever

C Page reloads automatically

D User is logged out immediately

The useSession hook listens for changes and updates the client session state accordingly.

Explain how you would access and use session data on the client side in a Next.js app.

Think about React hooks and how session info flows to components.

Describe the security considerations when accessing session data on the client side.

Focus on what can happen if session data is exposed in the browser.

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