Open
Description
[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:
- Create a new Next.Js 13.5 application.
- Creating a new Firebase project and initializing app in the utils Firebase file.
- Setting firebaseui in client components.
- 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;