-
Notifications
You must be signed in to change notification settings - Fork 289
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Initialization takes 30 seconds with the error "Uncaught TypeError: u[v] is not a function" in Chrome for mobile devices #711
Comments
I noticed that even if I added Example using onAuthStateChanged(with emulator)import { FC, useEffect } from "react";
import { AuthAction, useUser, withUser } from "next-firebase-auth";
import { getAuth } from "firebase/auth";
const Index: FC = () => {
const currenUser = useUser();
console.log(
`currenUser.clientInitialized: ${
currenUser.clientInitialized
} (${new Date()})`
);
const auth = getAuth();
useEffect(() => {
const unsubscribeOnAuthStateChanged = auth.onAuthStateChanged(
(onAuthStateChangedUser) => {
console.log(
`onAuthStateChangedUser: ${onAuthStateChangedUser} (${new Date()})`
);
},
(error) => {
console.error("useFirebaseAuth:", error);
}
);
return () => {
unsubscribeOnAuthStateChanged();
};
}, []);
return (
<>
<p>onAuthStateChanged</p>
</>
);
};
export default withUser({
whenUnauthedBeforeInit: AuthAction.RETURN_NULL,
})(Index); Log
It takes about 30 seconds from 12:40:31 to 12:41:01. |
I'm continuing to investigate, focusing on the initialization part, but no progress has been made. I don't know if the following is related to this problem, and I may be wrong. I don't know if this is the intended behavior, but reading the comments below makes me think it's not. I confirmed this by adding log output as shown below. example codeinitAuth.js in my application( https://github.com/yosipy/yosi_sandbox/blob/main/20240201_next_firebase_auth_example_for_get_apps/utils/initAuth.js ) @@ -1,5 +1,5 @@
/* globals window */
-import { initializeApp } from "firebase/app";
+import { getApps, initializeApp } from "firebase/app";
import { init } from "next-firebase-auth";
import absoluteUrl from "next-absolute-url";
import { getAuth, connectAuthEmulator } from "firebase/auth";
@@ -20,6 +20,9 @@ const initAuth = (useEmulator) => {
connectAuthEmulator(auth, "http://localhost:9099");
}
+ console.log(
+ `[my-app: before init({...})] getApps().length: ${getApps().length}`
+ );
// Initialize next-firebase-auth.
init({
debug: true, src/initFirebaseClientSDK.ts in next-firebase-auth @@ -6,6 +6,11 @@ import logDebug from 'src/logDebug'
export default function initFirebaseClientSDK() {
const { firebaseClientInitConfig, firebaseAuthEmulatorHost, tenantId } =
getConfig()
+ console.log(
+ `[next-firebase-auth: beggining of initFirebaseClientSDK()] getApps().length: ${
+ getApps().length
+ }`
+ )
if (!getApps().length) {
if (!firebaseClientInitConfig) {
throw new Error( Run Download the React DevTools for a better development experience: https://reactjs.org/link/react-devtools
initAuth.js:23 [my-app: before init({...})] getApps().length: 1
initAuth.js:27 next-firebase-auth [init] Setting config with provided value: {debug: true, loginAPIEndpoint: '/api/login', logoutAPIEndpoint: '/api/logout', authPageURL: ƒ, appPageURL: ƒ, …}
initAuth.js:27 [next-firebase-auth: beggining of initFirebaseClientSDK()] getApps().length: 0
initAuth.js:27 next-firebase-auth [init] Initialized the Firebase JS SDK.
auth.js:35 next-firebase-auth [withUser] Calling "withUser".
websocket.js:48 [HMR] connected
index.browser.js:2 next-firebase-auth [withUser] Set user to: {id: null, email: null, emailVerified: false, tenantId: null, phoneNumber: null, …}
index.browser.js:2 next-firebase-auth [withUser] The Firebase ID token changed. New Firebase user: null
index.browser.js:2 next-firebase-auth [withUser] Calling the logout endpoint.
index.browser.js:2 next-firebase-auth [withUser] Set user to: {id: null, email: null, emailVerified: false, tenantId: null, phoneNumber: null, …}
index.browser.js:2 next-firebase-auth [withUser] Completed the auth API request.
index.browser.js:2 next-firebase-auth [withUser] Set user to: {id: null, email: null, emailVerified: false, tenantId: null, phoneNumber: null, …} |
It seems to be the same issue as the issue below. The direct cause may not be in next-firebase-auth. However, strangely, in my environment, removing the initialization process of next-firebase-auth solves the problem. |
The issue was resolved by downgrading Firebase version to 9.16.0. The solution to the issue below may have another problem. |
Also experiencing this on even outside of mobile - Desktop Safari. Desktop Chrome and Firefox work fine |
Im also experimenting the same issue. Downgrading firebase did not fixed the issue. Im still searching, but it's seems that when |
We've been fighting with this issue with basic firebase/auth and firebaseui packages (no usage of Next.js or next-firebase-auth whatsoever, but very similar symptoms). We're actually using four different firebase modules, the v8 "modular" import style:
We've found that this error seems to occur when code from multiple of these imports is evaluated at once, the modules internally load multiple instances of Google's The only way we've found to avoid this error and broken state is to dynamically import these four firebase modules, and actually import them serially with a small delay (100-200ms) in between. This seems to prevent any contention of |
Describe the bug
Initialization may take 30 seconds with the error "Uncaught TypeError: u[v] is not a function".
It doesn't happen every time, but at least once every few times.
I have confirmed that this issue occurs on Chrome for mobile devices such as Android devices. (I also reproduced it with the emulator of Chrome's developer tools for PC.) This did not occur on Chrome for PC.
I have created three examples to illustrate this problem and they are shown below. Also, the repository is https://github.com/yosipy/yosi_sandbox/tree/main/20240128_next_firebase_auth_example .
Example using onAuthStateChanged
https://github.com/yosipy/yosi_sandbox/blob/main/20240128_next_firebase_auth_example/pages/sample_on_auth_state_changed.tsx
pages/sample_on_auth_state_changed.tsx
.This icon →
Below is the log when the problem occurred.
The access occurred at approximately 10:41:51, but the onAuthStateChangedUser callback function was executed at 10:42:21.
It took about 30 seconds.
Example sign-in page
https://github.com/yosipy/yosi_sandbox/blob/main/20240128_next_firebase_auth_example/pages/sample_auth.tsx
pages/sample_auth.tsx
.This is a modification of
pages/auth.js
.3. Modify
signInOptions
incomponents/FirebaseAuth.js
to allow signing in with a Google account.This icon →
It will take about 30 seconds for the button that says
Sign in with Google
to appear.→Translation 30 seconds later→
Example of retrieving data from Firestore
https://github.com/yosipy/yosi_sandbox/blob/main/20240128_next_firebase_auth_example/pages/sample_firestore1.tsx
pages/sample_firestore1.tsx
.articles
collection.This icon →
The log will look like this:
It takes about 30 seconds to execute the fetch function (10:43:44 ~ 10:44:15).
Requests and responses to Firestore take very little time; the steps before that take time.
Putting
{ whenUnauthedBeforeInit: AuthAction.RETURN_NULL }
in the argument ofwithUser
seems to solve the problem in this repository example. However, it was not a solution for my other application (I could not reproduce it using the example from this repository)Versions
next-firebase-auth
version: "1.0.2"Firebase JS SDK (
firebase
): "9.17.1"Firebase admin SDK (
firebase-admin
): "^11.9.0"Next.js: "13.4.9"
To Reproduce
I wrote it in
Describe the bug
Expected behavior
I wrote it in
Describe the bug
Debug and error logs
Please provide debug logs or errors from
onVerifyTokenError
andonTokenRefreshError
.Additional context
Add any other context about the problem here.
The text was updated successfully, but these errors were encountered: