ra-supabase-ui-materialui

This package provides components to integrate Supabase with react-admin when using its default UI (ra-ui-materialui).

Installation

yarn add ra-supabase-ui-materialui
# or
npm install ra-supabase-ui-materialui

Usage

// in supabase.js
import { createClient } from '@supabase/supabase-js';

export const supabase = createClient('YOUR_SUPABASE_URL', 'YOUR_SUPABASE_ANON_KEY');

// in dataProvider.js
import { supabaseDataProvider } from 'ra-supabase-core';
import { supabaseClient } from './supabase';

export const dataProvider = supabaseDataProvider({
    instanceUrl: 'YOUR_SUPABASE_URL',
    apiKey: 'YOUR_SUPABASE_ANON_KEY',
    supabaseClient
});

// in authProvider.js
import { supabaseAuthProvider } from 'ra-supabase-core';
import { supabase } from './supabase';

export const authProvider = supabaseAuthProvider(supabase, {
    getIdentity: async user => {
        const { data, error } = await supabase
            .from('userProfiles')
            .select('id, first_name, last_name')
            .match({ email: user.email })
            .single();

        if (!data || error) {
            throw new Error();
        }

        return {
            id: data.id,
            fullName: `${data.first_name} ${data.last_name}`,
        };
    },
});

// in App.js
import { Admin, CustomRoutes, Resource, ListGuesser } from 'react-admin';
import { LoginPage, ForgotPasswordPage, SetPasswordPage } from 'ra-supabase-ui-materialui';
import { BrowserRouter, Route } from 'react-router-dom';
import { dataProvider } from './dataProvider';
import { authProvider } from './authProvider';

export const MyAdmin = () => (
    
        
            
                }
                />
                }
                />
            
            
            
        
    
);

API

``

This component provides a layout for authentication pages very similar to the one used in the default React Admin . However, it does not check the user authentication status. It is used by both the component.

``

This is ra-supabase-ui-materialui version of the that redirects users to the admin home page if they are already logged in and displays the otherwise. You may provide your own form by passing it as the `` child.

It supports OAuth authentication. Specify the available OAuth providers using the providers prop:

import { Admin, Resource, ListGuesser } from 'react-admin';
import { LoginPage } from 'ra-supabase';
import { dataProvider } from './dataProvider';
import { authProvider } from './authProvider';

export const MyAdmin = () => (
    
        }
        >
            
            
        
    
);

You can disable email/password authentication by setting the disableEmailPassword prop:

import { Admin, Resource, ListGuesser } from 'react-admin';
import { LoginPage } from 'ra-supabase';
import { dataProvider } from './dataProvider';
import { authProvider } from './authProvider';

export const MyAdmin = () => (
    
        }
        >
            
            
        
    
);

``

This is ra-supabase-ui-materialui version of the `` that contains an email and password fields. It is exported for you to reuse in a custom login page when needed.

``

A page component to use in a custom route to allow users to reset their passwords.

// in App.js
import { Admin, CustomRoutes, Resource, ListGuesser } from 'react-admin';
import { LoginPage, ForgotPasswordPage, SetPasswordPage } from 'ra-supabase-ui-materialui';
import { dataProvider } from './dataProvider';
import { authProvider } from './authProvider';

export const MyAdmin = () => (
    
        
            
                }
                />
                }
                />
            
            
            
        
    
);

Users will be asked for an email and the component will send a reset password request to Supabase.

You should also set up the `` to allow users to actually set a new password.

``

A page component to use in a custom route to allow users to set their passwords. Can be used for users following an invitation link so that they can set their password for the first time or for password reset.

// in App.js
import { Admin, CustomRoutes, Resource, ListGuesser } from 'react-admin';
import { LoginPage, ForgotPasswordPage, SetPasswordPage } from 'ra-supabase-ui-materialui';
import { dataProvider } from './dataProvider';
import { authProvider } from './authProvider';

export const MyAdmin = () => (
    
        
            
                }
                />
                }
                />
            
            
            
        
    
);

You should also set up the `` to allow users to reset a new password in case they forgot it.

``

A button allowing to login using an OAuth provider. Even though we provide buttons for each currently supported provider (``, etc.), you can add new ones before we update the package with this button:

import { useTranslate } from 'react-admin';
import { SocialAuthButton } from 'ra-supabase-ui-materialui';
import WonderfulNewServiceIcon from './WonderfulNewServiceIcon';

export const WonderfulNewServiceButton = (props) => {
    const translate = useTranslate();
    const label = translate('ra-supabase.auth.sign_in_with', {
        provider: 'Wonderful New Service',
    });

    return (
        } provider="wonderfulnewservice" {...props}>
            {label}
        
    );
};

We provide the following OAuth buttons:

• ``
• ``
• ``
• ``
• ``
• ``
• ``
• ``
• ``
• ``
• ``
• ``
• ``
• ``
• ``
• ``

Roadmap

• Add support for magic link authentication