Build a React Admin Dashboard with Supabase Integration – Full Tutorial

With the fast pace of development in the current age, it is essential to create a strong React admin dashboard with speed and efficiency. This tutorial will lead you through building a robust React admin dashboard by merging Supabase’s powerful backend capabilities with the flexibility of a react admin dashboard template.

Supabase provides several easy-to-use features like user authentication, database management, and storage. At the same time, React Admin offers an adjustable and customizable admin interface for modern web applications.

Looking for a modern UI built without the React Admin library?

Explore the react admin dashboard template built with React JS and Shadcn UI Pills of Zen offers a clean, flexible design to kickstart your admin panel.

Key Features of Your React Admin Panel Example

• Authentication with Supabase Auth using React admin
• Data management with Supabase Database in a React admin dashboard
• Image upload and storage with Supabase Storage
• User following the system
• Post management system
• Modern UI with Material-UI as part of your React admin panel example

What Is Supabase? A Backend-as-a-Service for React Apps

Supabase is an open-source backend-as-a-service for React apps. It provides a complete backend solution that includes a PostgreSQL database, user authentication, file storage, and real-time functionality. It also serves as an open-source alternative to Firebase.

In this project, Supabase handles all backend tasks like authenticating users, storing posts and images, managing user relationships, and sending real-time updates. This makes it perfect for developing a secure Supabase admin panel integrated with a React frontend.

What Is React Admin and Why It’s Ideal for Admin Dashboards?

React Admin is a powerful framework used for developing admin dashboards and panels for React applications. It offers pre-existing hooks and components for standard operations like data views, form handling, and user authentication.

In our case, React Admin allows us to build a complete React CRUD admin panel efficiently. With its reusable UI components, we’ll create and manage posts, update profiles, and upload media. It also assists us in maintaining our user experience consistent and professional.

Prerequisites for Building Your React Admin Dashboard Tutorial

Before diving into the implementation, ensure you have the following:

