IDX Firebase Studio auth fails/timeout in front end for firebase auth

UI / UX
1

I am using Firebase Studio for full stack dev - node.js / express and Vue3.js front-end with Firebase auth

Firebase auth fails in front end Vue.js. component that uses Sign-In with google.

Network tab

getProjectConfig?key=xxxx

Correctly gets the authorised domains

And I can see

9000-idx-<my_project_id>.cluster-.cloudworkstations.dev

However, there is a timeout in auth and console logs this error (i did not close the pop-up, this message is also misleading. in view-source it is a time out (pollUserCancellation of firebase_auth.js)

auth.js:53 Error signing in with Google: FirebaseError: Firebase: Error (auth/popup-closed-by-user).
at createErrorInternal (firebase_auth.js?v=3969ca76:689:37)
at _createError (firebase_auth.js?v=3969ca76:657:10)
at firebase_auth.js?v=3969ca76:6887:25

There is no 403, and authorised domain is correctly specified in the Firebase console pointing to firebase IDX url as listed above

1 Like
2

Hey! Switch from signInWithPopUp() to signInWithRedirect(). Popups are messy and redirect flows will normally be easier to manage.

3

hi,

Thanks for looking into this. i should have mentioned, that this same set up works perfectly outside of Firebase studio. (localhost as well as prod). It is only in the firebase studio that we face this issue.
Regarding pop-ups , yes, a valid point. but for desktop we do pop-up and mobile we can do signInWithRedirect.
There is some issue specific to idx firebase studio.