Why authentication matters in NextJS - See It in Action

Why authentication matters

📖 Scenario: You are building a simple Next.js app that shows a secret message only to logged-in users. This helps protect private information from strangers.

🎯 Goal: Create a Next.js component that checks if a user is logged in and shows a secret message only when authenticated.

📋 What You'll Learn

Create a variable to represent user login status

Add a configuration variable for the secret message

Use conditional rendering to show the secret message only if the user is logged in

Complete the component with a return statement that renders the message or a login prompt

💡 Why This Matters

🌍 Real World

Authentication is essential to protect private data in web apps, like user profiles, messages, or payment info.

💼 Career

Understanding authentication basics helps you build secure web applications and work with user sessions in real projects.

1

DATA SETUP: Create a variable for user login status

Create a constant called isLoggedIn and set it to false to represent that the user is not logged in yet.

NextJS

// Your code here

Need a hint?

Use const to create a variable named isLoggedIn and set it to false.

2

CONFIGURATION: Add a secret message variable

Create a constant called secretMessage and set it to the string 'The sky is blue.' which will be shown only to logged-in users.

NextJS

const isLoggedIn = false;
// Your code here

Need a hint?

Use const to create secretMessage with the exact text.

3

CORE LOGIC: Use conditional rendering to show the secret message

Write a function component called SecretInfo that returns <p>Please log in to see the secret.</p> if isLoggedIn is false, otherwise returns <p>{secretMessage}</p>.

NextJS

const isLoggedIn = false;
const secretMessage = 'The sky is blue.';

// Your code here

Need a hint?

Use a function named SecretInfo with an if statement checking !isLoggedIn to return the login prompt, else return the secret message.

4

COMPLETION: Export the component as default

Add export default SecretInfo; at the end to make the component usable in your Next.js app.

NextJS

const isLoggedIn = false;
const secretMessage = 'The sky is blue.';

function SecretInfo() {
  if (!isLoggedIn) {
    return Please log in to see the secret.;
  } else {
    return {secretMessage};
  }
}

// Your code here

Need a hint?

Use export default SecretInfo; to export the component.