Zenn
☕

firebase v9 Google ログイン認証、React版

2022/05/09に公開
Firebase
Node.js
React
tech

概要:

firebase v9で、Googleログインする例となります。

  • 今回は、リダイレクト方式(signInWithRedirect) です。

構成

  • react 17
  • firebase: 9.6.1

関連

認証の手順

  • ログインページを開き、Loginボタン押す

  • ホスティング画面に、リダイレクトされる。Googleアカウント指定

  • 再度、ログインにリダイレクトされ。ユーザー認証等を取得する

参考のコード

https://gist.github.com/kuc-arc-f/c46829fd1c4137d8fcb518f264cdbc7d

  • Login.tsx

  • initializeApp等は、別ファイルで実行してます (.env等からAPI keyなど設定)

  • ログインボタンを押すと、signInWithRedirectで。アカウント選択へ遷移

  • getRedirectResult: アカウント選択画面から、元のログイン画面に移動され。
    resultからユーザー情報を取得

  • onAuthStateChanged : 認証済か判定する。

Login.tsx
import React from 'react';
import { useEffect } from 'react';
import {auth} from '../../firebase';
import { onAuthStateChanged } from "firebase/auth";
//import { getAuth, signInWithRedirect } from "firebase/auth";
import { signInWithRedirect } from "firebase/auth";
import { getRedirectResult, GoogleAuthProvider } from "firebase/auth";

import { signOut } from 'firebase/auth'

const Login = () => {
  const provider = new GoogleAuthProvider();
  const clickLogin = function(){
    signInWithRedirect(auth, provider);
  }
  //
  useEffect(() => {
    getRedirectResult(auth)
    .then((result) => {
console.log(result);
      if(result !== null){
        const credential = GoogleAuthProvider.credentialFromResult(result);
        const token = credential.accessToken;
      console.log(token);
        // The signed-in user info.
        const user = result.user;
      console.log(user);
      console.log(user.uid);
      }
    }).catch((error) => {
      console.error(error);
      // Handle Errors here.
      const errorCode = error.code;
      const errorMessage = error.message;
      const email = error.email;
      console.error(errorCode);
      console.error(errorMessage);
      console.error(email);
      // The AuthCredential type that was used.
      //const credential = GoogleAuthProvider.credentialFromError(error);
    });    
  },[]);

  const checkLogint = function(){
    onAuthStateChanged(auth, (user) => {
      if (user) {
        const uid = user.uid;
        const email = user.email;
console.log(uid);
console.log(email);
      } else {
        console.log("signed out");
      }
    });
  }
  checkLogint();
  const clickLogout = async function (){
    signOut(auth).then(()=>{
      console.log("ログアウトしました");
    })
    .catch( (error)=>{
      console.log(`ログアウト時にエラーが発生しました (${error})`);
    });
  }  

  return (
    <div>
      <h1>ログイン Google</h1>
      <div>
        <button onClick={() => clickLogin()}>Login</button>
      </div>
      <hr />
      <hr />
      <button onClick={() => clickLogout()}>Logout</button>
    </div>
  );
};

export default Login

関連のページ

  • 前のメール認証です

https://zenn.dev/knaka0209/articles/9472e94612a6f0

Discussion