Skip to content

Supabase adapter for react-admin, the frontend framework for building admin applications on top of REST/GraphQL services.

License

Notifications You must be signed in to change notification settings

marmelab/ra-supabase

Repository files navigation

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).

VideoDocumentationSource Code

Video tutorial about react-admin with supabase

Projects

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

Log in with the following credentials:

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

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:

  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
[auth.external.github]
enabled = true
client_id = "YOUR_GITHUB_CLIENT_ID"
secret = "YOUR_GITHUB_CLIENT_SECRET"
  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.

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

About

Supabase adapter for react-admin, the frontend framework for building admin applications on top of REST/GraphQL services.

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published