Supabase（スーパーベース・スパベース）の使い方3回目。今回はSupabaseで認証機能をつけていきます。
前回作成したWebアプリを使っていきます。前回の内容はこちら。
認証機能っていうと、ログインとかログアウトね。なんだか本格的！
Supabaseを使うと、こんな本格的な機能も、安全・手軽に搭載できるんだよね。
Supabase側の設定
まずはSupabase側の設定をすすめておきましょう。Supabaseにログインして、Authenticationメニューから【Users】を選びます。【Add user】ボタンから【Create new user】を選択。
ここでユーザーを登録します。test@example.comという架空のメールアドレスのユーザーを登録しておきます。
ちなみに、下記のように不適切なメール形式の場合には、「Must be a valid email address」エラーとなります。
不完全な形式だと登録できないのね。こういうのが最初からついているって、Supabaseってステキ
頼りがいがあるよね。
パスワードを強めたい場合
ちなみに、デフォルトではパスワードは6文字以上必須となっています。Supabase/Authenticationの中のSign In/Providers/Emailより設定へ変更できます。
例えば次のようにすると、8文字以上で数字と文字が両方必要となります。
なお漏洩したパスワードの使用を防止するといった高度なオプションも本設定にありますが、こちらは、Proプラン以上となります。
簡単にパスワードルールも設定できるのね！
そこは嬉しいけど、高度なオプションは、やっぱり有料になっちゃうけどもね。
Webアプリに認証機能を搭載する
次にWebアプリに認証機能を搭載します。前回までで作成したReactの社内備品管理アプリにコードを追加していきます。
生成AI（Claude Codeなど）を使って、次のように指示をしてコードを書いてもらうことができます。
【Webアプリ開発用プロンプト例】
– トップ画面: ログイン画面を表示
– ログイン成功後: 備品管理ページを表示
– 未ログイン時: 備品管理ページは非表示
– ログアウトボタン: 備品管理ページの右上に配置
– 新規登録: ログイン画面の下にリンクを配置
Supabaseの公式ドキュメントはこちら。
*ちなみに以前は認証用ライブラリ(@supabase/auth-ui-react)がありましたが、すでにdeprecated(非推奨）となっていました。
コード記載後、ブラウザにWebアプリを表示してみましょう。次のようにログイン画面がでてきたら、無事に認証機能が搭載されています。
ためしに、登録したユーザー情報でログインしてみてくださいね。
ログイン後は、備品一覧ページが表示されます。
ログイン機能はちゃんと搭載できたのね！早いわ～
それじゃ引き続きユーザー登録もしてみよう。
Supabaseのユーザー登録とメール認証機能
次にユーザー登録を行いたいところですが、実はSupabaseはデフォルトでメール認証機能がついています。
そのため、ダミーメールアドレスではユーザー登録ができません。ダミーメールで登録をする場合には、Supabase/Authenticationメニューから【Sign In/Providers】を選びます。
ここで【Confirm email】の設定をオフにしておきましょう。
メール認証機能までデフォルト搭載なのね！
頼りがい度、ますますアップでしょ♪
なお本番環境ではメール認証をオンにしておくことをおすすめします。その際には下記の設定も変更する必要があります。
SMTP設定
Authentication/Emailメニュー/SMTP Settingsにて、SMTPサーバーの情報をいれておきます。 SendGrid, AWS SESなどが対応しています。
Rate Limits設定
Authentication/Rate Limitsにて、Rate limit for sending emailsの数値を変更しておきます。デフォルトは2となっていますが、これですと、1時間に2通しか送信できません。
カスタムSMTPを設定すると30通となります。こちらはご利用に合わせて変更します。
確認メールのメッセージ変更
こちらはお好みとなりますが、デフォルトでは、メール認証用のメールは英語で書かれています。
メッセージを変更したい場合は、Authentication/Emailの中のTemplatesより、変更したいメッセージを選択します。メール認証用のメールは、Confirm sign upを編集します。
はぁ。色々と変えられるのはいいけど、理解するのは大変そうだわ。
全部理解しなくても大丈夫！
とりあえずは基本を知っておいて、必要に応じて調べてみて。
でも、、、良かったら、Supabaseがどう安心なのか、仕組みについては、少し詳しく知っておいてほしいな。
そこは興味あるわ！教えて。
ちょっと詳しく仕組みをお伝えすると…
Supabaseの機能の使い方をメインにお伝えしてきましたが、少し仕組みについてもお伝えしますね。
パスワードの保存
Supabaseの認証機能では、パスワードは、強力なパスワードハッシュ関数であるbcryptを使用してハッシュ化されます 。つまり、「元に戻せない形に変換して保存」されます。
さらにセキュリティ上の理由から、パスワードはダッシュボードでは見えないようになっています。
セッション管理
さらに、Supabaseではセッションもきめ細かく制御されています。
ログイン後、「あなたは本人ですよ」という証明書のようなトークンが発行され、それを使って情報を安全に管理してくれます。
こういったセキュリティ機能は自分で搭載するのはかなり難しいの。
なるほど。最初から高度な機能が使えるのは嬉しいわ！
さらに安全に力をいれたい方へ
今回はSupabaseの機能説明がメインなので、ここまでとします。
ただ、「本番に向けてもっと安心・安全なWebアプリにしたい！」と思った時には、ぜひ下記も検討してくださいね。
- バリデーションエラーの実装
- Webアプリ側にもメールアドレスの値が不適切な時にエラーになるようにします。
- エラーメッセージの実装
- エラーメッセージについても、日本語で分かりやすいメッセージをWebアプリ側で作っておくとよいでしょう。デフォルトのままですと、Supabase側からの英語のメッセージが画面に出てしまいます。
- .envファイルをGit管理から外す
- WebアプリをGit管理する際は、.envファイルは、Git管理対象外にします。
さいごに
Supabaseのデータベース、いかがでしたか？
メール認証機能も搭載したので、次回はRLSを設定して、「本人しかデータを編集・削除できない」といった処理を加えていきます。
これでぐぐっとセキュリティレベルが高められます。
セキュリティレベルが高まるなら、ぜひやらなきゃ！
Supabaseの醍醐味ともいえる部分だから、ぜひしっかり伝えていくね。
気になったら、次回もぜひ見て下さいね。更新した時はXなどでお知らせします。よかったらフォローしてください。
