How to protect admin routes with Supabase?

 

Step 1: Set Up Your Supabase Project

 

• Go to the Supabase website and log in to your account.
• Create a new project by selecting your preferred organization and giving the project a name. Select the region and click on "Create New Project."
• Once the project is created, you will be directed to the project dashboard. Take note of the API URL and API Key available in the project's API settings as you will need them for your backend code.

 

Step 2: Define Your User Roles

 

• Navigate to the "Authentication" section via the side navigation menu.
• Go to "Policies" under the "Auth" menu.
• Create a new role called 'admin' in the Auth policies. Optionally, create other roles as needed.

 

Step 3: Create a Custom Table Policy in Supabase for Admin Routes

 

• Navigate to the "Database" section, then select "Tables."
• Select the table for which you want to protect the admin routes.
• Click on "Policies" at the top and click on the "New Policy" button.
• Define a new policy for admin access. Use the SQL below as a template for your admin policy:

create policy "Allow admin access only"
  on your_table_name
  for all
  using (
    auth.role() = 'admin'
  );

 

Step 4: Connect Supabase with Your Application

 

• Install the Supabase client in your application. If you are using Node.js, you can install it via npm:

npm install @supabase/supabase-js

• Import and initialize the Supabase client in your app configuration. Replace SUPABASE_URL and SUPABASE_ANON_KEY with your project's credentials:

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

const supabaseUrl = 'https://SUPABASE\_URL';
const supabaseAnonKey = 'SUPABASE_ANON_KEY';

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

 

Step 5: Implement Admin Route Protection in Your Application

 

• In your application, define middleware or a guard to check if the user has the admin role before allowing access to admin routes.

• Example for a Node.js Express middleware:

const adminRouteProtection = async (req, res, next) => {
  const { user, error } = await supabase.auth.api.getUser(req.headers['access-token']);
  
  if (error || !user || user.role !== 'admin') {
    return res.status(403).json({ error: 'Access denied. Admins only.' });
  }
  
  next();
};

app.use('/admin', adminRouteProtection);

 

Step 6: Test Your Setup

 

• Run your application and attempt to access the protected admin routes.
• Ensure the middleware correctly restricts access based on the user role.
• Adjust and troubleshoot as necessary to ensure the role-based access control is functioning as expected.