NextJS + Firebase Tutorial 🔥 // Hooks, Firestore, Authentication & Functions!

Поділитися
Вставка
  • Опубліковано 13 гру 2024

КОМЕНТАРІ • 104

  • @JarrodWatts
    @JarrodWatts  3 роки тому +20

    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.

    • @hirosyee
      @hirosyee 3 роки тому +4

      What are changes you already know ??

    • @yellowbonbon1
      @yellowbonbon1 3 роки тому

      @@hirosyee same question

    • @JohnBuildWebsites
      @JohnBuildWebsites 2 роки тому +1

      FirebaseUI is incompatible with v9 version of firebase

    • @JohnBuildWebsites
      @JohnBuildWebsites 2 роки тому

      @Bagshot Thanks - I had similar issues trying to follow this tutorial so thought best to share. Glad it was worth the time.

    • @RawFatGod
      @RawFatGod 2 роки тому

      Thanks for letting us know.

  • @outis99
    @outis99 3 роки тому +27

    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

    • @JarrodWatts
      @JarrodWatts  3 роки тому +8

      Thanks so much! Definitely takes a bit of time to edit them together, but I have taken a lot of inspiration from Fireship as I love his style of videos too :)

  • @codelabspro
    @codelabspro 2 роки тому +3

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

  • @cryptodev2615
    @cryptodev2615 3 роки тому +8

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

    • @markyun8606
      @markyun8606 2 роки тому

      I am having same error, have you find out a solution?

  • @denosorus
    @denosorus 2 роки тому

    Best tutorial on youtube

  • @IvanKleshnin
    @IvanKleshnin 2 роки тому +1

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

  • @alexwarendh
    @alexwarendh 3 роки тому +3

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

    • @JarrodWatts
      @JarrodWatts  3 роки тому +1

      Thanks so much Alexander! It's such a fun stack to work with, I'm using it for my current project as well, hoping to make some more firebase + Next.js content soon too!

    • @alexwarendh
      @alexwarendh 3 роки тому

      @@JarrodWatts Looking forward to even more content! I really appreciate the saas perspective of it all as well.

  • @cristiankeibersbardelotto
    @cristiankeibersbardelotto 6 місяців тому

    good work!
    excellent video and explanation!

  • @GungooseHonk
    @GungooseHonk 2 роки тому +4

    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?

    • @No_Name_Found_1
      @No_Name_Found_1 2 роки тому

      Running into the same issue. You can use JWT in the middleware to generate your own access token and using this in the application but will lose tha ability to use Google SIgn In ect...

  • @ProgramowaniePatrykKarpinski
    @ProgramowaniePatrykKarpinski Рік тому +4

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

  • @thekanimation
    @thekanimation 3 роки тому +1

    This was fantastic. Thanks a lot

  • @Archbishop-Desmond-Tutu
    @Archbishop-Desmond-Tutu 2 роки тому

    Great tutorial. Fast paced

  • @williambjork2777
    @williambjork2777 2 роки тому +2

    @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)

    • @Nano-hb5kf
      @Nano-hb5kf 4 місяці тому

      have you find out? i'm in the same situation😂

    • @williambjork2777
      @williambjork2777 4 місяці тому

      @@Nano-hb5kf Dont remember lol. But pretty sure I just wrote the env variables by hand and copied the values from my firebase account one by one

  • @isadarc11
    @isadarc11 2 роки тому

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

  • @lonesomesam
    @lonesomesam 2 роки тому

    Great video man. Surely helped a lot, thanks.

  • @davidlintin
    @davidlintin Рік тому

    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.

  • @saeedet19
    @saeedet19 3 роки тому

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

  • @LatinoWebStudio
    @LatinoWebStudio 2 роки тому

    Thanks so much for the video!

  • @JonathanIhm
    @JonathanIhm 3 роки тому

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

    • @JarrodWatts
      @JarrodWatts  3 роки тому

      Thank you so much Jonathan! That has made my day :-)

  • @jawyor-k3t
    @jawyor-k3t 5 місяців тому

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

  • @AI913
    @AI913 Рік тому

    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?

  • @guilhermemoraferia
    @guilhermemoraferia 2 роки тому +2

    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

    • @daylightismine1718
      @daylightismine1718 2 роки тому

      I also get this error and have no idea what to do. Did you figure it out?

    • @guilhermemoraferia
      @guilhermemoraferia 2 роки тому

      @@daylightismine1718 I sort of magically started working after a while idk why, maybe it had something todo with cache or sm, what I suggest is you try and restart your PC, that might work.

  • @abhishekvishwakarma9045
    @abhishekvishwakarma9045 3 роки тому

    Thanks your video helped me a lot

    • @JarrodWatts
      @JarrodWatts  3 роки тому

      Thanks for letting me know Abhishek, glad it helped!

  • @xExcisionx
    @xExcisionx 3 роки тому

    Thanks, great tutorial!

    • @JarrodWatts
      @JarrodWatts  3 роки тому

      Thank you Ruben! Really glad you liked it!

  • @shawn-skull
    @shawn-skull Рік тому +1

    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?

  • @magmalife7330
    @magmalife7330 3 роки тому

    1:08 YOU BEAST

  • @omfj
    @omfj 2 роки тому

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

  • @momenwadood1342
    @momenwadood1342 2 роки тому

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

  • @takesomecoffee2363
    @takesomecoffee2363 3 роки тому +2

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

    • @hesamalavi9
      @hesamalavi9 3 роки тому +1

      use import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
      in your auth.js file instead of the import in the tutorial

    • @JarrodWatts
      @JarrodWatts  3 роки тому +2

      @@hesamalavi9 Thanks mate! If it helps, the source code for the Auth file is here too: github.com/jarrodwatts/pineapple/blob/main/components/Auth.tsx

    • @hesamalavi9
      @hesamalavi9 3 роки тому

      @@JarrodWatts Thank you mate for this great video

    • @jakubkurdziel2407
      @jakubkurdziel2407 3 роки тому

      The same problem, thanks for resolve

    • @cryptodev2615
      @cryptodev2615 3 роки тому +1

      @@hesamalavi9 thanks so much for the fix ✌

  • @BetterTechSol
    @BetterTechSol 10 місяців тому

    Thank you!

  • @Moochers
    @Moochers 2 роки тому

    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?

  • @Deepakguptasky
    @Deepakguptasky 2 роки тому

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

  • @Moochers
    @Moochers 2 роки тому

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

  • @bobbyLovesTech
    @bobbyLovesTech 3 роки тому

    Thank you so much!!!

  • @raiyanthedeveloper
    @raiyanthedeveloper 2 роки тому

    Thank you so so much

  • @glitchinthematrix3934
    @glitchinthematrix3934 3 роки тому +1

    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?

    • @JarrodWatts
      @JarrodWatts  3 роки тому

      Hey would you mind sending me the article for me to take a look at?

  • @chinmayabisoi3890
    @chinmayabisoi3890 Рік тому

    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?

    • @theceohq
      @theceohq 10 місяців тому

      You could, but it's not recommended. The main reason is that you risk exposing your database configuration and credentials to end-users if you create it via the front-end. Additionally, cloud functions allow you to trigger other side-effects, sanitise/format user data, etc.

  • @mmareplays4610
    @mmareplays4610 2 роки тому +1

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

  • @Archicuus
    @Archicuus 3 роки тому +1

    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?

    • @JarrodWatts
      @JarrodWatts  3 роки тому

      Hey, sure I can try my best to help. Where are you seeing that error - when it's deployed, or just on your local environment?

    • @radhee9554
      @radhee9554 3 роки тому

      @@JarrodWatts on local environment

    • @JarrodWatts
      @JarrodWatts  3 роки тому

      Do you have NEXT_PUBLIC at the beginning of your environment variable name?

    • @radhee9554
      @radhee9554 3 роки тому +1

      @@JarrodWatts yes. Brother run npm again and it worked fine

    • @JarrodWatts
      @JarrodWatts  3 роки тому

      @@radhee9554 Cool - glad to hear you got it working

  • @nicobonder
    @nicobonder Рік тому

    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.

  • @tomascarignano5002
    @tomascarignano5002 2 роки тому

    Thank you!!!!!

  • @robin9436
    @robin9436 3 роки тому

    Thanks a ton!

    • @JarrodWatts
      @JarrodWatts  3 роки тому

      No worries, glad you liked it and thanks for the kind comment :)

  • @LEDsellers
    @LEDsellers Рік тому

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

  • @CesarSuareztrujillo
    @CesarSuareztrujillo 2 роки тому

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

    • @spencersablan8765
      @spencersablan8765 2 роки тому

      Hey! I there is a solution to deploy on firebase! Here's a couple articles that helped me out a ton:
      dev.to/rowaxl/what-i-struggled-with-next-js-using-firebase-hosting-and-enable-ssr-4e67
      medium.com/nerd-for-tech/lets-deploy-a-next-js-app-with-firebase-hosting-e070b3aecd04

  • @tomascarignano5002
    @tomascarignano5002 2 роки тому

    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!

  • @matt-analoguelife
    @matt-analoguelife 3 роки тому +2

    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.

    • @JarrodWatts
      @JarrodWatts  3 роки тому +1

      Good to hear Matthew! That's an interesting point, would you normally have 3rd party cookies disabled for blocking tracking/ads?

  • @DaWizardOfOz7
    @DaWizardOfOz7 Рік тому

    firebase ui not working with React v18 :/

  • @SamyarBorder
    @SamyarBorder 3 роки тому

    THX

    • @JarrodWatts
      @JarrodWatts  3 роки тому +1

      No worries! Thanks for checking it out :)

    • @SamyarBorder
      @SamyarBorder 3 роки тому

      @@JarrodWatts ❤

  • @maxthestranger
    @maxthestranger 3 роки тому

    Nice

  • @scorpion32
    @scorpion32 3 роки тому

    Shortest tutorial ever wow

    • @JarrodWatts
      @JarrodWatts  3 роки тому +1

      Would you prefer them to be longer? Or do you like this pace?

    • @JeanMarcSkopek
      @JeanMarcSkopek 3 роки тому

      @@JarrodWatts It's awesome! You cover a ton of ground really quickly. Makes it a lot of fun to watch the first time round, and then I can rewatch and pause as I go from step to step. About to try that now with this project :)

    • @JarrodWatts
      @JarrodWatts  3 роки тому +1

      Thanks! That's exactly what I'm hoping for :)

  • @cleverengineer2410
    @cleverengineer2410 Рік тому +1

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

  • @Molla_Mahir
    @Molla_Mahir 8 місяців тому +1

    Pineapple doesn't belong on Pizza dislike

  • @LarsRyeJeppesen
    @LarsRyeJeppesen 2 роки тому

    God, Hooks are so horrible

  • @Tyler-zb6ec
    @Tyler-zb6ec 2 роки тому +2

    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

  • @matthewbeardsley7004
    @matthewbeardsley7004 2 роки тому

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