【初心者向け】React + Supabaseでログイン機能を最小構成で実装する

はじめに

React + Supabaseでログイン機能を実装する手順を紹介します。

実装手順

1. Reactプロジェクトの作成

ターミナルで以下のコマンドを実行

npm create vite@latest

2. パッケージインストール

ターミナルで以下のコマンドを実行

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

3. Supabaseプロジェクトを作成

以下の記事などを参考にSupabaseのプロジェクトを作成

4. 環境変数の設定

Supabaseのプロジェクトから以下の環境変数を取得し、貼り付けます。

.env

VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_PUBLISHABLE_KEY=your_supabase_publishable_key

5. Supabaseクライアントの作成

src/utils/supabase.ts

import { createClient } from "@supabase/supabase-js";

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseKey = import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY;

export const supabase = createClient(supabaseUrl, supabaseKey);

6. サインアップ、サインイン画面の作成

src/pages/Signup.tsx

import { useState } from "react";
import { supabase } from "../utils/supabase.ts";
import { Link } from "react-router-dom";

export const Signup = () => {
  const [email, setEmail] = useState<string>("");
  const [password, setPassword] = useState<string>("");

  const handleSignUp = async (e: React.FormEvent) => {
    e.preventDefault();
    await supabase.auth.signUp({
      email,
      password,
    });
  };

  return (
    <div>
      <h1>新規登録</h1>
      <form onSubmit={handleSignUp}>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="Email"
        />
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          placeholder="Password"
        />
        <button type="submit">新規登録</button>
      </form>
      <p>
        <Link to="/login">サインインはこちら</Link>
      </p>
    </div>
  );
};

新規登録後はメール認証を済ませてください。

src/pages/Login.tsx

import React, { useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import { supabase } from "../utils/supabase.ts";

export const Login = () => {
  const [email, setEmail] = useState<string>("");
  const [password, setPassword] = useState<string>("");
  const navigate = useNavigate();

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const { error } = await supabase.auth.signInWithPassword({
      email: email,
      password: password,
    });

    if (error) {
      console.log("error");
    } else {
      console.log("success");
      navigate("/home");
    }
  };

  return (
    <div>
      <h1>ログイン</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="Email"
        />
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          placeholder="Password"
        />
        <button type="submit">ログイン</button>
      </form>
      <p>
        <Link to="/signup">新規登録はこちら</Link>
      </p>
    </div>
  );
};

7. ルーティング設定

src/App.tsx

import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
import { Login } from "./pages/Login";
import { Signup } from "./pages/Signup";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Link to="login">サインインはこちら</Link>} />
        <Route path="/login" element={<Login />} />
        <Route path="/signup" element={<Signup />} />
        <Route path="/home" element={<p>ログイン成功</p>} />
      </Routes>
    </Router>
  );
}

export default App;

おわりに

過去にログイン機能を作った時に、Supabaseの公式ドキュメントのサンプルコードやQiitaの記事を参考にしました。しかし、どの記事もエラーハンドリングがされていたり、UIライブラリやproviderパターンなど当時の自分からしたら少し複雑で情報量が多く、理解するのが大変でした。

なので、今回はエラーハンドリング、装飾は基本なしでサインイン、ログイン成功にだけフォーカスを当てた最小限のコードをまとめました。
この最小限の構成からエラーハンドリングやcontextなど少しずつ追加していくのが個人的には理解しやすいのかなと思いました！