Zenn
Open6

NextAuth x AppleProvider x Firebaseでの認証実装ハマリポイント

kenmorikenmori

副業先でこれらで認証実装したのだけれど、この組み合わせはあまり情報としてないため誰かのためにここに残しておく
WIP

kenmorikenmori

FirebaseError: Firebase: Error (auth/unauthorized-domain).

signinボタンを押すとfirebaseが一瞬立ち上がって閉じられる現象

firebase側でドメインが承認されていないので拒否されています

firebaseの
Authentication -> settings -> 承認済みドメイン -> ドメインの追加で追加します

追加されました

立ち上がりました

Firebase: Error (auth/operation-not-allowed).

前提

  • apple developerサイトに入れる、チームまたは個人が年間のdeveloper会費を支払っていてメンバーになっている
  • firebaseのプロジェクトは作ってある
  • NextAuthの方のでのsign inの実装は済んでいる
  • 環境変数APPLE_CLIENT_SECRET は作れていること

けどわからない方向け

    signInWithPopup(auth, appleProvider).then((result) => {
      // The signed-in user info.
      const user = result.user;

      // Apple credential
      const credential = OAuthProvider.credentialFromResult(result);
      if(credential === null){
        throw new Error("no credential")
      }
      const accessToken = credential.accessToken;
      const idToken = credential.idToken;

      // IdP data available using getAdditionalUserInfo(result)
      // ...
      signInByNextAuth('credentials', { idToken, callbackUrl: '/' });
    })
    .catch((error) => {
      // Handle Errors here.
      const errorCode = error.code;
      const errorMessage = error.message;
      // The email of the user's account used.
      const email = error.customData.email;
      // The credential that was used.
      const credential = OAuthProvider.credentialFromError(error);

      console.log({errorCode, errorMessage, email, credential})
    });

ここのconsoleで

Firebase: Error (auth/operation-not-allowed).
がでた場合
firebaseのここ

とApple developerサイトの
アカウント -> 証明書、ID、プロファイル -> Id(英語) -> Certificates, Identifiers & Profiles -> 右の方「AppIDs(虫眼鏡) 」 -> Services IDs -> Service ID for Sign In with Apple Id -> Identifier

https://developer.apple.com/account/resources/identifiers/serviceId/edit/<hoge>
にある

ここ


があっていない可能性があります

また、省略可能となっているここら辺全て埋める必要があります

server 起動時に読み込む環境変数

APPLE_ID=<hogehoge>
APPLE_ID=hoge
APPLE_CLIENT_SECRET=-----BEGIN PRIVATE KEY-----
some
-----END PRIVATE KEY-----

APPLE_TEAM_ID=hoge
APPLE_KEY_ID=hoge

も同じ値です

これらが権限関係で見えない、わからない場合は
管理者と連絡を取って実装者が埋める必要があります

kenmorikenmori

invalid_request redirect_uri is required

今回ハマったところ。NextAuth x Firebase x Apple認証のリソースが少ないので苦労した

調査すると誰もが間違えているポイントがある
Apple developer側のServices IDsの設定

  • domainにhttps://書くな
  • return urlsには最後 / 書くな
  • serviceIdとappIdを間違えるな
    が多い

serviceIDを設定する時保存されているか注意

  1. continues
  2. save

設定したはずなのに変更されていない！となった...

ありとあらゆるリソースを参考にした

TLS1.2以上をサポートしているのか調べた

redirect設定は複数できることを知る

このリンク先で配列で持てることを知った: Add a redirect URI to a login clientひょっとしたらNextAuthでも？と思ったらclientに redirect_urls を持っていることを知った

先ほどのserviceKeyにfirebaseのhander以外に指定でき、そこにNextAuthのコールバック設定をする

ref

kenmorikenmori

callbackにparameter error=OAuthSigninが付与される

NEXTAUTH_JWT_SECRETを設定してみる
ランダムな文字列ならなんでもいい

  jwt: {
    secret: process.env.NEXTAUTH_JWT_SECRET
  }
kenmorikenmori

invalid_request Invalid web redirect url.

nextAuthではprovider設定からここの記述で上書きできる

 AppleProvider({
      client: {
        redirect_uris: [
          '/login/callback' // here
        ]
      },
      authorization: {
        params: {
          scope: 'name email',
          response_mode: 'form_post',
          response_type: 'code'
        }
      },
      clientId: process.env.NEXT_PUBLIC_APPLE_SERVICE_ID!,
      clientSecret: process.env.APPLE_CLIENT_SECRET!
    }),

to

    AppleProvider({
      client: {
        redirect_uris: [
          '<your NEXT_PUBLIC_NEXTAUTH_URL>/login/callback'
        ]
      },
      authorization: {
        params: {
          scope: 'name email',
          response_mode: 'form_post',
          response_type: 'code'
        }
      },
      clientId: process.env.NEXT_PUBLIC_APPLE_SERVICE_ID!,
      clientSecret: process.env.APPLE_CLIENT_SECRET!
    }),
kenmorikenmori

appleProviderでredirectUrlの最後にerror=CredentialsSigninが付く問題

login/page
- signInByNextAuth('credentials', { idToken});
+