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.