Next.js（TypeScript）でFirebaseを利用し、Googleログインを実装する

はじめに

この記事では、Firebase Authenticationを使ってTypeScriptを使用したNextアプリにGoogleログインを実装する方法を記述します。
JavaScriptを使用したNextアプリにGoogleログインを実装する方法はこちらに記述しています。

この記事が他の人の参考になれば幸いです。
また、この記事の内容に間違った記載がありましたら、指摘してもらえるとありがたいです。

環境

名前	バージョン
macOS Big Sur	11.4
Node.js	16.4.1
TypeScript	4.3.5
React	17.0.2
Next.js	11.0.1

適当なNextアプリの作成

以下のコマンドでauth-exampleというNextアプリを作成しました。
このアプリにGoogleログインを実装していきます。

terminal

npx create-next-app --ts --use-npm auth-example

Firebaseの設定

以下の流れでFirebaseの設定を行っていきます。

1. Firebaseプロジェクトの作成
2. Authenticationの有効化
3. Googleプロバイダの有効化
4. （任意）承認済みドメインの設定
5. ウェブアプリの追加

Firebase consoleにアクセスし、Firebaseプロジェクトを作成します。
適当なプロジェクト名を入力し、プロジェクトを作成します。
Googleアナリティクスの設定は任意です。

プロジェクトの作成後、左側のナビゲーションからAuthenticationのページに飛び、[始める]ボタンでAuthenticationを有効にします。

その後、AuthenticationのSign-in methodタブでGoogleプロバイダを有効にします。
プロジェクトの公開名、プロジェクトのサポートメールは適当なものを設定し、保存します。

また、Sign-in methodタブのページ下部で承認済みドメインの設定ができます。
今回は変更しません。

左側のナビゲーションからプロジェクトの概要に飛び、</>のボタンでウェブアプリを追加します。
適当なアプリのニックネームを入力し、アプリを登録してください。
その後、Firebase SDKの追加で表示されるソースコードは、Nextアプリで使用するので、コピーして保存しておきます。

NextアプリでのGoogleログインの実装

以下の流れでNextアプリにGoogleログインを実装します。

1. 環境変数ファイル.env.localの作成
2. Firebaseライブラリのセットアップ
3. ログイン処理の実装

環境変数ファイル.env.localの作成

プロジェクトディレクトリに.env.localファイルを作成し、環境変数を設定します。
先ほどコピーしたソースコードのfirebaseConfig変数のプロパティ値を環境変数として読み込むために以下のように記述します。
NEXT_PUBLIC_のプリフィックスはクライアントで動作するNextアプリが環境変数を読み込むために必要です。
また、Googleアナティクスの有効無効によって、設定する環境変数の数が以下の場合と異なる可能性があります。

.env.local

NEXT_PUBLIC_FIREBASE_API_KEY=<apiKey>
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=<authDomain>
NEXT_PUBLIC_FIREBASE_PROJECT_ID=<projectId>
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=<storageBucket>
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=<messagingSenderId>
NEXT_PUBLIC_FIREBASE_APP_ID=<appId>

Firebaseライブラリのセットアップ

以下のコマンドでfirebaseライブラリをインストールします。

terminal

npm i firebase

インストール後、任意のファイル（この記事ではlib/firebase.ts）でfirebaseライブラリのセットアップを行います。

lib/firebase.tsは以下のように記述しました。
環境変数からFirebaseの設定情報を読み込み、firebaseライブラリを初期化しています。
また、再レンダリングなどの際に、初期化が複数回行われないようにif文で条件分岐させています。

lib/firebase.ts

import firebase from "firebase/app";
import "firebase/auth";

const firebaseConfig = {
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

if (firebase.apps.length === 0) {
    firebase.initializeApp(firebaseConfig);
}

export const auth = firebase.auth();
export default firebase;

ログイン処理の実装

実際のログイン処理を実装します。

この記事では、ユーザの認証関連の情報をuseContextを使用し、グローバルで扱います。
そのため、lib/AuthContextに認証関連の情報を扱うコンテキストを、pages/_app.jsにコンテキストを読み込む処理を、pages/index.jsにログイン、ログアウト関数の呼び出しを記述します。

以下の流れで実装していきます。

1. lib/AuthContext.tsxでAuthContextの作成
2. pages/_app.tsxでAuthContextの読み込み
3. pages/index.tsxでAuthContextの使用

lib/AuthContext.tsxでAuthContextの作成

lib/AuthContext.tsxを作成し、以下のように記述しました。

createContextでユーザ、ログインやログアウトを扱う関数を保持するAuthContextを作成しています。
AuthContextはカスタムHookuseAuthを通して使用できます。
login関数のauth.signInWithRedirect関数でリダイレクトでログインする方法を使用していますが、ポップアップを表示し、ログインする方法も存在します。

lib/AuthContext.tsx

import { createContext, useState, useEffect, useContext } from "react";
import { User } from "@firebase/auth-types";

import firebase, { auth } from "../lib/firebase";

type AuthContextType = {
    currentUser: User | null;
    login?: () => Promise<void>;
    logout?: () => Promise<void>;
};

const AuthContext = createContext<AuthContextType>({ currentUser: null });

export const useAuth = () => {
    return useContext(AuthContext);
};

type Props = {
    children?: JSX.Element;
};

const AuthProvider = ({ children }: Props): JSX.Element => {
    const [currentUser, setCurrentUser] = useState<User | null>(null);
    const [isLoading, setIsLoading] = useState(true);

    const login = () => {
        const provider = new firebase.auth.GoogleAuthProvider();
        return auth.signInWithRedirect(provider);
    };

    const logout = () => {
        return auth.signOut();
    };

    useEffect(() => {
        return auth.onAuthStateChanged((user: User | null) => {
            setCurrentUser(user);
            setIsLoading(false);
        });
    }, []);

    const value: AuthContextType = {
        currentUser,
        login,
        logout,
    };

    return (
        <AuthContext.Provider value={value}>
            {isLoading ? <p>Loading...</p> : children}
        </AuthContext.Provider>
    );
};

export default AuthProvider;

pages/_app.tsxでAuthContextの読み込み

pages/_app.tsxを以下のように変更しました。

<AuthProvider>を<Component>の親コンポーネントにすることで全てのコンポーネントからAuthContextの情報にアクセスできるようにしています。

pages/_app.tsx

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import AuthProvider from "../lib/AuthContext";

function MyApp({ Component, pageProps }: AppProps) {
  return (
      <AuthProvider>
        <Component {...pageProps} />
      </AuthProvider>
  )
}

export default MyApp

pages/index.tsxでAuthContextの使用

pages/index.tsxを以下のように変更しました。

これはuseAuthを使ってAuthContextを利用する一つの例です。
currentUserの値でユーザがログインしているかどうかの判別ができます。

pages/index.tsx

import styles from '../styles/Home.module.css'
import {useAuth} from "../lib/AuthContext";

export default function Home() {
const {currentUser, login, logout} = useAuth()

  return (
    <div className={styles.container}>
      <main className={styles.main}>
          {!currentUser && <button onClick={login}>ログイン</button>}
          {currentUser &&
          <div>
              <p>{currentUser.email} でログイン中</p>
              <button onClick={logout}>ログアウト</button>
          </div>}
      </main>
    </div>
  )
}