🔐

Next.js Firebase GoogleSignIn

2024/12/16に公開

 🤔やってみたいことNext15で、middleware.tsで認証が通っていたらログインできるロジックを過去の記事で実装した。メールアドレス・パスワードのログインでもミドルウェアの設定はそのままでも良いみたいで、GoogleSignInの設定だけ紹介するために、コードをシンプルにしました。
調べてもあまり例が出てこない😅

 🚀やってみたことJavaScript による Google を使用した認証 を参考に実装する。
リダイレクトの設定は前回の記事を使い回す。匿名認証のページをGoogleSignInのページに取り替えるだけでOK🙆
// app/auth/signin/page.tsx
'use client'

import { useState } from 'react'
import { auth } from '@/firebase'
import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth'
import { FcGoogle } from "react-icons/fc"

export default function SignIn() {
    const [isLoading, setIsLoading] = useState(false)
    const [error, setError] = useState('')

    const handleGoogleSignIn = async () => {
        setIsLoading(true)
        setError('')

        try {
            const provider = new GoogleAuthProvider()
            const userCredential = await signInWithPopup(auth, provider)
            const token = await userCredential.user.getIdToken()
            
            document.cookie = `firebase-token=${token}; path=/; secure; samesite=strict`
            window.location.href = '/dashboard'
        } catch (error: unknown) {
            console.error('Google認証エラー:', error)
            if (error instanceof Error) {
                switch (error.message) {
                    case 'auth/popup-closed-by-user':
                        setError('ログインがキャンセルされました')
                        break
                    case 'auth/popup-blocked':
                        setError('ポップアップがブロックされました')
                        break
                    default:
                        setError('ログインに失敗しました')
                }
            }
        } finally {
            setIsLoading(false)
        }
    }

    return (
        <div className='flex items-center justify-center min-h-screen p-4'>
            <div className="w-full max-w-md space-y-4">
                <button
                    className="w-full flex items-center justify-center gap-2 bg-white border border-gray-300 text-gray-700 rounded-md px-4 py-2 hover:bg-gray-50 disabled:opacity-50"
                    onClick={handleGoogleSignIn}
                    disabled={isLoading}
                >
                    <FcGoogle className="text-xl" />
                    <span>{isLoading ? 'ログイン中...' : 'Googleでログイン'}</span>
                </button>

                {error && (
                    <p className="text-red-500 text-center">{error}</p>
                )}
            </div>
        </div>
    )
}

 🙂最後にWebサービスだとGoogleSignInが使われていることが多いので、実装の参考になると良いかなと思いつつ記事を書いてみました。自分のメモ用なんですけどね。SupabaseでやるとGoogle Cloudの設定が必要なので、手間があったりする。
Firebaseだと設定が少ないので楽ではある。

🤔やってみたいこと

🚀やってみたこと

🙂最後に

Discussion