Supabase + React-Admin: Supercharge Your Data Dashboards

This package provides a dataProvider, an authProvider, hooks and components to integrate Supabase with react-admin when using its default UI (ra-ui-materialui).

DocumentationSource Code


  • ra-supabase: Umbrella project that re-export the others.
  • ra-supabase-core: Provide the dataProvider, authProvider and some hooks
  • ra-supabase-ui-materialui: Provide the LoginPage and Social authentication buttons
  • ra-supabase-language-english: Provide the english translations
  • ra-supabase-language-french: Provide the french translations


  • Add support for magic link authentication
  • Add support for uploading files to Supabase storage

Local Development

This project uses a local instance of Supabase. To set up your environment, run the following command:

make install supabase-start db-setup

This will:

  • install dependencies
  • initialize an .env file with environment variables to target the supabase instance
  • start the supabase instance
  • apply the database migration
  • seed the database with data

You can then start the application in development mode with:

make run

Testing Invitations And Password Reset

The current version of supabase CLI does not allow to customize the emails sent for invitation or password reset.

When you invite a new user through the Authentication dashboard, you can see the email sent in Inbucket. Instead of clicking the link, copy it and change the redirect_to parameter from http://localhost:8000 to http://localhost:8000/auth-callback.

Apply the same process for password reset emails.

Testing Third Party Authentication Providers

To test OAuth providers, you must configure the Supabase local instance. This is done by editing the ./supabase/config.toml file as described in the Supabase CLi documentation.

For instance, to add support for Github authentication, you have to:

  1. Create a GitHub Oauth App

Go to the GitHub Developer Settings page:

  • Click on your profile picture at the top right
  • Click Settings near the bottom of the menu
  • In the left sidebar, click Developer settings (near the bottom)
  • In the left sidebar, click OAuth Apps
  • Click Register a new application. If you've created an app before, click New OAuth App here.
  • In Application name, type the name of your app.
  • In Homepage URL, type the full URL to your app's website: http://localhost:8000
  • In Authorization callback URL, type the callback URL of your app: http://localhost:54321/auth/v1/callback
  • Click Save Changes at the bottom right.
  • Click Register Application
  • Copy and save your Client ID.
  • Click Generate a new client secret.
  • Copy and save your Client secret
  1. Update the ./supabase/config file
enabled = true
  1. Restart the supabase instance
make supabase-stop supabase-start db-setup
  1. Update the demo login page configuration:

Open the ./packages/demo/src/App.tsx file and update it.

-    loginPage={LoginPage}
+    loginPage={<LoginPage providers={['github']} />}
        palette: {
            background: {
                default: '#fafafb',

Internationalization Support

We provide two language packages:

  • ra-supabase-language-english
  • ra-supabase-language-french

And there are also community supported language packages:

  • ra-supabase-language-spanish

ra-supabase already re-export ra-supabase-language-english but you must set up the i18nProvider yourself:

// in i18nProvider.js
import { mergeTranslations } from 'ra-core';
import polyglotI18nProvider from 'ra-i18n-polyglot';
import englishMessages from 'ra-language-english';
import frenchMessages from 'ra-language-french';
import { raSupabaseEnglishMessages } from 'ra-supabase-language-english';
import { raSupabaseFrenchMessages } from 'ra-supabase-language-french';

const allEnglishMessages = mergeTranslations(
const allFrenchMessages = mergeTranslations(

export const i18nProvider = polyglotI18nProvider(
    locale => (locale === 'fr' ? allFrenchMessages : allEnglishMessages),

// in App.js
import { Admin, Resource, ListGuesser } from 'react-admin';
import { authRoutes } from 'ra-supabase';
import { dataProvider } from './dataProvider';
import { authProvider } from './authProvider';
import { i18nProvider } from './i18nProvider';

export const MyAdmin = () => (
        <Resource name="posts" list={ListGuesser} />
        <Resource name="authors" list={ListGuesser} />

Download Details:

Author: marmelab

Official Github: 

License: MIT


Supabase + React-Admin: Supercharge Your Data Dashboards
1.45 GEEK