Why authentication matters in NextJS - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

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

NextJS

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

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

AuseSession

BuseAuth

CgetSession

DsignIn

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'useAuth' which is not a Next.js hook.

Confusing 'signIn' with a hook.

The useSession hook is used to access authentication status in Next.js apps.

2fill in blank

medium

Complete the code to check if a user is authenticated.

NextJS

const { data: session } = [1]();
if (session) {
  // user is authenticated
}

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

AuseSession

BgetSession

CsignIn

DuseAuth

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'getSession' which is async and not a hook.

Using 'signIn' which is a function to start login.

useSession() returns session data and status for authentication.

3fill in blank

hard

Fix the error in the code to redirect unauthenticated users.

NextJS

if (!session) {
  [1]('/api/auth/signin');
}

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

Anavigate

Bpush

CuseRouter

Dredirect

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'navigate' which is React Router specific.

Using 'push' without router context.

In Next.js server components, redirect() is used to send users to login.

4fill in blank

hard

Fill both blanks to create a protected page that redirects unauthenticated users.

NextJS

"use client";
import { [1] } from 'next-auth/react';
import { [2] } from 'next/navigation';

export default function Page() {
  const { data: session } = [1]();
  if (!session) [2]('/api/auth/signin');
  return <main>Welcome, authenticated user!</main>;
}

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

AuseSession

Bredirect

CuseRouter

DsignIn

Attempts:

3 left

💡 Hint

Common Mistakes

Importing 'useRouter' instead of 'redirect'.

Using 'signIn' as a redirect function.

useSession gets the session data, and redirect sends unauthenticated users to sign in.

5fill in blank

hard

Fill all three blanks to implement a client component that shows login status and a sign out button.

NextJS

"use client";
import { [1], [2], [3] } from 'next-auth/react';

export default function AuthStatus() {
  const { data: session } = [1]();
  if (!session) return <button onClick={() => [3]()}>Sign In</button>;
  return (
    <>
      <p>Signed in as {session.user.email}</p>
      <button onClick={() => [2]()}>Sign Out</button>
    </>
  );
}

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

AuseSession

BsignIn

CsignOut

DgetSession

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing signIn and signOut functions.

Using getSession in client component.

useSession accesses session data, signOut logs out, and signIn starts login.

Practice

1. Why is authentication important in a Next.js application?

easy

A. It automatically fixes bugs in the code.

B. It speeds up the loading time of pages.

C. It confirms the identity of users and protects private data.

D. It changes the app's color scheme based on user preference.

Solution

1. Step 1: Understand the purpose of authentication

   Authentication is used to confirm who a user is when they access an app.

2. Step 2: Recognize the importance of protecting data

   It helps protect private or sensitive data by allowing only authorized users to see it.

3. Final Answer:

   It confirms the identity of users and protects private data. -> Option C

4. Quick Check:

   Authentication = Confirm identity and protect data [OK]

Hint: Authentication means confirming who the user is [OK]

Common Mistakes:

• Confusing authentication with app speed
• Thinking authentication changes UI colors
• Believing authentication fixes code bugs

2. Which of the following is the correct way to import the NextAuth library in a Next.js app?

easy

A. require('next-auth');

B. include 'next-auth';

C. import nextAuth from 'next-auth';

D. import NextAuth from 'next-auth';

Solution

1. Step 1: Identify the ES module import syntax

   Next.js uses ES module syntax with import to load libraries.

2. Step 2: Match the correct import statement

   The correct import is import NextAuth from 'next-auth'; with exact casing and syntax.

3. Final Answer:

   import NextAuth from 'next-auth'; -> Option D

4. Quick Check:

   Use ES module import syntax for NextAuth [OK]

Hint: Use ES module import, not require or include [OK]

Common Mistakes:

• Using CommonJS require instead of import
• Wrong casing in import statement
• Using include which is not valid in JS

3. Given this Next.js code snippet using next-auth, what will be rendered if the user is not signed in?

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

export default function Profile() {
  const { data: session } = useSession();
  if (!session) {
    return <p>Please sign in to view your profile.</p>;
  }
  return <p>Welcome, {session.user.name}!</p>;
}

medium

A. Please sign in to view your profile.

B. Loading user data...

C. Welcome, [user's name]!

D. Error: session not found

Solution

1. Step 1: Check the session state when user is not signed in

   If the user is not signed in, session will be null or undefined.

2. Step 2: Follow the conditional rendering logic

   The code returns the message <p>Please sign in to view your profile.</p> when !session is true.

3. Final Answer:

   Please sign in to view your profile. -> Option A

4. Quick Check:

   Not signed in = show sign-in prompt [OK]

Hint: If no session, show sign-in message [OK]

Common Mistakes:

• Assuming user name shows without sign-in
• Expecting loading text instead of sign-in prompt
• Thinking an error will be thrown

4. What is wrong with this Next.js authentication check?

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

export default function Dashboard() {
  const session = useSession();
  if (!session) {
    return <p>Access denied.</p>;
  }
  return <p>Dashboard content</p>;
}

medium

A. The session variable should be declared with var.

B. useSession must be destructured to get data property.

C. The component should be a class component.

D. The return statements should be inside useEffect.

Solution

1. Step 1: Check how useSession is used

   useSession returns an object with a data property containing the session info.

2. Step 2: Identify the correct destructuring

   The code should use const { data: session } = useSession(); to get the session data.

3. Final Answer:

   useSession must be destructured to get data property. -> Option B

4. Quick Check:

   Destructure useSession to access session data [OK]

Hint: Destructure useSession to get session data [OK]

Common Mistakes:

• Using useSession without destructuring
• Trying to put return inside useEffect
• Thinking class components are required
• Using var instead of const or let

5. You want to protect a Next.js page so only signed-in users can access it. Which approach correctly enforces this using next-auth?

hard

A. Use getServerSideProps to check session and redirect if not signed in.

B. Render the page normally and hide content with CSS if user is not signed in.

C. Use a client-side setTimeout to check session after page loads.

D. Allow all users to access and show an alert if not signed in.

Solution

1. Step 1: Understand server-side protection

   Using getServerSideProps allows checking the session before rendering the page.

2. Step 2: Redirect unauthorized users

   If no session is found, redirecting to sign-in page prevents unauthorized access securely.

3. Final Answer:

   Use getServerSideProps to check session and redirect if not signed in. -> Option A

4. Quick Check:

   Server-side session check = secure page protection [OK]

Hint: Check session server-side to protect pages [OK]

Common Mistakes:

• Hiding content with CSS does not secure data
• Using client-side delay risks exposing content
• Allowing access and just showing alerts is insecure