はじめに
初めまして🙇
私はこちらの単語帳アプリを開発しているKikoといいます。
本記事ではReact（Vite + TypeScript）と Supabase を使って、サインアップ・ログイン・パスワード再設定までの一連のフローをシンプルに実装する方法をまとめます。
アーキテクチャ図
UI/UXをfigmaでばっくりつくる
まず抜け漏れがないように先にfigmaでデザインから画面遷移まで作ってしまいます。
先に設計図を書くことで、「後々このコンポーネントが必要になる」「ページは合計で何枚追加必要か」など、都度考える手間が省けるので私はこの手法を採用しています
バリデーションの文言などもここで作り終えます。
（バリデーション周りの管理はReact hook formが一番楽ですが、この記事では一旦詳細に言及せず割愛します）
Supabase プロジェクトを作成する
Supabase にログインし、新しいプロジェクトを作成します。以下を控えます
- Project URL
- anon key（public key）
- service_role key（今回は不要）
続いて、Authentication → URL Configuration を開きます。
-
Site URL に
-
http://localhost:5173（開発） -
https://your-domain.com（本番）
-
-
Redirect URLs に
http://localhost:5173/loginhttp://localhost:5173/password/update
これを登録しておくことでメール内リンクから正しく遷移できます。
メールテンプレートを設定する
ここはsupabaseを使っていてすごく感心したところなのですが、supabase自体に認証メールを飛ばす機能が内包されています。
なのでいちいちメール送信サービスを選ぶ必要がないので、個人開発者にとってはかなり嬉しい機能です。
Authentication → Emails → Reset password を開き、リンク部分が次の形になっていることを確認します。
<a href="{{ .ConfirmationURL }}">Reset Password</a>
Supabase が自動生成する ConfirmationURL に、あなたのアプリ側の /password/update が含まれます。
Supabase クライアントを設定する
src/lib/supabaseClient.ts
import { createClient } from "@supabase/supabase-js";
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
export const supabase = createClient(supabaseUrl, supabaseAnonKey);
.env に鍵を設定します。
signup
ユーザーがメールアドレスとパスワードで登録し、確認メールが送信されるフローを自分で組むことができます。
const { data, error } = await supabase.auth.signUp({
email,
password,
});
成功時、Supabase が自動でメール送信します。
ログイン
const { data, error } = await supabase.auth.signInWithPassword({
email,
password,
});
メール未確認の場合はエラーが返ります。
パスワード再設定メールの送信
Supabase は resetPasswordForEmail を用意しています。
await supabase.auth.resetPasswordForEmail(email);
成功後は「送信完了」画面に遷移すると UX が安定します。
メールリンクからパスワード更新
Supabase の再設定リンクは /#access_token=xxxx の形式で届きます。
これを使ってセッションをセットします。
await supabase.auth.setSession({
access_token,
refresh_token: "",
});
その後、パスワードを更新します。
await supabase.auth.updateUser({ password });
更新が成功したらログイン画面へ戻します。
パスワードの再設定画面
この辺りの制御も初期MVPに含めないと、ユーザーの体験を損なうことになります。上記のフローを流用してこのフローを作ります。
まとめ
個人開発者にとってAuth周りが一番大変かつ重要な領域ですが、supabaseを使うとかなり楽にその辺りを設計することができます。
次回はプロフィール編集や RLS の基本もまとめたいと思います。
追記
2023年ごろからSupabase に内包されているメールは1時間に数件まで制限されてしまい、本番では Resendなどに切り替えると安定して運用できると公式からアナウンスがありました。
個人開発をしている方々は本格運用に切り替える際にこちらを検討した方が良さそうです。