はじめに
Baas(Backend As A Service)で何かサービスを構築してみたいと思い、
firebaseを触ってみようと思ったところ、Firebase の代替と謳われているsupabaseを発見。
簡単なTodoアプリを公式を参考に構築してみましたが、パスワード再設定の部分で少し手こずったので書きます。
簡単なTodoアプリの構築に関してはこちらで解説しております。
使ったもの
-
Vite + Svelte + Typescript
- @supabase/supabase-js
- tailwind css
-
supabase
- auth
- db
- realtime
詰まったこと
- パスワード再設定用メールの送信メソッドが叩けない
supabase.auth.api.resetPasswordForEmail()
- パスワード再設定メール内のredirect_urlがサイトURLに引っ張られる
- パスワード再設定メソッドが叩けない
supabase.auth.update()
1と3は同じ原因だったため先に解説します。
1. パスワード再設定用メールの送信メソッドが叩けない。
及び
3. パスワード再設定メソッドが叩けない
概要
公式リファレンスや、技術系の記事を読み、パスワード再設定用のEmailを送るために、
supabase.auth.api.resetPasswordForEmail()を実行してみたが、undefinedエラーになってしまった。
また、パスワード情報を書き換えるためにsupabase.auth.update()をしたが、こちらもundefinedエラーになってしまった。
原因・解決方法
supabase-jsは2022年10月にv2がリリースされ、一部メソッド名が変更となり、
resetPasswordForEmail及びupdateのメソッドも変更されていた。
公式のリファレンスでは画面上部にv1とv2を切り替えるボックスが用意されているので、
こちらでリファレンスを切り替えて、確認した。
参考)
// sendEmail - v1
supabase.auth.api.resetPasswordForEmail()
// sendEmail - v2
supabase.auth.resetPasswordForEmail()
// update - v1
supabase.auth.update()
// update - v2
supabase.auth.updateUser()
他にも似たような名前で変更になっているものが多いので、注意が必要でした。
2. パスワード再設定メール内のredirect_urlがサイトURLに引っ張られる
概要
私の場合、無料枠を利用しているためプロジェクト数に限りがある。
節約のために、localの開発環境と展開しているproduction環境を同じsupabaseプロジェクトで管理していました。
local環境でsendEmailのメソッドを叩き、メールの内容を確認したところ、
redirectUrlを指定していたのにもかかわらず、SITE URLに登録しているproduction環境へリダイレクトしてしまった。
参考)
resetPasswordForEmail(email, {
redirectTo: 'http://localhost:8080/reset-password',
})
解決方法
- supabaseの自分のプロジェクト管理画面を開く
- サイドメニューから、
Authenticationを開く -
Configuration内、URL Configurationを選択し、Redirect URLsにhttp://localhost:8080/*を追加する。
参考)
認証後のリダイレクト先としてlocalhostを設定しておく必要がありました。
リダイレクト先に登録していないURLがredirectToで指定されるとSITE URLに飛ぶようになっているようです。
少し苦戦しましたが、supabaseとってもいい感じなので、今後も使って楽々構築していきます。