Why authentication matters in NextJS - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why is authentication important in web applications?

Which of the following best explains why authentication is crucial in web applications?

A It ensures only authorized users can access protected resources, preventing unauthorized data access.

B It speeds up the loading time of web pages by caching user data.

C It automatically fixes bugs in the application code during runtime.

D It allows users to browse the website anonymously without any restrictions.

💡 Hint

Think about what happens if anyone can access private data without verifying who they are.

Authentication confirms the identity of users, ensuring that only those with permission can access sensitive parts of the app. This protects user data and application integrity.

❓ component_behavior

intermediate

What happens when a Next.js page requires authentication?

Consider a Next.js page that checks if a user is logged in before showing content. What is the expected behavior if the user is not authenticated?

A The page loads normally and shows all content regardless of authentication.

B The page crashes with a server error due to missing user data.

C The page redirects the user to a login page to authenticate before accessing content.

D The page shows a blank screen without any message or redirect.

💡 Hint

Think about how apps protect private pages from users who haven't signed in yet.

Protected pages usually redirect unauthenticated users to a login page to ensure only authorized users can see the content.

❓ state_output

advanced

What is the output of this Next.js authentication check code?

Given this simplified Next.js component code, what will be rendered if user is null?

NextJS

import { useState, useEffect } from 'react';

export default function Dashboard() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // Simulate fetching user data
    setTimeout(() => setUser(null), 1000);
  }, []);

  if (!user) {
    return <p>Please log in to view your dashboard.</p>;
  }

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

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

B <p>Please log in to view your dashboard.</p>

C Nothing is rendered because of an error.

D <p>Loading user data...</p>

💡 Hint

Check what the component returns when user is null.

The component returns the message asking the user to log in because user is null. The welcome message only shows if user has a value.

📝 Syntax

advanced

Which Next.js code snippet correctly protects a page with server-side authentication?

Choose the code that correctly uses getServerSideProps to redirect unauthenticated users to the login page.

A

export async function getServerSideProps(context) {
  const user = await getUserFromSession(context.req);
  if (!user) {
    return { props: { redirect: '/login' } };
  }
  return { props: { user } };
}

B

export async function getServerSideProps() {
  const user = await getUserFromSession();
  if (user) {
    return { redirect: { destination: '/login', permanent: false } };
  }
  return { props: { user } };
}

C

export async function getServerSideProps(context) {
  const user = await getUserFromSession(context.req);
  if (!user) {
    redirect('/login');
  }
  return { props: { user } };
}

D

export async function getServerSideProps(context) {
  const user = await getUserFromSession(context.req);
  if (!user) {
    return { redirect: { destination: '/login', permanent: false } };
  }
  return { props: { user } };
}

💡 Hint

Remember that getServerSideProps must return a redirect object to redirect users.

Option D correctly returns a redirect object when the user is not authenticated. Other options either misuse redirect or return incorrect props.

🔧 Debug

expert

Why does this Next.js authentication code cause a runtime error?

Examine the code below. Why does it cause a runtime error when the page loads?

NextJS

import { useState, useEffect } from 'react';

export default function Profile() {
  const [user, setUser] = useState();

  useEffect(() => {
    fetch('/api/user')
      .then(res => res.json())
      .then(data => setUser(data.user));
  }, []);

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

A Because <code>user</code> is initially undefined, accessing <code>user.name</code> causes a TypeError.

B Because the fetch call is missing an await keyword causing a syntax error.

C Because the API endpoint '/api/user' does not exist, causing a 404 error.

D Because <code>useEffect</code> is called outside the component function.

💡 Hint

Think about what happens before the fetch finishes and user is set.

The component tries to read user.name before user has a value, causing a TypeError because you cannot read properties of undefined.