Protected routes in frontend in Supabase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to check if a user is logged in using Supabase client.

Supabase

const user = supabase.auth.[1]();

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

AgetSession

Buser

Csession

DgetUser

Attempts:

3 left

💡 Hint

Common Mistakes

Using a method that does not exist like getUser.

Confusing session with user directly.

The supabase.auth.session() method returns the current session, which includes the user if logged in.

2fill in blank

medium

Complete the code to redirect unauthenticated users to the login page.

Supabase

if (!user) { window.[1] = '/login'; }

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

Ahref

Blocation

Cassign

Dreplace

Attempts:

3 left

💡 Hint

Common Mistakes

Using window.href which is undefined.

Using window.assign which is a function, not a property.

Setting window.location changes the current page URL, redirecting the user.

3fill in blank

hard

Fix the error in the code to protect a route by checking user session.

Supabase

const session = supabase.auth.[1](); if (!session) { redirect('/login'); }

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

Asession

BgetUser

CgetSession

Duser

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent methods like getUser or getSession.

Checking user instead of session.

The correct method is supabase.auth.session() to get the current session.

4fill in blank

hard

Fill both blanks to create a React hook that redirects if no user is logged in.

Supabase

import { useEffect } from 'react';
import { useRouter } from 'next/router';

function useProtectedRoute() {
  const router = useRouter();
  const session = supabase.auth.[1]();

  useEffect(() => {
    if (!session) {
      router.[2]('/login');
    }
  }, [session]);
}

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

Asession

Buser

Cpush

Dreplace

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'user' instead of 'session' to get user info.

Using router.replace instead of router.push for navigation.

supabase.auth.session() gets the current session including user info. router.push('/login') redirects to login page.

5fill in blank

hard

Fill all three blanks to create a Next.js API route that checks authentication before responding.

Supabase

export default async function handler(req, res) {
  const { data: { user } } = await supabase.auth.api.[1](req.headers.cookie);
  if (!user) {
    return res.status([2]).json({ message: '[3]' });
  }
  res.status(200).json({ message: 'Welcome!' });
}

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

AgetUserByCookie

B401

CUnauthorized

DgetUser

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong method names like getUser.

Using incorrect status codes like 403.

Using unclear or missing error messages.

supabase.auth.api.getUserByCookie() extracts user from cookies. Status code 401 means unauthorized access. The message 'Unauthorized' informs the client.

Practice

1. What is the main purpose of protected routes in a frontend application using Supabase?

easy

A. To allow only logged-in users to access certain pages

B. To speed up page loading times

C. To store user data permanently

D. To change the app's theme automatically

Solution

1. Step 1: Understand what protected routes do

   Protected routes restrict access to certain pages so only authorized users can see them.

2. Step 2: Connect with Supabase session usage

   Supabase sessions help check if a user is logged in, enabling route protection.

3. Final Answer:

   To allow only logged-in users to access certain pages -> Option A

4. Quick Check:

   Protected routes = restrict access to logged-in users [OK]

Hint: Protected routes block access unless user is logged in [OK]

Common Mistakes:

• Thinking protected routes speed up loading
• Confusing route protection with data storage
• Assuming protected routes change app appearance

2. Which of the following is the correct way to check if a user is logged in using Supabase in frontend code?

easy

A. const user = supabase.auth.getUser()

B. const user = supabase.session()

C. const user = supabase.auth.session()

D. const user = supabase.auth.getSession()

Solution

1. Step 1: Identify Supabase method for session retrieval

   Supabase's current method to get session info is auth.getSession(), which returns user session data.

2. Step 2: Compare options with official API

   Options A, B, and C are outdated or incorrect method names; only getSession() is valid.

3. Final Answer:

   const user = supabase.auth.getSession() -> Option D

4. Quick Check:

   Use auth.getSession() to check login [OK]

Hint: Use supabase.auth.getSession() to get current user session [OK]

Common Mistakes:

• Using deprecated methods like auth.session()
• Calling supabase.session() which does not exist
• Confusing getUser() with getSession()

3. Given this React snippet using Supabase, what will happen if the user is not logged in?

const session = supabase.auth.getSession();
if (!session) {
  navigate('/login');
} else {
  showDashboard();
}

medium

A. The dashboard is shown regardless

B. An error is thrown because getSession() is async

C. The user is redirected to the login page

D. Nothing happens; the page stays the same

Solution

1. Step 1: Understand getSession() behavior

   supabase.auth.getSession() is an asynchronous function returning a Promise, so calling it without await assigns a Promise object to session, not session data.

2. Step 2: Analyze the code flow

   A Promise object is truthy, so if (!session) evaluates to false, and showDashboard() executes regardless of login status.

3. Final Answer:

   The dashboard is shown regardless -> Option A

4. Quick Check:

   Async getSession() without await returns truthy Promise [OK]

Hint: Remember to await async getSession() calls [OK]

Common Mistakes:

• Treating async getSession() as synchronous
• Assuming session is null if user not logged in
• Ignoring Promise returned by getSession()

4. You wrote this code to protect a route but it redirects even logged-in users to login:

const { data: session } = supabase.auth.getSession();
if (!session) {
  window.location.href = '/login';
}

What is the main issue?

medium

A. session is always truthy even if user is logged out

B. window.location.href cannot redirect pages

C. getSession() is asynchronous and must be awaited

D. You must use supabase.auth.getUser() instead

Solution

1. Step 1: Check getSession() usage

   supabase.auth.getSession() returns a Promise and must be awaited or handled asynchronously to get session data.

2. Step 2: Understand destructuring without await

   Destructuring data from a Promise without await results in undefined or incorrect values, so session is not properly checked.

3. Final Answer:

   getSession() is asynchronous and must be awaited -> Option C

4. Quick Check:

   Always await async getSession() calls [OK]

Hint: Always await async Supabase calls to get real data [OK]

Common Mistakes:

• Not awaiting async functions
• Thinking window.location.href can't redirect
• Using getUser() instead of getSession() incorrectly

5. You want to protect a React page so only logged-in users can see it. Which approach correctly implements this using Supabase's session and React hooks?

function ProtectedPage() {
  const [session, setSession] = React.useState(null);

  React.useEffect(() => {
    const getSession = async () => {
      const { data } = await supabase.auth.getSession();
      setSession(data.session);
      if (!data.session) {
        navigate('/login');
      }
    };
    getSession();
  }, []);

  if (!session) return <p>Loading...</p>;
  return <div>Welcome to protected content!</div>;
}

hard

A. The navigate call should be outside the async function

B. This code correctly protects the page by redirecting unauthenticated users

C. The code should call supabase.auth.getUser() instead of getSession()

D. The session state should be initialized with supabase.auth.getSession() synchronously

Solution

1. Step 1: Analyze async session retrieval in useEffect

   The code correctly uses an async function inside useEffect to get the session and update state.

2. Step 2: Check redirect logic for unauthenticated users

   If no session exists, the code calls navigate('/login') to redirect users, protecting the page.

3. Step 3: Confirm loading state handling

   While session is null, it shows a loading message, preventing content flash before redirect.

4. Final Answer:

   This code correctly protects the page by redirecting unauthenticated users -> Option B

5. Quick Check:

   Async session check + redirect = protected route [OK]

Hint: Use async useEffect with redirect on no session [OK]

Common Mistakes:

• Using getUser() instead of getSession() for session check
• Calling navigate outside async context incorrectly
• Initializing session state synchronously causing errors