Next.js App Router & Auth.js (next-auth v5) に frebase auth 組み込んでみる

import * as FirebaseAuth from 'firebase/auth';
import { firebaseApp } from './app';

export const firebaseAuth = FirebaseAuth.getAuth(firebaseApp);

export const signInWithEmailAndPassword = (email: string, password: string) => {
  return FirebaseAuth.signInWithEmailAndPassword(firebaseAuth, email, password);
};

import { signIn } from '@/auth';
import { signInWithEmailAndPassword } from '@/lib/firebase/auth';

//...

      <form
        action={async (formData) => {
          'use server';

          const email = formData.get('email') as string;
          const password = formData.get('password') as string;

          const userCredentials = await signInWithEmailAndPassword(
            email,
            password
          );

          const idToken = await userCredentials.user.getIdToken();

          await signIn('credentials', { idToken });
        }}
        //...
      >
     //...

///...
        action={async (formData) => {
          'use server';

          const email = formData.get('email') as string;
          const password = formData.get('password') as string;
+          console.debug('Get email and password', { email, password });

          const userCredentials = await signInWithEmailAndPassword(
            email,
            password
          );
+          console.debug(
+            `Successfully signed in with email ${email}`,
+            userCredentials
+          );

          const idToken = await userCredentials.user.getIdToken();
+          console.debug('Get idToken', idToken);

          await signIn('credentials', { idToken });
        }}

import NextAuth from 'next-auth';
import Credentials from 'next-auth/providers/credentials';
import Google from 'next-auth/providers/google';

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [
    Google,
    Credentials({
      credentials: {
        idToken: {},
      },
      authorize: async (credentials) => {
        console.log('credentials', credentials);

        //TODO: verify idToken

        return null;
      },
    }),
  ],
});

credentials {
  idToken: 'xxxxxxxxxxxxxxx',
  callbackUrl: 'http://localhost:3000/firebase-auth-sign-in'
}

npm install firebase-admin --save

import { initializeApp } from 'firebase-admin/app';

export const adminApp = initializeApp();

import { getAuth } from 'firebase-admin/auth';
import { adminApp } from './app';

export const adminAuth = getAuth(adminApp);

GOOGLE_APPLICATION_CREDENTIALS=path/to/service-account.json

import NextAuth from 'next-auth';
import Credentials from 'next-auth/providers/credentials';
import Google from 'next-auth/providers/google';
import z from 'zod';
import { adminAuth } from './lib/firebase-admin/auth';

const credentialsSchema = z.object({
  idToken: z.string(),
});

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [
    Google,
    Credentials({
      credentials: {
        idToken: {},
      },
      authorize: async (credentials) => {
        console.debug('credentials', credentials);

        const parsed = credentialsSchema.parse(credentials);

        const decoded = await adminAuth.verifyIdToken(parsed.idToken);

        console.debug('decoded', decoded);

        return {
          id: decoded.uid,
          email: decoded.email,
          image: decoded.picture,
        };
      },
    }),
  ],
});

Module build failed: UnhandledSchemeError: Reading from "node:stream" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.

'The default Firebase app already exists. This means you called initializeApp() more than once without providing an app name as the second argument. In most cases you only need to call initializeApp() once. But if you do want to initialize multiple apps, pass a second argument to initializeApp() to give each app a unique name.'

import 'server-only';

import { getApps, initializeApp } from 'firebase-admin/app';

const [existingApp] = getApps();

export const adminApp = existingApp ?? initializeApp();

+ 'use client';

import { signInWithEmailAndPassword } from '@/lib/firebase/auth';
import { signInAction } from './_actions/sign-in-action';
import { CurrentUserView } from './_components/current-user-view';

const Page = () => {
  return (
    <div className='p-10 grid gap-y-5 justify-items-center'>
      <h1 className='text-2xl font-bold'>Firebase Auth SignIn</h1>

//...

      <form
        className='bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 w-96'
        action={async (formData) => {
          'use server';

          const email = formData.get('email') as string;
          const password = formData.get('password') as string;

          try {
            const userCredentials = await signInWithEmailPassword(
              email,
              password
            );

//...

'use server';

import { signIn } from '@/auth';
import { AuthError } from 'next-auth';

export const signInAction = async (idToken: string) => {
  try {
    await signIn('credentials', { idToken });
  } catch (error) {
    if (error instanceof AuthError) {
      console.log('AuthError', error);
      //TODO: Handle error
    }

    throw error;
  }
};

'use client';

import { signInWithEmailAndPassword } from '@/lib/firebase/auth';
import { signInAction } from './_actions/sign-in-action';

//...

      <form
        action={async (formData) => {
          const email = formData.get('email') as string;
          const password = formData.get('password') as string;

          console.debug('Get email and password', { email, password });

          const userCredentials = await signInWithEmailAndPassword(
            email,
            password
          );

          console.debug(
            `Successfully signed in with email ${email}`,
            userCredentials
          );

          const idToken = await userCredentials.user.getIdToken();

          console.debug('Get idToken', idToken);

          await signInAction(idToken);
        }}
      >


//...

'use server';

import { signOut } from '@/auth';

export const signOutAction = () => {
  return signOut();
};

'use client';

import * as FirebaseAuthLib from '@/lib/firebase/auth';
import { signOutAction } from './sign-out-action';

const handleSignOut = async () => {
  await signOutAction();
  await FirebaseAuthLib.signOut();
};

export const SignOutButton = () => {
  return (
    <button
      className='bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded'
      onClick={async () => {
        await handleSignOut();
      }}
    >
      Sign Out
    </button>
  );
};