Google SignIn

Authenticate via OAuth with Google SignIn

https://fireship.io/courses/react-next-firebase/auth-google-signin/

Im trying to run this but the if (!firebase.apps.length) { firebase.initializeApp(firebaseConfig) } wont work it says it cant read properties of apps

cannot import firebase hence firebase is undefined.

I had the same problem as above. It seemed to be failing to find the firebase/app module and then got upset when testing for the length.

For me I was able to work around this by downgrading from firebase v9 to the v8 with the following. Things worked after that. Seems like there were breaking changes in v9 for this tutorial.

npm rm firebase
npm i [email protected]

I'm having the same issues as the other 3 commenters. I love your videos Jeff, but this course is dated.

Hey guys i figured it out. All you have to do is Change your imports from "import firebase from 'firebase/app' " to "import firebase from 'firebase/compat/app' ". You have to add the compat between firebase and whatever directory you are importing from. Everything works great now! :) Best of luck!

Also, if you close out of the authentication before you complete, you will get an error that crashes the app. All you have to do is wrap your async function in a try catch block. where you pass the error through the catch block like this. try { await auth.signInWithPopup(googleAuthProvider); } catch (err) { console.log(err); }

I am getting this error when trying to load /enter -- TypeError: firebase_compat_app__WEBPACK_IMPORTED_MODULE_0__.default.auth.googleAuthProvider is not a constructor at eval (webpack-internal:///./lib/firebase.js:37:28)

Nevermind above comment, g in google needs to be 'G'oogle.

HEADS UP - Anyone reading this past today - Refer back to the bottom of the #8 Firebase Setup to get around teh firebase 9 errors. There's a complete write up in Github. https://fireship.io/courses/react-next-firebase/app-next-firebase/