firebaseui-web | FirebaseUI is an open-source JavaScript library for Web that provides simple, customizable UI bindin | Authentication library

Im currently prototyping VueJS based a sign-in flow with Firebase Auth and the web widget library firebaseui-web.

After successful authentication (either password or google provider) the widget loading bar is endlessly repeating and firebaseui-web does not fire its signInSuccessWithAuthResult callback. But the network calls to identitytoolkit.googleapis.com clearly seem to have my user identified and authenticated (see screenshot)

The config object looks like this:

I spent way too much time with odd results with Firebase Auth UI. Note: I'm working in Sveltekit, so for the Auth UI I'm using Firebase Auth v8. I know folks are working on the github UI for v9, but at the time of this stackoverflow submission:

https://firebase.google.com/docs/auth/web/firebaseui

I'm new at React and NextJS but I'd like to use some authentication service for my NextJS web application for managing user accounts.

I'd like to use the pre-made user login we all know and love which contains an all in one solution for logging in with Google, Facebook, Github, email, etc.

Instructions I've followed:

• https://firebase.google.com/docs/auth/web/firebaseui?authuser=0
• https://firebaseopensource.com/projects/firebase/firebaseui-web/

But I'm having trouble with how to integrate this snippet into my own NextJS code. I'm not sure where to place certain tags. Here is the code snippet I'd like to emulate which creates a config and passes the object in ui.start() (Which I'm not sure where to place for NextJS):

I am using FirebaseUI React Components (https://github.com/firebase/firebaseui-web-react) to implement FirebaseUI Auth in a React app, which has previously worked without any issues. However, I recently upgraded Firebase to v9, and now when I try to install FirebaseUI React Components I receive a dependency conflict. Specifically, when I try:

I recently updated to firebase 8, and related deps including firebaseui 4.8.1 (I have tried several versions, they all give me this error). It loads a login box, but when trying to enter creds or create a new user, I get this error:

updateCurrentUser failed: First argument "user" must be an instance of Firebase User or null.

How can I restore the auth functionality?

firebase.js

I am trying to create simple sign-in flow using firebase-ui. I am using google as my authentication. I am following instructions from https://github.com/firebase/firebaseui-web-react

This is my src/login.js

Is there a way to override the CSS without rebuilding the entire FirebaseUI? I need to change the purple colors in the form below. I am not using mobile. I just have the script tag bringing the CSS and JavaScript in for FirebaseUI from the CDN.

Want to override the colors using a style tag in the html of the page. Don't want to fork, change deploy and now have to maintain more code. :)

I have this link to the css but can't figure out which property is controlling the color. https://github.com/firebase/firebaseui-web/blob/master/stylesheet/firebase-ui.css

Here is the github project for reference: https://github.com/firebase/firebaseui-web

Referring to this official example from the Next.js github that shows using firebase auth with next.

Many projects I study, at some point use createUserWithEmailAndPassword. With this they can **use the user credentials to do things like creating a new document in a 'users' collection in a firestore database. This stack answer and this tutorial refer to this method.

The example I linked to, (i think) uses firebase-ui - the auth part of my code looks like this:

I was following using-firebaseauth-with-local-state to implement authentication in my react app but I am using functional components and hooks. How am I supposed to implement the componentDidMount() and componentWillUnmount()?

Here is the code I have in the Login.jsx component: