react-adminでSupabaseのユーザー認証を使う方法

Supabaseにはユーザー認証のAPIがあり、その認証システムをreact-adminで使う方法です。

authProviderを実装する

react-adminには認証の仕組みがあり、これは好きな認証システムを使えます。自前の認証システムを使うには、Auth Providerを実装します。

なので、Supabaseの認証システムをreact-adminに組み込みたいときは、Supabaseの認証APIを使ったAuth Providerを作ることになります。

その実装は次のようになります:

authProvider.ts

import { AuthProvider } from "ra-core";
import { UserIdentity } from "react-admin";
import { supabase } from "./supabaseClient";

const authProvider: AuthProvider = {
  async login({ username, password }): Promise<void> {
    const { error } = await supabase.auth.signIn({ email: username, password });
    if (error) throw error;
  },
  async logout(): Promise<void | false | string> {
    const { error } = await supabase.auth.signOut();
    if (error) throw error;
  },
  async checkError(): Promise<void> {},
  async checkAuth(): Promise<void> {
    const user = supabase.auth.user();
    if (!user) throw undefined;
  },
  async getPermissions(): Promise<any> {},
  async getIdentity(): Promise<UserIdentity> {
    const user = supabase.auth.user();
    if (!user) throw new Error("Failed to get user identity");
    return { id: user.id, fullName: user.email };
  },
};

export default authProvider;

react-adminにAuth Providerを組み込む

Auth Providerが実装できたら、あとはreact-adminの<Admin>コンポーネントのauthProviderパラメーターにそれを指定するだけです:

import authProvider from './authProvider'

<Admin dataProvider={dataProvider} authProvider={authProvider}>