🔥

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

に公開
Firebase
Next.js
Authentication
tech

前回の記事でログインができるようになったので、次のステップへ

useContext で認証情報をアプリ内全体で受け取れるようにする

まずは認証情報を export

src/service/firebase.js
export const auth = firebase.auth();



以下、表題を実現するコードとその説明

  • AuthProviders.jsx を作成し
  • auth はその中で import
  • createContext を AuthContext へ代入
  • useEffect によりコンポーネントのマウント時に auth の onAuthStateChanged を発火
  • onAuthStateChanged は setCurrentUser でユーザー情報を 初期値の null に上書きする形で currentUser に保持
  • return されるのは ユーザー情報である currentUser を value として持っている AuthContext.Provider
  • 引数 props として渡された要素を AuthContext.Provider の 子要素 children として受け取るので、結果として子要素にユーザー情報が渡される

と自分は理解しています

src/providers/AuthProviders.jsx
import { useState, useEffect, createContext } from "react";
import { auth } from "../service/firebase";

export const AuthContext = createContext();

export const AuthProvider = (props) => {
  const [currentUser, setCurrentUser] = useState(null);
  useEffect(() => {
    auth.onAuthStateChanged(setCurrentUser);
  }, []);
  return (
    <AuthContext.Provider value={{ currentUser }}>
      {props.children}
    </AuthContext.Provider>
  );
};

_App で AuthProvider を import

_App の <props.Component {...props.pageProps} /> を AuthProvider でラップすることで、 グローバルに AuthProvider が保持している認証情報を読み込めるようにする

余談ですが、私はいくつかの理由により、named import、 Arrow function、 明示的な props表記が好きなので、コードはそのようになっています

_App.jsx
import "../src/service/firebase";
import { AuthProvider } from "../src/providers/AuthProviders";

const MyApp = (props) => {
  return (
    <AuthProvider>
      <props.Component {...props.pageProps} />
    </AuthProvider>
  );
};

export default MyApp;

うまくいったか確認 👀

とりあえず Header.jsx component で import して console.log に表示させてみる

src/components/Header.jsx
import { useContext } from "react";
import { signInWithGoogle } from "../service/firebase";
import { AuthContext } from "../providers/AuthProviders";

export const Header = () => {
  const currentUser = useContext(AuthContext);
  console.log(currentUser)
  return (
    <div>
      <button onClick={signInWithGoogle}>Login</button>
    </div>
  );
};



無事 User 情報を取得
喜びの瞬間ですね✨

Login 実装完了！

Discussion