Protected routes in frontend in Supabase - Mini Project: Build & Apply

Protected Routes in Frontend with Supabase

📖 Scenario: You are building a simple web app that shows some pages only to logged-in users. You will use Supabase for user authentication. Your app has a home page and a dashboard page. The dashboard page should be protected so only logged-in users can see it.

🎯 Goal: Build a frontend app with Supabase authentication that protects the dashboard route. If a user is not logged in, they should be redirected to the home page.

📋 What You'll Learn

Create a Supabase client instance

Check user authentication status

Create a protected route component

Redirect unauthenticated users to home page

💡 Why This Matters

🌍 Real World

Many web apps need to restrict access to certain pages based on user login status. This project shows how to do that simply with Supabase and React.

💼 Career

Understanding protected routes and authentication is essential for frontend developers working with cloud backends and user management.

1

Setup Supabase Client

Create a constant called supabase by calling createClient with the exact arguments 'https://xyzcompany.supabase.co' and 'public-anonymous-key'.

Supabase

# Create the Supabase client instance
# Your code here

Need a hint?

Use createClient from Supabase with the given URL and key.

2

Check User Authentication Status

Create an async function called checkUser that calls supabase.auth.getUser() and stores the result in a constant called user.

Supabase

import { createClient } from '@supabase/supabase-js';

const supabase = createClient('https://xyzcompany.supabase.co', 'public-anonymous-key');

// Create async function checkUser
# Your code here

Need a hint?

Use await supabase.auth.getUser() and extract user from the response.

3

Create Protected Route Component

Create a React functional component called ProtectedRoute that calls checkUser() inside a useEffect. If user is null, redirect to '/' using window.location.href.

Supabase

import { createClient } from '@supabase/supabase-js';
import React, { useEffect, useState } from 'react';

const supabase = createClient('https://xyzcompany.supabase.co', 'public-anonymous-key');

async function checkUser() {
    const { data: { user } } = await supabase.auth.getUser();
    return user;
}

// Create ProtectedRoute component
# Your code here

Need a hint?

Use useState to hold user and useEffect to check user on mount. Redirect if no user.

4

Use ProtectedRoute to Wrap Dashboard

Wrap the <Dashboard /> component inside <ProtectedRoute> tags in the main app component.

Supabase

import { createClient } from '@supabase/supabase-js';
import React, { useEffect, useState } from 'react';

const supabase = createClient('https://xyzcompany.supabase.co', 'public-anonymous-key');

async function checkUser() {
    const { data: { user } } = await supabase.auth.getUser();
    return user;
}

function ProtectedRoute({ children }) {
    const [user, setUser] = useState(null);

    useEffect(() => {
        checkUser().then(currentUser => {
            if (!currentUser) {
                window.location.href = '/';
            } else {
                setUser(currentUser);
            }
        });
    }, []);

    if (!user) {
        return null;
    }

    return children;
}

function Dashboard() {
    return Dashboard Page;
}

function App() {
    return (
        
            Home Page
            {/* Wrap Dashboard with ProtectedRoute here */}
            # Your code here
        
    );
}

Need a hint?

Use <ProtectedRoute><Dashboard /></ProtectedRoute> inside the App component.