React.js アプリケーションに Supabase 認証サービスを統合する方法

カスタム認証システムの構築は、困難な作業になる可能性があります。認証プロトコル、およびユーザー認証と認可プロセスについての深い理解が必要です。ただし、Supabase のようなツールを統合することで、アプリケーションのコア ロジックの構築により集中できます。

Supabase は、クラウドベースの開発プラットフォームを提供するオープンソースの Firebase の代替手段です。本格的な Postgres データベース、認証サービス、サーバーレス機能など、さまざまなバックエンド サービスを提供します。

よりアクセスしやすいように設計されているため、プロジェクトをすばやくセットアップできます。この手順に従って、React.js アプリケーションに認証サービスを統合する方法を学んでください。

Supabase 開発者コンソールで新しいプロジェクトを作成する

Supabase 開発者コンソールで新しいプロジェクトを作成するには、次の手順に従います。

1. Supabase開発者アカウントにサインアップします。ダッシュボードに移動し、新しいプロジェクトを作成します。
   
2. プロジェクトの名前とパスワード (これはこのチュートリアルではオプションですが、データベースをセットアップするときに推奨されます) を入力し、リージョンを選択して、最後にCreate new projectをクリックします。
3. [API 設定] で、プロジェクトのURLと公開 anonキーをコピーします。
   

認証プロバイダーのセットアップ

認証プロバイダーは、ユーザーがさまざまなソーシャル ログインを使用して認証するための安全な方法を提供します。Supabase はデフォルトで電子メール プロバイダーを提供します。さらに、好みに応じて、Google、GitHub、または Discord などの他のプロバイダーを追加できます。

このチュートリアルでは、Google プロバイダーをセットアップする方法を示します。これを行うには、次の手順に従います。

1. 左ペインで、[認証] タブを選択します。
   
2. [認証設定] ページで [プロバイダー] オプションを選択し、最後にプロバイダーのリストからGoogle プロバイダーを選択します。電子メール プロバイダーは既定で既に構成されていることに注意してください。構成を行う必要はありません。
   
3. [プロバイダー] トグル ボタンを有効にします。
4. Google プロバイダーには、ClientID と ClientSecret の 2 つの入力が必要です。これら 2 つの値は、Google Developer Console でアプリケーションを作成した後に取得されます。とりあえず、リダイレクト URLをコピーします。これを使用して、Google Developer Console でアプリケーションをセットアップし、ClientID と ClientSecret を取得します。
   

Google Developer Console (GDC) でプロジェクトを設定する

Google で認証するには、アプリを Google Developer Console (GDC) に登録し、 ClientID と ClientSecret を取得する必要があります。次の手順に従って、GDC でプロジェクトをセットアップします。

1. Google Developer Consoleに移動し、Google アカウントでサインインしてコンソールにアクセスします。
2. ログインしたら、 [ APIs and Services ] タブに移動し、[ Create Credentials ] オプションを選択してから、[ OAuth client ID ] を選択します。
   
