📚

[Next.js] nextauth v4でのfirebase(SDK v9) authentication認証(API Routeで)

2021/09/26に公開

Firebase

Next.js

NextAuth

tech

最近フロントエンドちょっとやってるので書いてみる

nextauth v4のfirebase adapterを使ったらエラーでサーバーが起動しないので仕方なくapi-routeでcredencialを渡して、firebase authenticationと連携させた

細かい解説はしていません。あとで時間と需要があれば書きます
OAuth周りはnextauthに任せて、ユーザーの永続化だけfirebaseでやる想定です
Google認証のみです。
firebaseの認証UIを使わない
nextauthとfirebaseの基本的な初期設定は済んでいる想定です

手を抜くためにnextauthのexample repositoryをcloneしてくる

結論として先にコード載せます

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
// import AppleProvider from "next-auth/providers/apple"
import { GoogleAuthProvider, signInWithCredential } from "firebase/auth";

import { auth } from "lib/firebase";
import { Session } from "inspector";

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_ID as string,
      clientSecret: process.env.GOOGLE_SECRET as string,
    }),
  ],
  secret: process.env.SECRET,
  session: {
    jwt: true,
  },

  jwt: {
    secret: process.env.SECRET,
  },
  pages: {},
  callbacks: {
    async signIn({ credentials, account, user }) {
      try {
        if (account.provider === "google") {
          const cred = GoogleAuthProvider.credential(account.id_token);
          const result = await signInWithCredential(auth, cred);
          return true;
        }
        return false;
      } catch (e) {
        console.error(e);
        return false;
      }
    },
  },
  events: {},
  theme: "light",
  debug: process.env.NODE_ENV !== "production",
});

callbackのsignin部分を変更しています

クライアントサイド

import { Button } from "@chakra-ui/react";
import { signIn, signOut, useSession } from "next-auth/react";
import Layout from "../components/shared/Layout";

function Page() {
  const { data: session } = useSession();
  return (
    <Layout footer className="m-6 mb-40">
      <h1>NextAuth.js Example</h1>
      <p>
        This is an example site to demonstrate how to use{" "}
        <a href={`https://next-auth.js.org`}>NextAuth.js</a> for authentication.
      </p>
      {session?.user ? (
        <Button colorScheme="teal" onClick={() => signOut()}>
          signout
        </Button>
      ) : (
        <Button colorScheme="teal" onClick={() => signIn("google")}>
          Sing in with Google
        </Button>
      )}
    </Layout>
  );
}
export default Page;

下のコード部分でサインインできます

<Button colorScheme="teal" onClick={() => signIn("google")}>
  Sing in with Google
</Button>

順次更新していきます
質問があればください

次は最近増えてるGoogleのOne Tap sign inでも書こうかな

zenn cliすごい。。

テンプレートよければ使ってください

yarn create next-app --typescript test -e https://github.com/quantum-box/nextjs-lp-template

GitHubで編集を提案

手を抜くためにnextauthのexample repositoryをcloneしてくる

クライアントサイド

テンプレートよければ使ってください

Discussion