ExpoでfirebaseのauthenticationにGoogle loginプロパイダを入れる方法的なお話

firebaseのAuthenticationでログイン方法って色々とあるんだけど。
その中でGoogleログインをするには的なところとかきになるわけで。
もちろんGoogleだけではなくて他のやつもなんだけど、とりあえずGoogleがきになるわけで。
Twitterでそこらへんを聞かれたから答えられないとなぁ〜と思ってみて。

というわけで今日はExpoでGoogleログインをして、それをfirebaseのAuthenticationに紐づけるには的なお話をば。

とりあえず作ったsnackはこちら

firebaseのconfigなどはfirebaseのプロジェクトを設定して、webのやつを選択すれば出てくる的な。
snackというかexpoのクライアントアプリ上で動作させたい場合はこのドキュメントを見てauth client idをゲットしてください的な。

try {
  const result = await Google.logInAsync({
    behavior:"web",
    iosClientId: 'google oauth login ios client id',
    scopes: ['profile', 'email'],
  });

  if (result.type === 'success') {
    const { idToken, accessToken } = result;
    const credential = firebase.auth.GoogleAuthProvider.credential(idToken,accessToken);
    
    firebase
      .auth()
      .signInAndRetrieveDataWithCredential(credential)
      .then(res => {
        console.log("loggedIn:",res)
        // user res, create your user, do whatever you want
      })
      .catch(error => {
        console.log('firebase cred err:', error.message);
      });
  } else {
    return { cancelled: true };
  }
} catch (err) {
  console.log('err:', err);
}

ここら辺が大事なところ。
なんていうかGoogleログインをしたあとに取得できるidToken,accessTokenをfirebaseのcredentialsに紐づけている的な感じではあるかなと。
意外と仕組みは簡単なので多分TwitterとかFacebookも簡単にできるんじゃないかなと。
ちなみにGoogle.loginAsyncだけど、expoのクライアントアプリ上だとbehaviorをwebにしておかないとちゃんと動かないかも的な。

これからの時代、認証というかユーザ管理についてはfirebaseに置いちゃうとかもありだよねと思うので、expoでもできるということがわかっておくと大事だよね的なみたいな。