【Next.js】Firebase AuthenticationでGoogle認証

Next.jsとFirebase AuthenticationでGoogle認証を行いたい

こちらの記事が参考になった

qiita.com

手順

• Firebase設定
• firebaseのインストール
• コンテクストを使用して認証済みユーザをコンポーネント間で共有する
• _app.jsでページ初期化時にAuthProviderをラップする
• page内でそのコンテクストを利用する

Firebase側の設定、firebaseのインストールは済んでいるので割愛する

コンテクストを使用して認証済みユーザをコンポーネント間で共有する

コンテクストオブジェクトを作成する

// auth.js
const AuthContext = createContext({ currentUser: undefined });

作成したコンテクストオブジェクトにはプロバイダコンポーネントが付属している
これによりコンシューマコンポーネントはコンテクストの変更を購読することができる

// auth.js
<AuthContext.Provider value={{ currentUser: currentUser }}>

このコンテキスト内では、useStateでcurrentUserを用意し、useEffectで現在ログインしているユーザーを取得したあとcurrentUserを更新する

// auth.js
  const [currentUser, setCurrentUser] = useState(
    undefined
  );

  useEffect(() => {
    firebase.auth().onAuthStateChanged((user) => {
      setCurrentUser(user);
    });
  }, []);

_app.jsでページ初期化時にComponent をAuthProviderでラップする

コンテキストを利用するため、Component をAuthProviderでラップする

       <AuthProvider>
          <Component {...pageProps} />
        </AuthProvider>

page内でそのコンテクストを利用する

AuthContextオブジェクトを受け取り、そのコンテクストの現在値（currentUser）を取得する

// login.js
  const { currentUser } = useContext(AuthContext);

他参考

https://ja.reactjs.org/docs/context.html

https://ja.reactjs.org/docs/hooks-reference.html#useeffect

https://firebase.google.com/docs/auth/web/manage-users