🔖
Google認証とEmail/Password認証のアカウントリンク(Nextjs × Supabase)
Google認証済みアカウントにEmail/Password認証のアカウントを紐づけたい
Nextjs(app router)とSupabaseを使用した、異なる認証方法のアカウント連携について解説します。特に、Google認証済みアカウントにEmail/Password認証を追加する方法に焦点を当てています。
前提条件
以下の認証方法が実装済み
- Googleログイン
- Email/Passwordログイン
結論
updateUserを使用して、メールリンクを踏めば自動的にアカウントが紐づけられます！
const { data, error } = await supabase.auth.updateUser({
email: 'new@email.com'
password: 'newpassword'
})
実装
一般的なアカウントリンクは公式ドキュメントに記載されている通り楽に実装できます！
googleアカウントでの認証済み状態で、先ほどのupdateUserを実行！
すると、連携したいメールアドレスと、Googleアカウントのメールアドレス両方に確認メールが送信される。両方のメールリンクを踏むことで連携が完了します。(設定で１通にもできそう)
providersに"email"が追加されてることが確認できます。
連携時の仕様として、最後にクリックしたメールリンクまたは、ログインのプロバイダーが「メインプロバイダー」として設定されるようです。
emailの方はリンクを踏む順番に依らず、紐づけたい方のアドレスになります。
"role": "authenticated",
"email": "hoge@fuga.com", // 順番に依らずemailのアドレスになる
"encrypted_password": "..."
"raw_app_meta_data": {
"provider": "google", // 後に踏んだリンク（ログイン）のproviderになる
"providers": [
"google",
"email"
]
},
アカウント連携の解除
連携解除したい場合は、公式ドキュメントにあるunlinkIdentityメソッドを使うことで実装できます！
なのでunlinkIdentityを実行する前にパスワードを更新しておく必要があります。
ちなみに空文字だと"6文字以上にしてね"とまた怒られます...
const { data, error } = await supabase.auth.updateUser({
password: randomUUID(),
});
まとめ
公式ドキュメントには詳細な記載がない、Google認証済みアカウントへのEmail/Password認証の追加方法について解説しました。
参考
Discussion