Next.js Authentication Firebase - Sign in with Google
ฝัง
- เผยแพร่เมื่อ 2 ก.ค. 2023
- Next JS 13 Authentication using Firebase - Sign in with Google
Github Repo:
github.com/fireclint/next-aut...
ZeroTo Mastery:
Master React JS Course - bit.ly/Learn-React-JS
Complete Web Developer in 2023 - bit.ly/Complete-Web-Developer
💻 Solve EDABIT coding challenges - BEGINNER! 💻
bit.ly/Code-Challenges
🔥 Connect with me on IG 🔥
/ fireclint
☕ Support the channel ☕
www.buymeacoffee.com/clintbriley
🔥 My Coding Equipment 🔥
Logitech MX Wireless Keyboard - amzn.to/3xKPFiN
Logitech MX Master 2S Wireless Mouse - amzn.to/3O5WmRD
SAMSUNG 49-Inch Gaming Monitor - amzn.to/3mvUy8M
Shure MV7 USB Podcast Microphone - amzn.to/3O00nqG
Mic Boom Arm - amzn.to/3NHn6YU
Monitor Desk Light Bar - amzn.to/3xzKlyj - วิทยาศาสตร์และเทคโนโลยี
The tutorial is good but what is the use of using NextJs when we are rendering the whole app on the client side.
But what would be the point of using the app directory if we are wrapping the entire project in a "use client"
This dude is completely new to next JS so just take it easy man 😅
😂😂😂
how to do it better?
Create a provider component, which will have the 'use client' directive, then wrap your rootlayout with the provider
How to make next js useless in one line 😂
awesome video! i finished the dashboard tut, then this, and now im gonna combine them together, can't wait to do more.
That's awesome man!
Thank you so much, you helped me build the entire auth functionality for my app. It is the first time I do it.
Love to see you after long time 🔥⚡
Really wonderful! Loved it. Thank you so much for sharing you knowledge!
Love you man!!! Thanks for introduce me to the coding world :)
Awesome video, exactly what I was looking for. Thank you
Best guides I have found so far. very knowlegeable.
Loved your tutorial man🥰🥰. Please create a video on roles and permissions using nextJs and firebase. Much needed to learn
Tuto is nice, but putting the 'use client" on the layout is making all the NextJS App client side and we lose the biggest advantage of NextJS which is the server-side rendering
yeah i was wondering about this as well, do you know if there's another way to do it?
@@altertopias Put "use client" in individual components where you are using hooks etc. Then import them in parent, there will be no issue then.
Thanks man for this video. Really helped me in figuring out what I was doing wrong.
is there a way have a protected route in server side ?
i get this err when trying this >> "Error: Element type is invalid. Received a promise that resolves to: [object Promise]. Lazy element type must resolve to a class or function." seems like it doesn;t like the useEffect inside a context??
I have been waiting for your video for long time bro.
Thank you so much dude!
amazing explanation, thank you for this example
thank you bhai tu hi hai asli coder tu ni hota toh aaj kuch ho ni pata
Thank you so much! You are the best!
Hi there, can you build a spotify/netflix whatever you want clone connecting it with an API? I really want to learn how you do that
Bruh this just saved my ass, I was really desperate for this specific tutorial .. thx man much appreciated !! ❤
Happy to help sir!
How would I combine the expense tracker app you developed in the previous video with this authentication?
I have made a service to make the api calls. How can i pass the token in each api calls from this AuthContext? Also the token gets expired after a period of time. how can I handle this?
Great video!
Well done with this, really helped me.
glad to help!
Thank you, amazing video and work amazing.
there is another way instead using "use client" in next.js ?
Do we need to hide the firebase config on an env file?
sir im learning soo much from you, i'll forever be grateful
Thanks man!
pro i want to use this code react js can i use it
Thank you man
When I added use client in layout.js it showed me this error You are attempting to export "metadata" from a component marked with "use client", which is disallowed. Either remove the export, or the "use client" directive, How can I fix this.
I got this too
By putting 'use client' in the root layout, you are making every child component (your entire project) client components. This makes using the App Router redundant because none of your components will be rendered on the server.
how to do it better?
@@julianrosenberger1793 Move the 'use client' to the top of AuthContext.js
did you find any solution? plz mention if you get the perfect solution
@@b2c_org_bdI am also new to NextJS and React, so unfortunately I do not know whether the solution I have found is best practice or not.
It may be helpful for you to know that NextAuth is not a platform that provides authentication like Firebase Authentication, but it is a solution that is designed to support any oAuth services including Firebase Authentication. If you are committed to using NextJS, don't be afraid to spend the time to research and understand NextAuth, because it is the OOTB/best practice/recommended solution for implementing auth services like Firebase Authentication.
make group layouts. Let's say your we're in your app directory. Put everything in (auth) folder, (auth) is a group, this won't be part of url.
then make a layout.js file in (auth) control everthing from there. (auth)->login, (auth)->dashboard, here login and dashboard are route folders
Pretty solid, no sh#t. Go ahead !!!🎉
thanks for the video, it really helped. But when calling googleSignIn -> the list of emails isnt shown, it logs me in with main google email right away, but does not give a possibility to "Choose from.." other emails that i have. have u experienced this?
Have you used multiple google accounts in the browser? If it's just one, it doesn't prompt you to choose.
thanks dear
Thank you very much
The tutorial was amazing🥰. Can you please do apple authentication tutorial with next auth and firebase, it would be so helpful.
Nice, thx
Hey clint!! that's an amazing tutorial right there.. was really helpful!!
but i was struggling with the coop policy blocking out the pop up window which happened for you as well, then i used the signInWithRedirect method to tackle it.. but do you have any solution regarding this?
and another problem that it was showing this site might be harmful and it told me to register this app to google cloud console.. can you suggest me something regarding that issue too?
Perhaps it made too many calls. CORS can be tricky and certainly a pain!
can you also show how to refresh access_token before api call?
Thanks for make and share it. love it
I need to implement email/password too, there is a way to enable this second method?
That rafce trick you just casually mention, man does that save time!
i love it too! its definitely helpful to spend a little time learning VScode keyboard shortcuts and extensions that fill in for you, it speeds things up so much.
Love using shortcuts - I'd be lost without them! haha
Hi, thank you, great explanation. It works locally, but I´m getting this error en deploying to Firebase or Vercel: ./app/admon/page.jsx
8:35 Error: React Hook "useState" is called in function "page" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use". react-hooks/rules-of-hooks
11:5 Error: React Hook "useEffect" is called in function "page" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use". react-hooks/rules-of-hooks
well job
Great vid but being able to hear the gulping was driving me crazy maybe add a noise gate or noise suppression thanks! 😄
Sorry Jordan! That should be fixed now. 👍
can i get this code
Is anybody else receiving UserAuth() is not a function error?
ye , same, have you fixed this?
i keep getting this error "Unhandled Runtime Error
TypeError: (0 , firebase_app__WEBPACK_IMPORTED_MODULE_0__.initializeApp) is not a function" i am not sure how to fix it I have looked all over the web and nothing seems to help me fix it it says it has to do something with this line "> 19 | const app = initializeApp(firebaseConfig);" someone please help
🙏
i had this problem too, but i don't know how i fixed it, i just kept going through each page and making sure the code was all correct and it started working lol. I think i moved the imports to the top and it worked but i don't see why because the rest is just comments but for whatever reason it worked. try looking over your code a few times
I had the same error but I realized it may have to do with the fact that I put "use server" directive in the firebase.js file. It worked after I removed the directive.
client component 😞
good but all the app is now client app. for this i can use react not need nextjs
youre using context auth not next auth
Clint please please we want a full ecom website with next js and tailwind please pleasee
Please make a tutorial on apple vision pro website clone !!!!
Ah yah that is a clean looking website. That would be fun, but it would definitely take a bit of time to complete.
14:03
23:20