Hey Everyone! Important note for those starting out a new Firebase project below. This video is using the v8 version of Firebase. Google has recently released a v9 version of Firebase that is more modular and optimized. You can still follow along this tutorial, a lot of it is still relevant. However some of the code snippets you'll find will be slightly different/outdated, with the new v9 version of Firebase.

Honestly mate this is so good, a fast and concise video I can revisit whenever I want to start a new Next/Firebase project. Personally I love this fast informative videos like Fireship does but I imagine they require a lot of editing so don't feel pressure to make all of them like this

This is already out of date in 2023: error - TypeError: Cannot read properties of undefined (reading 'apps')

Jarrod! Amazing video! I'm starting to find "my" stack and this is spot on.

I get a SyntaxError: Cannot use import statement outside a module error when deploying functions

Getting error - Module not found: Can't resolve firebaseui/StyledFirebaseAuth when I follow these steps

This was fantastic. Thanks a lot

Great video! thanks so much! you covered so much in such a little amount of time!

Right to the point! amazing. Good job Jarrod! Thanks for sharing it.

No idea why so many people add the user to the db client side. Fb functions is the best way to do this well done.

I wonder if exposing envs with api keys to the browser via NEXT_PUBLIC prefix is a good idea. It will be inlined in your JS bundle and thus available for public eyes. Without this prefix it won't work tho. Any idea how to handle this issue?

Best tutorial on youtube

good work! excellent video and explanation!

why did you use cloud functions for signup? couldn't you "manually" create a document when user clicks on the sign up button?

Great tutorial. Fast paced

Great video man. Surely helped a lot, thanks.

This is really great content, this was exactly what I was looking!

Thanks so much for the video!

@4:14 Are you using some sort of key command/plugin to convert the config values into Next config values when pasting into the env.local file? Or did you just edit the video or am i a complete idiot? (bit of both perhaps)

Great video, I keep getting this error if anyone could help me: ReferenceError: Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization webpack default export being firebase at firebaseClient

4:05 NEXT_PUBLIC_* vars are available in the browser - that's the whole purpose of prefixing them with NEXT_PUBLIC_.

Thank you!

Thanks your video helped me a lot

Thanks, great tutorial!

Thank you so so much

I am a year late, but WOW, what a great tutorial!

Thank you so much!!!

Is there anyway to use this method for a like button? I would need to make the like/unlike unique to the post ID

1:08 YOU BEAST

How could I do it so that I use one button instead of two. Like a heart button for example. A ternary statement that if the user has "no" you turn it yes and vice versa. edit : I just figured it out. My next problem is that I'm using this method to make likes on some cards. The thing is that each card is unique. This method makes all card have the like... any way I can make them different?

Ok. Chat GPT solved in a second all the issues about the outdated stuff related to firebase and FirebaseUI for me. What I don't understand yet is why you used functions to manage the users collection. Is it there any particular reason to do it so? Isn't not secure to handle it like the votes collection?

Thank you!!!!!

Thanks a ton!

I cannot make firebasui work for some silly css and node modules error

A question though, why do we need cloud function to create user? We can simply create it like we were doing for vote document right?

Wonderful video .If you deploy this app on vercel. Will it work fine ?

I get this error from the clientApp file "TypeError: Cannot read properties of undefined (reading 'apps')". anyone has that too?

AS this video has 2 years, I cant make work. He uses import firebase from "../firebase/clientApp"; but when I want to use it firebase is undefined. Someone can help to solve this issue? Thanks.

I'm using TypeScript, and at 9:01 , there is an error Argument of type 'CollectionReference' is not assignable to parameter of type 'Query'. Type 'CollectionReference' is missing the following properties from type 'Query': converter, typets(2345) I don't know how to fix it. Anyone knows?

Thanks for the video, how to pre render the votes list using SSR after each vote?

Hey Jarrod I just came across an article about how this current method exposes our env to browser which isn't secure. Is there any secure method to do so?

Upto Auth - so far so good. Except, if you have 'Block 3rd party Cookies' set in Chrome Settings you cannot login with either Github or Google in my case.

Nice tutorial but understand that you can’t deploy nextjs app into firebase hosting or is there a way? Alternative to publish the app?

Hiya, When I set up the .env.local file and put 'process.env.VARIABLE_NAME'. I just get an error saying, the API key is invalid. All the credentials for me are correct. Can you help?

Nice

THX

Hi Jarrod! I need your help big time mate. I recently tried to deploy my app to vercel, but I got an error. This error is because when I perform the deploy, vercel goes and looks at my /functions/ directory, tries to build, and cannot find a module in /functions/src/index.ts, because of course it's not present in /package.json Anyhow, appart from the obvious solution of git ignoring the functions directory, so that vercel wouldn't even look at it, I would like to know if there's a proper solution to this, and I think you might know one since I saw in your project's repo that you are, in fact, pushing the functions/ directory to github, and therefore deploying with vercel with it. Thanks so much in advance!

Is this tutorial still valid for next.js vs 13.1?

firebase ui not working with React v18 :/

Shortest tutorial ever wow

Consider moving a bit slower next time however great video but I didn't enjoyed it to be honest

Pineapple doesn't belong on Pizza dislike

God, Hooks are so horrible

V9 version of firebase.apps.length : import { getApps, initializeApp } from "firebase/app"; if (getApps().length < 1) { initializeApp(firebaseConfig); // Initialize other firebase products here } ^ so you dont have to stack overflow lol

using firebase.firestore().collection("votes") seems a bit cumbersome, what's the done thing...export this collection name from the clientApp.tsx file?