Protected routes in frontend in Supabase

Introduction

Protected routes keep parts of your website safe. Only logged-in users can see them.

When you want to hide user profile pages from visitors who are not logged in.

When you need to secure payment or checkout pages so only authorized users can access.

When you want to show admin panels only to users with special permissions.

When you want to prevent unauthorized users from seeing sensitive data.

When you want to redirect users to login if they try to access private pages.

Syntax

Supabase

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

function ProtectedRoute({ children }) {
  const router = useRouter();

  useEffect(() => {
    supabase.auth.getSession().then(({ data: { session } }) => {
      if (!session) {
        router.push('/login');
      }
    });
  }, [router]);

  return children;
}

This example uses React with Next.js and Supabase for authentication.

It checks if a user session exists. If not, it redirects to the login page.

Examples

Basic protected route component that redirects unauthenticated users.

Supabase

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

function ProtectedRoute({ children }) {
  const router = useRouter();

  useEffect(() => {
    supabase.auth.getSession().then(({ data: { session } }) => {
      if (!session) {
        router.push('/login');
      }
    });
  }, [router]);

  return children;
}

This version shows a loading message while checking the session.

Supabase

import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import { supabase } from './supabaseClient';

function ProtectedRoute({ children }) {
  const router = useRouter();
  const [loading, setLoading] = useState(true);
  const [session, setSession] = useState(null);

  useEffect(() => {
    supabase.auth.getSession().then(({ data: { session: currentSession } }) => {
      setSession(currentSession);
      setLoading(false);
      if (!currentSession) {
        router.push('/login');
      }
    });
  }, [router]);

  if (loading) return <p>Loading...</p>;
  return session ? children : null;
}

Sample Program

This complete example shows a protected route component that checks if the user is logged in using Supabase. If not logged in, it redirects to the login page. While checking, it shows a loading message. You wrap your private page content inside this component.

Supabase

import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import { supabase } from './supabaseClient';

export default function ProtectedRoute({ children }) {
  const router = useRouter();
  const [loading, setLoading] = useState(true);
  const [session, setSession] = useState(null);

  useEffect(() => {
    supabase.auth.getSession().then(({ data: { session: currentSession } }) => {
      setSession(currentSession);
      setLoading(false);
      if (!currentSession) {
        router.push('/login');
      }
    });
  }, [router]);

  if (loading) return <p>Loading...</p>;
  return session ? children : null;
}

// Usage example in a page component
// import ProtectedRoute from './ProtectedRoute';
//
// export default function Dashboard() {
//   return (
//     <ProtectedRoute>
//       <h1>Welcome to your dashboard!</h1>
//     </ProtectedRoute>
//   );
// }

Important Notes

Always check user session on the client side to protect routes.

Redirecting unauthenticated users improves security and user experience.

Use loading states to avoid showing protected content before session check completes.

Summary

Protected routes keep parts of your app safe by allowing only logged-in users.

Use Supabase session to check if a user is logged in.

Redirect users to login if they try to access protected pages without permission.