Integration Issue with Firebase and NextAuth v5 in Next.js 14.0

[TomBell95]

Description:

I'm currently working on integrating Firebase authentication with NextAuth v5 in a Next.js 14.0 application, following the Adding Authentication guide. However, I'm encountering difficulties in getting Firebase to work alongside NextAuth for user authentication and session management.

Expected Behavior:

Users should be able to log in using Firebase authentication, and their session state should be managed by NextAuth.

Current Behavior:

I can log the user in on the server, however the client is not updated, so I when access information on the user (i.e. refreshed auth tokens), it is not available.

When i access auth.currentUser I get null

LoginForm.tsx

'use client'

const LoginForm = () => {
  // ...
  const handleLogin = async (event: React.FormEvent) => {
    event.preventDefault();
    try {
      const formData = new FormData();
      formData.append('email', email);
      formData.append('password', password);
      await signInAction(undefined, formData);
    } catch (error) {
      // handle error
    }
  };
  // ...
};

Firebase Actions (/firebase/actions.ts):

'use server';
export async function signInAction(prevState: string | undefined, formData: FormData) {
  try {
    await signIn('credentials', formData);
  } catch (error) {
    // handle error
  }
}

NextAuth (/auth.ts):

export const { auth, signIn, signOut } = NextAuth({
  providers: [
    Credentials({
      async authorize(credentials) {
        // ...
        if (parsedCredentials.success) {
          const { email, password } = parsedCredentials.data;
          const user = await firebaseSignIn(email, password);
          if (!user) return null;
          return user;
        }
        console.log('Invalid credentials');
        return null;
      },
    }),
  ],
  pages: {
    signIn: '/authentication/login',
  },
  callbacks: {
    authorized({ auth, request: { nextUrl } }) {
      try {
        const isLoggedIn = !!auth?.user
        const isOnAuthPages = nextUrl.pathname.startsWith('/authentication')
        if (!isOnAuthPages) {
          if (isLoggedIn) {
            return true
          }
          return false
        } else if (isLoggedIn) {
          return NextResponse.redirect(new URL('/', nextUrl))
        }
        return true
      } catch (error) {
        // handle error
      }
    },
});

[Adel-Alwaqfi]

If you import auth from auth.ts into your pages, you will be able to extract the email as in the following example

import { auth as AppAuth } from '@/auth';


export default async function Page() {
  const temp = await AppAuth() 
  
    return <p>Hello {temp?.user.email}</p>
}

However, this doesn't solve the problem. Even though the login and signout logic is working, the user doesn't maintain authentication by the Firebase service across pages.

[Adel-Alwaqfi]

@Samaritain225
I changed the whole thing by moving into using the firebase-admin SDK in the server action. This way I don't need to have the logged user instance. The only thing you need it to setup the firebase-admin once and that's it.

[shadiramadan]

@TomBell95 For await firebaseSignIn(email, password); are you using firebase signInWithEmailAndPassword or your own API calls?

[Samaritain225]

@Adel-Alwaqfi can you give more detail on how you proceed? I would really appreciate

[Samaritain225]

@shadiramadan I use : signInWithEmailAndPassword

[ionutcirja]

Where should I call firebase signOut? Thanks