Next.js(App Router)×TypeScriptでログイン機能を実装する（Google認証）｜Firebase Authentication

Next.js(App Router)×TypeScriptで
FirebaseのAuthenticationを使ってGoogleログイン認証を実装した時の手順。

ちなみに「メール認証」編はこちら👇

前提

• Next.js：プロジェクト作成済み
• Firebase : プロジェクト作成済み
• フォームのUI：実装済み

Firebase AuthenticationでGoogle認証を実装する方法

アプリ追加〜初期化まですでに実施済みの場合は、ログインとログアウト機能を実装するまでスキップ🏃‍♀️💨

ログインとログアウト機能を実装する

service/firebase.js に下記を追記

export const auth = getAuth(app);
export const db = getFirestore(app);
export const provider = new GoogleAuthProvider();

export const signInWithGoogle = () => {
  signInWithPopup(auth, provider).then((result) => {
    console.log(result);
  });
};
export const signOutWithGoogle = () => {
  auth.signOut();
};

ログインボタンを実装する

components/auth/GoogleLogin.tsx に下記を記述
※ router.push("/");でログイン後のリダイレクト先を設定

"use client";
import Image from 'next/image'
import { signInWithGoogle } from '../../service/firebase'
import { useRouter } from 'next/navigation';

function GoogleLogin() {
    const router = useRouter(); 
    const handleSignIn = async () => {
        await signInWithGoogle();
        router.push("/");
    };
    
  return (
    <button onClick={handleSignIn}>
        <Image src={"/img/web_light_rd_SU@2x.png"} alt={"Googleでログインする"} width={358} height={80} />
    </button>
  )
}

export default GoogleLogin

ログアウトボタンを実装する

components/auth/Logout.tsx に下記を記述
※ router.push("/login");でログアウト後のリダイレクト先を設定

"use client";
import { signOutWithGoogle } from '@/service/firebase';
import { useRouter } from 'next/navigation';
import React from 'react'

function Logout() {
    const router = useRouter(); 
    const handleSignOut = async () => {
        await signOutWithGoogle();
        router.push("/login");
    };
    
  return (
    <button onClick={handleSignOut}>ログアウト</button>
  )
}
export default Logout

ログイン・ログアウト状態を判定し、表示分けをする※

react-firebase-hooks をインストール

npm i react-firebase-hooks

ログインしている時だけフッターコンポーネントを表示するコードはこんな感じになる。
※ useAuthState はクライアントサイドでしか使えない

"use client"
import Footer from '@/components/layout/Footer';
import { auth } from '@/service/firebase';
import React, { ReactNode } from 'react'
import { useAuthState } from 'react-firebase-hooks/auth';

function AsyncLayout({ children }: { children: ReactNode }) {
    const [user] = useAuthState(auth); // ログイン判定
    const containerClassName = user ? "login" : "logout"

  return (
    <>
    <div className={containerClassName}>
      {children}
      { user ? <Footer /> : "" }
    </div>
    </>
  )
}
export default AsyncLayout

※【追記】この方法だとクライアントサイドでしか使えないようなので、サーバサイドでもログイン管理するためには他の手段の検討が必要そう・・・なので、このやり方は却下になるかも？
まだそこまで実装が進んでいないので、のちほど検討したいと思います・・・！

以上です！