Firebase Authentication v9 in ReactJS (google/email sign-in, custom reset password) with ChakraUI

Поделиться
HTML-код
  • Опубликовано: 31 дек 2024

Комментарии • 97

  • @akramnarejo6221
    @akramnarejo6221 3 года назад +2

    best firebase project I have come across so far with react

  • @Allrounder-cf2th
    @Allrounder-cf2th 3 года назад +1

    I don’t comment much am really happy to see this video. Am really happy to see this kind of real time scenario project.

  • @ToshisanMotonaka
    @ToshisanMotonaka 2 года назад +5

    This was mindblowingly simple yet detailed! Thank you 🙏

    • @mafiacodes
      @mafiacodes  2 года назад

      Glad it was helpful!
      Subscribe Like share

  • @AlbertGalilea-pj2uv
    @AlbertGalilea-pj2uv 3 года назад +3

    This is very helpful. I'm working on custom page to firebase reset password. Thank you sir!

    • @mafiacodes
      @mafiacodes  3 года назад

      Glad it helped!

    • @AlbertGalilea-pj2uv
      @AlbertGalilea-pj2uv 3 года назад

      @@mafiacodes Hello sir i cant cleary see what u did in 21:30, can u tell me what u copy there?

  • @preciousoluwanifemi9144
    @preciousoluwanifemi9144 2 года назад

    just use this video to implement a feature at work!. Amazing video

  • @Richard.halabi
    @Richard.halabi 2 года назад

    very good..... thanks.... better than many payed tutorials

  • @utkarshsingh4878
    @utkarshsingh4878 Год назад

    Best Video! Saved my day!

  • @khaleelas4871
    @khaleelas4871 2 года назад

    grate and clean looking for more react tutorial

  • @varunKT001
    @varunKT001 3 года назад +3

    Greatly explained man, thank you so much 😀

  • @Sidspiritual
    @Sidspiritual 3 года назад +1

    superb....keep uploading more videos

  • @sourovpaul8047
    @sourovpaul8047 2 года назад +1

    Very Helpfully

  • @sergiobeltrangalvis3009
    @sergiobeltrangalvis3009 2 года назад

    Amazing video! a lot of really usefull info

    • @mafiacodes
      @mafiacodes  2 года назад

      Subscribe like share 👍

  • @LFCROXforLIFE
    @LFCROXforLIFE Год назад

    This is a fantastic video but I am facing one issue, at @1:20:37 my path/props is showing as undefined and I cannot use it to access the state or modify the pages. I am trying not to show the login page after user has logged in, but I cannot do it since the props return undefined

  • @sutikshanmishra2061
    @sutikshanmishra2061 2 года назад +1

    WANT TO LEARN FIREBASE FROM YOU ... GREAT CONTENT EVER LOOKING FOR 🙂🙂

  • @ColabGuy
    @ColabGuy 2 года назад +1

    Thanks a lot!
    I was looking for a tutorial about how to recover the user's password and couldn't find it

  • @m4mirza584
    @m4mirza584 2 года назад

    Great Job 👍

  • @johnbosco8280
    @johnbosco8280 2 года назад

    Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'then') error on 1:31:18

  • @Bharath_Murugan
    @Bharath_Murugan 3 года назад

    Awesome video man
    Thanks for sharing this here
    can you add a series for chakra ui

  • @deonvisser2480
    @deonvisser2480 2 года назад

    Thanks, the github helped me.

  • @kaishmohammadkhan1270
    @kaishmohammadkhan1270 3 года назад +1

    Always on time..

  • @joaovitorferreira5110
    @joaovitorferreira5110 3 года назад +1

    Great tutorial!
    I'm trying to use the currentUser in the ProtectedRoute, but when the app refreshes, the currentUser becomes null initially and then currentUser's information loads back up. While the currentUser is null on refresh, the user is kicked from the profile route and redirected to the login page. I'm wondering if anyone has any suggestions on how to prevent this from happening.

    • @mafiacodes
      @mafiacodes  3 года назад +1

      I guess what you can do is that in the login page use the context to get currentuser, then current user as a dependency in useeffect monitor the status of current user if not null then redirect back to the profile page.
      Subscribe like share

    • @pintalubaf
      @pintalubaf 2 года назад

      Same here, looks like useEffect of AuthProvider is called on any page refresh, not keeping the state.

  • @CodeWithViju
    @CodeWithViju 2 года назад

    please make latest complete react firebase course including auth,firestore and much more

  • @ogunacg3387
    @ogunacg3387 2 года назад

    I have a question , I can't use useToast inside onSubmit function becuase of this error :React Hook "useToast" cannot be called inside a callback.React Hooks must be called in a React function component or a custom React Hook function; do you have any elegant way to solve the error? thank you

  • @aungmyooo9692
    @aungmyooo9692 2 года назад

    How to prevent google sign in open in new tab? And Public-facing name does not change even you change it in google provider. May I know how to fix this issue.

  • @shujathaliirfan2662
    @shujathaliirfan2662 3 года назад +2

    Very nice

  • @rahulsriram6295
    @rahulsriram6295 3 года назад +2

    Thank you! Can we also get a video to handle those redirects to and from in NextJS? Cz in NextJS we have directory based routing

    • @mafiacodes
      @mafiacodes  3 года назад

      U can handle that in the __app.js file where you get page props, make a handler there to check for authentication

  • @mr.artist486
    @mr.artist486 2 года назад

    I am using Auth0 for loggin in to my app with 'LinkedIn'. What to do after that?

  • @samsonbrody6308
    @samsonbrody6308 3 года назад

    great video my guy.. if you could do one with firebase and next js with chakra i woul be so happy hahah

    • @mafiacodes
      @mafiacodes  3 года назад

      Will try my best to do that as well.

  • @adithiyag4616
    @adithiyag4616 2 года назад

    I cant understand why even after restarting complete app(in localhost) user stays logged in

  • @adithiyag4616
    @adithiyag4616 2 года назад

    @yoursTRULY
    how can i avoid flashing of login page when we go to protected page pls help

  • @DngerCrazy
    @DngerCrazy 2 года назад

    Hoping to get some help with this trying to use this technique in my own application. I keep getting the error of uncaught in promise typeError register(...).this is not a function. Any ideas on what is happening or why?

  • @컹스컹-d9j
    @컹스컹-d9j 3 года назад

    35:18 how to make uppercase to shotcut?

  • @johnnyparsons2372
    @johnnyparsons2372 3 года назад +1

    Can you possibly add the changes with react router v6

    • @mafiacodes
      @mafiacodes  3 года назад +2

      Yep I’ll do that

    • @DaveFredkove
      @DaveFredkove 3 года назад

      +1 👍

    • @johnnyparsons2372
      @johnnyparsons2372 3 года назад

      @@mafiacodes I really need to implement router v6 do you know when this will be available

  • @ghana4925
    @ghana4925 2 года назад

    very good tutorial, How can i make a change password page for the user that is logged in?

  • @AlbertGalilea-pj2uv
    @AlbertGalilea-pj2uv 3 года назад

    Hello sir i cant cleary see what u did in 21:30, can u tell me what u copy there?

    • @mafiacodes
      @mafiacodes  3 года назад

      there was nothing to be seen, only that values should come from env

  • @PauloFabianoLanger
    @PauloFabianoLanger 3 года назад +2

    Awesome video! Thanks.
    I'm trying to implement it using Next.JS but I am struggling a bit in the ProtectedRoute part. How could I protect a next.js page?

    • @mafiacodes
      @mafiacodes  3 года назад

      Two ways serverside or client side, I would say protect client side the same way explained here

    • @PauloFabianoLanger
      @PauloFabianoLanger 3 года назад

      @@mafiacodes I see but in next.js we don't use so I blocked about it :(
      I tried using a HOC in the page component but I can't use hooks (useAuth, in this case) in a hook so it doesn't work.

  • @nawazishali274
    @nawazishali274 Год назад

    can you made video on react js authentication with jwt including interceptors and role base protected routing please make video on it

  • @hex9219
    @hex9219 2 года назад

    thanks it's awesome

  • @ig_samuelsam
    @ig_samuelsam 2 года назад

    Need a full video for your vscode setup bro

  • @khalidmohamed6705
    @khalidmohamed6705 2 года назад

    hi sire can I copy API_KEY from firebase and put it in init-firebase.js without using the .env file as am doing this for evaluation purposes only

  • @lying6624
    @lying6624 2 года назад

    It is good tutorial, but once you refresh the page there is no auth user for a second. Can you make a video about it?

  • @vpermits
    @vpermits 2 года назад +1

    As passwords are the bane of our existence, curious why more people do not use the email link (password less) provided by firebase and ditch the insecure (same one used everywhere... password, abc123... on and on:) password authentication set ups. I'm looking for a working example somewhere and not finding much.

    • @mafiacodes
      @mafiacodes  2 года назад

      well u can watch this video ruclips.net/video/72JYhSoVYPc/видео.html , though its for password reset 😃, but the same logic can be applied to make password-less login links also, see the login try it out, and let me know, else I'll make one using the same...

  • @SertanejoHitsEClassicos
    @SertanejoHitsEClassicos 3 года назад +1

    very good

  • @mohamedyoussef8835
    @mohamedyoussef8835 2 года назад +1

    Awesome video! ++++++++++++++++++ Thanks.

  • @gurubhai4918
    @gurubhai4918 2 года назад

    Firebase custom claims for authorising Admin vs Editor vs End User to different level access in Android app please mittal bhai

  • @waziee
    @waziee 2 года назад

    great video! could you do a video about same thing but with router v6? im using your starter and wanted to update to latest version of React but im having a lot of bugs especially in navigation, please help me

  • @ZaarmTech
    @ZaarmTech 2 года назад

    Is it mounted.current && setIsSubmitting(false) OR mounted.current ? setIsSubmitting(false)

    • @mafiacodes
      @mafiacodes  2 года назад +1

      mounted.current && setIsSubmitting(false)

  • @archisapien4179
    @archisapien4179 3 года назад

    Hey your tutorial is super good!! would you also make one on Sign in with link please....

  • @aprimic
    @aprimic 2 года назад

    Can you do verify email please?

  • @khalidmohamed6705
    @khalidmohamed6705 2 года назад

    I am having difficulties creating touch. Env. Local any suggestions

    • @mafiacodes
      @mafiacodes  2 года назад +1

      r u on windows? touch is a linux/Mac/unix thing

    • @khalidmohamed6705
      @khalidmohamed6705 2 года назад

      @@mafiacodes yes u got me

  • @saurabhu6458
    @saurabhu6458 2 года назад

    Your theme is awesome Please tell me the theme name

  • @196_shubhamsabat7
    @196_shubhamsabat7 2 года назад

    hey! buddy I want ur help. I've configured firebase for my project for google sign in using popup and idk why the popup is not opening on my localhost, but as soon as I close the server, it opens. it;s really weird and I'm frustrated. I've tried all the tips from StackOverflow, downgraded the firebase version to 8 also. nothing worked. plssssss help!!!!

    • @mafiacodes
      @mafiacodes  2 года назад

      Make sure pop ups are not blocked, else tru another browser, else restart , else make logs to see what error is coming

    • @196_shubhamsabat7
      @196_shubhamsabat7 2 года назад

      @@mafiacodes the problem's solved :) but hey thanks for your concern!

  • @sanitbandekar
    @sanitbandekar 3 года назад

    Sir CRUD operation aur FCM pe notification pe banao please

  • @alitaa1154
    @alitaa1154 2 года назад

    this was a great video thank you very much !!!

  • @w1llow01
    @w1llow01 3 года назад

    I followed along but when I started doing the auth and auth context I get this error:Firebase: Error (auth/invalid-api-key). The thing is I go to firebase console and the configuration api. key is the same as the one I have in the .env file. Please help

    • @mafiacodes
      @mafiacodes  3 года назад

      can't say what's wrong, watch the video again and follow the instructions on setting up the project.

    • @leelakamatham1404
      @leelakamatham1404 3 года назад

      I also got the same error, could please tell me, how did you fix this Problem?

    • @pragyasingh0710
      @pragyasingh0710 2 года назад

      After you add .env file, you need to restart your application, kill the server and then run npm start again. It should work.

  • @abdulazeezolanrewaju843
    @abdulazeezolanrewaju843 3 года назад

    Thank you sir, How can we do email Verification?
    on the user object, the emailVerification says false. is there a way to verify the email

    • @mafiacodes
      @mafiacodes  3 года назад +2

      call the method on auth intense to send email for verification...let firebase handle the ui for verification or do as I did for password reset @1:33:58, the logic being same

  • @FHSagor-mq1mh
    @FHSagor-mq1mh 3 года назад

    Brother thanks for this awesome video. I have learnt a lot from this video... But i have facing an issue when i register every time the onAuthState changes and set the current user . That's why it shows logged in without log in the user ... What should i do for this... I would like to login the user after registration... I don't want to change onAuthState State in registration process... Please help

    • @mafiacodes
      @mafiacodes  3 года назад

      that's the way firebase authstate works, when someone registers using the firebase register method, it registers and makes the user signs in, and that is also what is supposed to happen, it is a better UX, than first register and then again login with same details.

  • @atanunayak6637
    @atanunayak6637 3 года назад +1

    Bhai more on firebase V9

  • @iancarlos5199
    @iancarlos5199 3 года назад +1

    can i use this to create an app?

  • @sanitbandekar
    @sanitbandekar 3 года назад

    Thanks

    • @sanitbandekar
      @sanitbandekar 3 года назад

      android mein aapne firebase pe banaya series same aisa CRUD operation mein banao app help full gaa mere jaise beginners ko

  • @ankitparashar8730
    @ankitparashar8730 2 года назад

    Sir How to send email verification link ?

    • @mafiacodes
      @mafiacodes  2 года назад

      there is a method I guess on current user, sendEmailVerification

    • @ankitparashar8730
      @ankitparashar8730 2 года назад

      @@mafiacodes Haa i implemented

  • @franmassi3
    @franmassi3 3 года назад +1

    Excelent tutorial, but bro please, talk a little bit slower