Apple Sign-in with Firebase x Next.js
ハマりどころ
- Appleサインインを行うサイトを Firebase Authentication > 設定 > 承認済みドメインに設定しておかなければいけない
- iOS でもアプリを提供していると AppID は作成しているはずだが、別で ServiceID を作成しないといけない
- Firebase Auth の Apple サインインの設定画面では上記の「ServiceID」を設定しないといけない
-
[YOUR_PROJECT_ID].firebaseapp.com以外のウェブサイトをホスティングするドメインを登録したり、ドメイン認証用に.well-known配下にドメイン認証用のドキュメントを置いたりはしなくてよかった
ちなみに1についてはまず localhost を設定できるのでローカルでテストできる。次にプロダクション環境について今回は Vercel を使っているが、main ブランチにマージする前は Vercel はブランチに紐づいたドメインだったり、ランダムで割り当てられたドメインを用意して動作確認できるようにしてくれるが、当然ここでテストしたいなら一時的にそのドメインを Firebae Authentication の承認済みドメインに追加しないと動かないので注意。
Apple Developer で登録した ServiceID(identifier)
Firebase Authentication > Apple サインインのサービスID
また Fibase には Apple(iOS)の場合はサービスIDは不要と書かれているが、最初未記載で動いていたが後々何かの理由でここはやっぱ記載しないとだめだとなって書いた記憶なんだよね。。今回 iOS アプリで使う AppID を消して Webアプリ用の ServiceID に書き換えたため不安はあるが今のところ動いている..。
Grouped App IDs
ざっくりとしかメモを残さないが、今回 iOS / Web の2プラットフォームで Sign in with Apple を提供するが、Apple の個人情報提供の同意を1回で済むように Web の ServiceID の primary(親）として iOS の AppID を設定しておいた。
アプリのユーザーは、自身の情報をデベロッパに提供することに同意する必要があります。関連するそれぞれのアプリやWebサイトに対して、この手順が1回のみ発生するようにするため、関連するIDをグループ化することをお勧めします。
https://developer.apple.com/jp/help/account/capabilities/group-apps-for-sign-in-with-apple/
コード
const handleAppleSignIn = async () => {
try {
const provider = new OAuthProvider('apple.com');
await signInWithPopup(auth, provider);
} catch (error) {
console.error('Appleサインインエラー:', error);
}
};
必要なかったこと
cient_id のコードへの設定
[TeamID].[com.example.myapp]の形の client_id は特にコード側で設定する必要はなかった。
公式にある Node.js でのコード
公式には Node.js 内で Firebase による認証を行う の項目があるが、これは Node.js 内ということでサーバーサイドで認証するとかそんな感じか..？ちょっと自信ない..。
エラー
FirebaseError: Firebase: Error (auth/unauthorized-domain).
Firebase Auth の
Invalid client id or web redirect url.
Popup or Redirect
Redirectサインインの場合は少し前に通知がきて、ブラウザがサードパーティ Cookie をブロックするようになるのでそのままリダイレクトがいいなら authDomain を構成に入れてねという変更があった。Popupでのログインでいいならそれに変えるだけでいい。一応 Popup がブロックされないか不安だったが、公式にそういう言及もないし大丈夫そう。ただ Arc ブラウザはポップアップではなく新タブで開く形だっった。
ref
Discussion