Firebase Web UI does not work with Next JS 13.5 version onwards (i.e. 13.5.x)

[ShivangM]

[REQUIRED] Describe your environment

• Operating System version: Windows 10
• Browser version: Microsoft Edge (Version 118.0.2088.57)
• Firebase UI version: 6.1.0
• Firebase SDK version: 10.5.0

[REQUIRED] Describe the problem

I am trying to use Firebase web UI for my application with Next.JS 13.5.6 but it seems like Firebase UI does not work well with the 13.5 version onwards. When I am trying to sign in, it completes but nothing happens. I am redirected nor the signInSuccessWithAuthResult callback is run. I also checked if there was an error with the signInFailure callback but it was clean.

When I downgraded the Next JS version below 13.5 everything seemed to work fine. But I want to run it with the latest version.

Steps to reproduce:

1. Create a new Next.Js 13.5 application.
2. Creating a new Firebase project and initializing app in the utils Firebase file.
3. Setting firebaseui in client components.
4. Try to sign in.

Relevant Code:

'use client';
import { useEffect, useCallback } from 'react';
import 'firebaseui/dist/firebaseui.css';
import { auth } from '@/utils/firebase';
import { EmailAuthProvider, GoogleAuthProvider } from 'firebase/auth';

const SignIn = () => {
  const loadFirebaseui = useCallback(async () => {
    const firebaseui = await import('firebaseui');
    const firebaseUi = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(auth);

    const uiConfig: firebaseui.auth.Config = {
      signInSuccessUrl: '/',
      signInOptions: [
        // Leave the lines as is for the providers you want to offer your users.
        GoogleAuthProvider.PROVIDER_ID,
        // firebase.auth.FacebookAuthProvider.PROVIDER_ID,
        // firebase.auth.TwitterAuthProvider.PROVIDER_ID,
        // firebase.auth.GithubAuthProvider.PROVIDER_ID,
        EmailAuthProvider.PROVIDER_ID,
      ],

      tosUrl: 'tos',
      privacyPolicyUrl: 'privacy-policy',
      siteName: "WorkInn",
      callbacks: {
        signInSuccessWithAuthResult: (authResult: any) => {
          if (authResult) {
            console.log(authResult)
            return true;
          }
          return false;
        },
        signInFailure: (error: any) => {
          console.error(error);
          return Promise.resolve();
        },
        uiShown: () => {
          console.log('UI shown');
        }
      }
    };

    firebaseUi.start('#firebaseui-auth-container', uiConfig);
  }, []);

  useEffect(() => {
    loadFirebaseui();
  }, []);

  return (
    <main className="container mx-auto py-32">
      <div id="firebaseui-auth-container" />
    </main>
  );
};

export default SignIn;

[HYACCCINT]

Hi, thanks for raising the issue, I had some trouble reproducing the bug using Firebse SDK v10.7.0, could you try updating the SDK version and screenshot the error message?