3. 提供されたオプションからアプリケーションのタイプを指定し、アプリケーションの名前を入力します。
4. その後、アプリのホーム ルート URL ( http://:localhost:3000 ) を指定し、最後にコールバック リダイレクト URL を指定します。Supabase Google プロバイダーの設定ページからコピーしたリダイレクト URL を貼り付けます。[保存]をクリックしてプロセスを完了します。
   
5. ClientIDとClientSecretをコピーして、Supabase プロジェクト ダッシュボードに戻り、Google プロバイダー設定ページの ClientID と ClientSecret 入力フィールドに貼り付けます。[保存]をクリックしてプロバイダーを有効にします。
   

React.js アプリケーションで Supabase 認証サービスを構成する

React.js アプリケーションを作成し、好みのコード エディターでプロジェクト フォルダーを開きます。次に、プロジェクト フォルダーのルート ディレクトリに、環境変数 (プロジェクト URL と公開 anon キー) を保持するための ENV ファイルを作成します。Supabase 設定ページに移動し、API セクションを開き、プロジェクト URL と公開 anon キーをコピーします。

REACT_APP_SUPABASE_URL= project URL
REACT_APP_SUPABASE_API_KEY = public anon key

1. 必要なパッケージをインストールする

ターミナルで次のコマンドを実行して、必要な依存関係をインストールします。

npm install @supabase/auth-ui-react @supabase/supabase-js react react-router-dom

2. ログイン ページと成功ページのコンポーネントを作成する

React.js アプリケーションの /src ディレクトリに新しいフォルダーを作成し、pages という名前を付けます。このフォルダー内に、Login.js と Success.js の 2 つのファイルを作成します。

3. ログインページコンポーネント

このコンポーネントは、Supabase が提供する React.js 認証 UI を利用して、サインアップおよびサインイン機能をレンダリングします。認証 UI を依存関係 (@supabase/auth-UI-react) としてインポートしたため、認証機能の実装が簡単になりました。

login.js ファイルに、次のコードを追加します。

import React from 'react';
import {createClient} from '@supabase/supabase-js';
import {Auth, ThemeSupa} from '@supabase/auth-ui-react';
import {useNavigate} from 'react-router-dom';
const supabase = createClient(
    process.env.REACT_APP_SUPABASE_URL,
    process.env.REACT_APP_SUPABASE_API_KEY
);
function Login() {
    const navigate = useNavigate();
    supabase.auth.onAuthStateChange(async (event) =>{
        if (event! == "SIGNED_OUT") {
            navigate('/success');
        }else{
            navigate('/');
        }
    })
  return (
    <div className="App">
      <header className="App-header">
        <Auth
            supabaseClient={supabase}
            appearance={{theme: ThemeSupa}}
            theme="dark"
            providers={['google']}
        />
      </header>
    </div>
  );
}
export default Login;


それを分解しましょう：

• 環境変数 (プロジェクト URL と ENV ファイル内の公開 anon キー) を使用して、Supabase クライアントを初期化します。
• supabase.auth.onAuthStateChange() メソッドを使用して認証状態の変化を追跡するイベント リスナーをセットアップします。つまり、認証状態が「SIGNED_OUT」でない場合、ユーザーは「/success」ページに移動します。それ以外の場合、ユーザーは移動します。 ‘/’ (ホーム/ログイン) ページに移動します。
• このプロセスを管理するには、useNavigate フックの navigate メソッドを使用します。
• 最後に、React Auth UI コンポーネントを含む div を Supabase ライブラリから返し、themeSupa (Supabase が提供)、dark テーマ、Google プロバイダーの外観をプロパティとして設定します。

4. 成功ページ コンポーネント

このコンポーネントは、ユーザーが正常に認証された後、ユーザーの詳細とサインアウト ボタンを含む成功ページをレンダリングします。

Success.js ファイルに、次のコードを追加します。

import React from 'react';
import {createClient} from '@supabase/supabase-js';
import {useNavigate} from 'react-router-dom';
import {useEffect, useState} from 'react';
const supabase = createClient(
    process.env.REACT_APP_SUPABASE_URL,
    process.env.REACT_APP_SUPABASE_API_KEY
);
function Success() {
    const [user, setUser] = useState([]);
    const navigate = useNavigate();
    useEffect (() => {
        async function getUserData(){
           await supabase.auth.getUser().then((value) => {
               if(value.data?.user) {
                setUser(value.data.user)}
            }) }
       getUserData();
    },[]);
    const avatar = user?.user_metadata?.avatar_url;
    const userName = user?.user_metadata?.full_Name;
    async function signOutUser(){
        await supabase.auth.signOut();
         navigate('/');
     };
  return (
    <div className="App">
      <header className="App-header">
      <h1>Login Successful</h1>
       <h2>{userName}</h2>
       <img src={avatar} />
       <button onClick={()=> signOutUser()}>Sign Out</button>
      </header>
    </div>
  );
}
export default Success;

それを分解しましょう：

• 環境変数 (プロジェクト URL と ENV ファイル内の公開 anon キー) を使用して、Supabase クライアントを初期化します。
• React.js フック、useState および useEffect を使用して、API 応答からデータを取得します。
• useEffect フックは、supabase.auth.getUser メソッドを呼び出す非同期関数を実装します。このメソッドは、現在のユーザーのセッションに関連付けられているユーザー情報を取得します。
• 次に、非同期関数はユーザー データが存在するかどうかを確認し、存在する場合はそれを状態変数に設定します。
• signOutUser 関数は、supabase.auth.signOut メソッドを使用してユーザーをサインアウトし、ユーザーがサインアウト ボタンをクリックすると、ログイン ページに戻ります。
• 最後に、ユーザー情報の一部を含む div を返します。

5. ページ ルートを構成する

最後に、ログイン ページと成功ページの両方のルートを構成します。

app.js ファイルに、次のコードを追加します。

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Login from './pages/Login';
import Success from './pages/Success';
function App() {
  return (
    <Router>
      <Routes> //Define the routes
        <Route path="/" element={<Login />} />
        <Route path="/success" element={<Success />} />
      </Routes>
    </Router>
  );
}
export default App;


それを分解しましょう：

• 2 つのルートを定義します。react-router ライブラリの Router コンポーネントを使用して、ログイン ページのルートと成功ページのルートです。
• ルート パスをそれぞれ「/」と「/success」に設定し、Login コンポーネントと Success コンポーネントをそれぞれのルートに割り当てます。
• 最後に、ターミナルで次のコマンドを実行して、開発サーバーを起動します。

     npm start

• ブラウザでhttp://:localhost:3000に移動して、結果を表示します。ログイン コンポーネントは、Supabase の React-auth-UI を電子メール プロバイダーと Google プロバイダーの両方でレンダリングします。
  

Google を使用して認証するか、電子メールとパスワードでサインアップし、これらの資格情報を使用してサインインすることができます。Supabase のソーシャル ログイン プロバイダーまたは電子メール プロバイダーを使用する利点は、サインアップ ロジックについて心配する必要がないことです。

ユーザーがソーシャル プロバイダーまたは電子メールとパスワードでサインアップすると、データはプロジェクトの Supabase の Auth ユーザー データベースに保存されます。資格情報を使用してサインインすると、Supabase は、サインアップに使用された資格情報に対して詳細を検証します。

Supabase は React での認証を容易にします

Supabase は、データベース ホスティング、API アクセス、リアルタイム データ ストリーミングなど、認証以外の機能の包括的なスイートを提供します。また、開発者がアプリケーションをより効率的に構築および管理するのに役立つ、クエリ ビルダーやデータ視覚化などの機能も提供します。

直感的なダッシュボードと堅牢な API を備えた Supabase は、スケーラブルで安全なアプリケーションを構築するための強力なツールです。