• Node.js (version 14 or higher)
• npm or yarn package manager
• A Supabase account (sign up at https://supabase.com)
• Basic understanding of React and TypeScript
• A code editor (VS Code recommended)

You’ll also benefit from basic familiarity with Supabase integration with React and how to build a React admin dashboard tutorial using real-time backend services.

Set Up of Your Supabase Project for React Integration

Step 1: Set Up Your Supabase Project

• Visit https://supabase.com and click “Start your project.”
• Create a new account
• Click the “New Project” button
• Fill in the project details

This project setup showcases how Supabase can serve as a backend-as-a-service for react apps, handling everything from user authentication to real-time data updates efficiently.

Step 2: Configure Project Settings

• Wait for the project to be created (usually takes 1-2 minutes)
• Once ready, you’ll be redirected to the project dashboard
• Save your project credentials:

– Project URL (found in Project Settings > API)

– Project API Key (anon/public key)

Step 3: Create Tables (Database)

We’ll build a small but functional backend schema for our React admin dashboard:

• Go to your Supabase project dashboard
• Click on “SQL Editor” in the left sidebar
• Click “New Query.”
• Paste the following code
• To create a posts table

create table posts (
  id uuid primary key default gen_random_uuid(),
  title text,
  content text,
  user_id uuid references auth.users(id) on delete cascade,
  created_at timestamp default now(),
  image_url text
);

• To create the user_followers table

• create table user_followers (
    id uuid primary key default gen_random_uuid(),
    user_id uuid references auth.users(id) on delete cascade,
    following_id uuid references auth.users(id) on delete cascade,
    created_at timestamp default now()
  );
  create unique index unique_follow on user_followers(user_id, following_id);

  • To create a profiles table,

  create table public.profiles (
   id uuid primary key references auth.users(id) on delete cascade,
   email text, 
   created_at timestamp default now()
  );
  create function public.handle_new_user()
  returns trigger as $$
  begin
    insert into public.profiles (id, email)
    values (new.id, new.email);
    return new;
  end;
  $$ language plpgsql security definer;
  create trigger on_auth_user_created
  after insert on auth.users
  for each row execute procedure public.handle_new_user();

  5. Click "Run" to execute the query.

  Step 4: Enable Required Services

  1. Create authentication users by following the steps below:

  • Click on "Authentication" in the left sidebar
  • Click on "Users" under the "MANAGE" menu.
  • Click the "Add user" dropdown button on the top right and select the “Create new user” option
  • Fill in the required fields (such as Email, Password, etc.) in the dialog that appears and click on the “Create user” button
  • Repeat the same process for creating multiple users.

  2. Create a storage bucket by following the steps below:

  • Click on "Storage" in the left sidebar
  • Click the "New bucket" button at the top left.
  • In the dialog that appears, enter “uploads” as the bucket name.
  • Click "Save" to finish.

  This will support file uploads in your React forms with Supabase data.

  Step 5: Secure the Table by RLS

  • Set Row-Level Security (RLS) rules in Supabase to protect data by enabling RLS for posts and user_followers tables and setting policies.

  Step 1: Enable RLS for the posts Table

  • Go to the Table Editor in your Supabase project.
  • Select the posts table
  • Click the “RLS Disabled” button to enable Row-Level Security. This will activate RLS on the table.

  Step 2: Add Your First Policy – Allow Users to Insert Their Own Posts

  • Once RLS is enabled, click the “Add RLS Policy” button.
  • You’ll be taken to a page that lists all RLS policies for the posts table. Since no policies exist yet, the list will be empty.
  • Click Create Policy.
  • A side panel will appear where you can define your policy.
  • Select the INSERT operation and choose the “Enable insert for users based on user_id” template.
  • You can customize the policy if needed or stick with the default.
  • Click “Save Policy”.
  • Follow the above Step 1 and Step 2 for enabling RLS and adding an insert policy for the user_followers table.
    
  • Follow the above Step 1 for enabling RLS for the profiles table.
  • Add a policy in the user_followers table - Enable delete for users based on user_id. This policy will allow users to delete or unfollow users
    • Click “Add RLS Policy” again
    • Select the DELETE operation
    • Choose the “Enable delete for users based on user_id” template.
    • Click “Save Policy.”
  • Add a policy in the profiles table - Enable read access for all users with the Authenticated role.
    • Click “Add RLS Policy” again
    • Select the SELECT operation
    • Choose the “Enable read access for all users with Authenticated role” template.
    • Click “Save Policy.”
      
  • Add a second policy in the user_followers table – Enable users to view their data only
    • Click “Add RLS Policy” again.
    • Choose the “SELECT” operation.
    • Pick the “Enable users to view their own data only” template.
    • Click “Save Policy.”
      
  • Now, add a second policy in the posts table - Allow users to read posts created by themselves or users they follow
    • Go to the SQL Editor
    • Copy and paste the following code in the SQL editor to create an RLS policy for the posts table.

  create policy "Allow reading own and followed users' posts"
  on posts for select
  using (
    auth.uid() = user_id OR
    exists (
      select 1 from user_followers
      where user_id = auth.uid()
      and following_id = posts.user_id
    )
  );

  • Click on the “Run” button
  • Your new policy will be created for the posts table. Now go to the policies page to verify all the policies.
    
  • Add the last policy to the uploads storage bucket - Only authenticated users can fetch and upload into the  storage bucket
    
    • Go to Storage
    • Click on “Policies” under configuration
    • Click on “New Policy” for the uploads storage bucket
    • Click  on “Get started quickly” to create a policy from a template
    • Now select “Give users access to a folder only to authenticated users” template
    • Click on the “Use this template” button
    • Click on the “Select” and “Insert” checkboxes in Allowed Operations
    • Click on the “Review” button
    • Click on the “Save Policy” Button
    • Similarly, add policies for “Other policies under storage.objects” and “Policies under storage.buckets” options as per the image below.
      
      

For More Information Visit our blog : Build a React Admin Dashboard with Supabase Integration – Full Tutorial