FirebaseUI Sign in tutorial (React + @Firebase v10)

Firebase is an app development platform hosted by Google, that uses google cloud under the hood. FirebaseUI is an SDK made to simplify the signing-in process.

Perfect for beginners and seasoned developers alike, this video will showcase the simplicity and efficiency of setting up Firebase UI with React, even with the latest breaking changes to some of its features.

Stay tuned for more tutorials on Firebase, React, and the latest in web development by subscribing to my channel. Hit the bell icon to get notified about my latest videos.

timestamps:
0:00 Intro
0:42 requirements
0:52 setup
3:50 login & home routing
6:42 Login logic
10:33 Home logic
12:03 Enable login from firebase
14:52 Fix Google log in
16:24 Fix Email log in
18:23 Summary

[YuriDavello-ib]

great tutorial! I was strugglin with this email enumeration protection.

[xyz-eyul]

thanks for this tutorial... i was facing a lot of issues with firebase login

[archimedepitagorico]

Hi first of all wanted to thank you for the video as it is great and your explanations definitely helped me as a new React/ Vite user. I had a couple of questions though:

1) I realised that if you are a new user and you utilize the button to sign in with Google, the account isn't actually created but probably just authorized and it also redirects you back to the login page which is I guess not ideal. Also, this means that it only creates and adds the Google account once the user signs in through the Google.YOLO pop-up and then they are also redirected to the Sign Out page.

2) I tried implementing a Facebook and GitHub way of signing in, and both face the same issue with Google, where you complete the registration process though their website but once you are redirected to the login page the account isn't actually created. Plus, because there is no fancy Facebook pop-up that Google has, you cant actually sign in with either Github or Facebook.

I'd love to know how to fix this as I have been trying for the pat couple of days. Thanks again though for the tutorial.

[Castisto]

This vid helped alot thanks! Do you have any vids on passwordless email link authentication? (firebase documentation/firebaseui-web documentation is so bad imo 😅)

[willblears]

is this dependant on credentialHelper being enabled? when I disable credentialHelper on yours or my own implementation login seems to fail and just returns me to login page

[STABLclub]

I seem to get a 20 second delay on mobile web only after the redirect from google sign on. Takes about 20 seconds for the onAuthStateChanged event to fire. Doesn't happen on desktop