ra-supabase

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

Projects

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

Roadmap

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

Email: janedoe@atomic.dev
Password: password

If you need debug the backend, you can access the following services:

Supabase dashboard: http://localhost:54323/
REST API: http://127.0.0.1:54321
Attachments storage: http://localhost:54323/project/default/storage/buckets/attachments
Inbucket email testing service: http://localhost:54324/

Testing Invitations And Password Reset

When you invite a new user through the Authentication dashboard, or reset a password through the password reset form, you can see the email sent in Inbucket.

Clicking the link inside the email will take you to the /set-password page where you can set or reset your password.

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:

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

Update the ./supabase/config file

[auth.external.github]
enabled = true
client_id = "YOUR_GITHUB_CLIENT_ID"
secret = "YOUR_GITHUB_CLIENT_SECRET"

Restart the supabase instance

make supabase-stop supabase-start db-setup

Update the demo login page configuration:

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

<Admin
    dataProvider={dataProvider}
    authProvider={authProvider}
    i18nProvider={i18nProvider}
    layout={Layout}
    dashboard={Dashboard}
-    loginPage={LoginPage}
+    loginPage={<LoginPage providers={['github']} />}
    queryClient={queryClient}
    theme={{
        ...defaultTheme,
        palette: {
            background: {
                default: '#fafafb',
            },
        },
    }}
>

Internationalization Support

We provide two language packages:

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(
    englishMessages,
    raSupabaseEnglishMessages
);
const allFrenchMessages = mergeTranslations(
    frenchMessages,
    raSupabaseFrenchMessages
);

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

// 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 = () => (
    <Admin
        dataProvider={dataProvider}
        authProvider={authProvider}
        i18nProvider={i18nProvider}
        customRoutes={authRoutes}
    >
        <Resource name="posts" list={ListGuesser} />
        <Resource name="authors" list={ListGuesser} />
    </Admin>
);