Zenn
🔥

Next.js × Firebase で Google Login 実装 #1

2021/06/30に公開
Firebase
Next.js
Authentication
tech

毎度のFirebaseセットアップをこのアウトプット覚える or あとでわからないときにググる代わりに自分で参照するための記事 📝

例によって今回も公式ドキュメントを紐解きながら進めていく

JavaScript で Google ログインを使用して認証する

Google プロバイダ オブジェクトのインスタンスを作成します。

毎度お馴染み、公式はvarなので、constで定義しつつ、
公式にあるproviderでは個人的にはわかりづらいので、googleProviderと明示的に定義
他の認証の仕方は見ていませんが、仮に Github 認証を追加したいときに、その引数と被ったりしたらわかりにくそうだなぁ、と思ったので

firebase.js
const googleProvider = new firebase.auth.GoogleAuthProvider();

Google プロバイダ オブジェクトを使用して Firebase での認証を行います。

ユーザーに Google アカウントでログインするよう促すために、ポップアップ ウィンドウを表示するか、ログインページにリダイレクトします。
モバイル デバイスではリダイレクトすることをおすすめします。
ポップアップ ウィンドウでログインを行う場合は、signInWithPopup を呼び出します。

個人的にポップアップを選択
リダイレクトをお勧めしている理由が私にはよくわかっていません
とりあえず前述のproviderを引数にした公式のコードは以下の通り

firebase.auth()
  .signInWithPopup(provider)
  .then((result) => {
    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // これにより、Google Access Tokenが得られます。これを使ってGoogle APIにアクセスすることができます。
    var token = credential.accessToken;
    // サインインしたユーザー情報。
    var user = result.user;
    // ...
  }).catch((error) => {
    // ここでエラーを処理する。
    var errorCode = error.code;
    var errorMessage = error.message;
    // 使用したユーザーのアカウントのメールアドレス。
    var email = error.email;
    // 使用されたfirebase.auth.AuthCredential(資格)タイプ。
    var credential = error.credential;
    // ...
  });

上記のコードを参考に、打田裕馬さんの Udemy 講座 にも助けていただきつつ、以下のsignInWithPopup を実行するだけの最低限の関数を signInWithGoogle として定義し、 export
あとはres と error を console.log で確認だけできる状態です
自分は詳細を理解していないのですが、firebase では async await は使えないとの認識です

src/service/firebase.js
export const signInWithGoogle = () => {
  firebase
    .auth()
    .signInWithPopup(googleProvider)
    .then((res) => {
      console.log(res.user);
    })
    .catch((error) => {
      console.log(error.message);
    });
};

あとは上記の signInWithGoogle を使いたい場所で import
今回私は Headercomponents で Login button の onClick で使用するので以下のようになります

src/components/Header.jsx
import { signInWithGoogle } from "../service/firebase";

export const Header = () => {
  return (
    <div>
      <button onClick={signInWithGoogle}>Login</button>
    </div>
  );
};

上記の Header.jsx は index.jsx で import しているので、
index page で Login をクリックしたら Google認証ログインできるようになります
なんとシンプル、すばらしき
(もちろんログイン情報の保持やログアウトはできませんが)

pages/index.jsx
import { Header } from "../src/components/Header";

export default function Home() {
  return (
    <div>
      <Header />
    </div>
  );
}
export default Home;

余談ですが、上記の認証時に私は下記のエラーが出ます

auth.esm.js?b7aa:
60 A boolean is being passed as a fourth parameter to window.open.
This is not used and may cause an exception in a future release.

日本語訳は以下の通り

window.openの4番目のパラメーターとして、ブーリアン値が渡されています。
これは使用されていないため、将来のリリースでは例外が発生する可能性があります。

使用していないboolean(真偽値)を渡している
それが将来のアップデートで例外エラーの原因になるかもしれない
とのことですが、現状は問題なく動作すると思っているので、一旦保留します

とりあえずログインは実装できたので今回はここまで_φ(･_･

Discussion