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

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

2. Update the ./supabase/config file

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

3. Restart the supabase instance

make supabase-stop supabase-start db-setup

4. 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:

• 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(
    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>
);