Next.js Authentication Firebase - Sign in with Google

Подписаться 40 тыс.

Просмотров 37 тыс.

50% 1

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

Наука

Опубликовано:

2 июл 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 85

@wemakegeeks9148 6 месяцев назад

The tutorial is good but what is the use of using NextJs when we are rendering the whole app on the client side.

@criteria6972 9 месяцев назад

But what would be the point of using the app directory if we are wrapping the entire project in a "use client"

@storyPlus12 9 месяцев назад

This dude is completely new to next JS so just take it easy man 😅

@YenVietSoft 8 месяцев назад

😂😂😂

@julianrosenberger1793 7 месяцев назад

how to do it better?

@josephakpu3340 6 месяцев назад

Create a provider component, which will have the 'use client' directive, then wrap your rootlayout with the provider

@user-eb1oh9ne8f 6 месяцев назад

How to make next js useless in one line 😂

@BrandonFunk 10 месяцев назад

awesome video! i finished the dashboard tut, then this, and now im gonna combine them together, can't wait to do more.

@codecommerce 10 месяцев назад

That's awesome man!

@mohsinalshammari9776 8 месяцев назад

Thank you so much, you helped me build the entire auth functionality for my app. It is the first time I do it.

@niteshprajapat7918 11 месяцев назад

Love to see you after long time 🔥⚡

@Trendytrends3000 5 месяцев назад

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

@altertopias 5 месяцев назад

yeah i was wondering about this as well, do you know if there's another way to do it?

@devadeelahmad 4 месяца назад

@@altertopias Put "use client" in individual components where you are using hooks etc. Then import them in parent, there will be no issue then.

@satyanarayandalei-rz2kw 9 месяцев назад

Really wonderful! Loved it. Thank you so much for sharing you knowledge!

@FSDevOps 5 месяцев назад

Love you man!!! Thanks for introduce me to the coding world :)

@AntonioGutoCarioca 5 месяцев назад

Best guides I have found so far. very knowlegeable.

@DylansDao 10 месяцев назад

Awesome video, exactly what I was looking for. Thank you

@moizlokhandwala3262 10 месяцев назад

Loved your tutorial man🥰🥰. Please create a video on roles and permissions using nextJs and firebase. Much needed to learn

@Prakash-lq3zh 11 месяцев назад

I have been waiting for your video for long time bro.

@codecommerce 11 месяцев назад

Thank you so much dude!

@BerwinSingh 4 месяца назад

Thanks man for this video. Really helped me in figuring out what I was doing wrong.

@philipjobran2716 11 месяцев назад

Bruh this just saved my ass, I was really desperate for this specific tutorial .. thx man much appreciated !! ❤

@codecommerce 11 месяцев назад

Happy to help sir!

@wilsonbalderrama 8 месяцев назад

amazing explanation, thank you for this example

@anuragdixit3147 7 месяцев назад

thank you bhai tu hi hai asli coder tu ni hota toh aaj kuch ho ni pata

@jack-ec3he 10 месяцев назад

is there a way have a protected route in server side ?

@maksimtalko6145 2 месяца назад

Thank you so much! You are the best!

@joeljoel1236 11 месяцев назад

sir im learning soo much from you, i'll forever be grateful

@codecommerce 11 месяцев назад

Thanks man!

@pcastillogarita 11 месяцев назад

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

@snc0lt 8 месяцев назад

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??

@aviv6jx 9 месяцев назад

Thank you, amazing video and work amazing. there is another way instead using "use client" in next.js ?

@camstuart 5 месяцев назад

Well done with this, really helped me.

@codecommerce 5 месяцев назад

glad to help!

@MrSand7ip 3 месяца назад

How would I combine the expense tracker app you developed in the previous video with this authentication?

@gaurangshroff 5 месяцев назад

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?

@ripper1117 7 месяцев назад

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.

@julianrosenberger1793 7 месяцев назад

how to do it better?

@sgnlx_ai 7 месяцев назад

@@julianrosenberger1793 Move the 'use client' to the top of AuthContext.js

@b2c_org_bd 7 месяцев назад

did you find any solution? plz mention if you get the perfect solution

@ripper1117 7 месяцев назад

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

@sikandarchishty 6 месяцев назад

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

@samyakshah9119 9 месяцев назад

Great video!

@lilz3bra 10 месяцев назад

That rafce trick you just casually mention, man does that save time!

@BrandonFunk 10 месяцев назад

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.

@codecommerce 10 месяцев назад

Love using shortcuts - I'd be lost without them! haha

@_thewatcher27 3 месяца назад

Do we need to hide the firebase config on an env file?

@arnav7997 9 месяцев назад

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.

@jawnho9653 9 месяцев назад

I got this too

@ayanghosh7635 10 месяцев назад

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?

@codecommerce 10 месяцев назад

Perhaps it made too many calls. CORS can be tricky and certainly a pain!

@abdikadirQulle 11 месяцев назад

pro i want to use this code react js can i use it

@christianmiguez1379 7 месяцев назад

Thanks for make and share it. love it I need to implement email/password too, there is a way to enable this second method?

@netcastings 10 месяцев назад

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?

@stefandimitrov6093 5 месяцев назад

Have you used multiple google accounts in the browser? If it's just one, it doesn't prompt you to choose.

@neelnarwadkar5921 Месяц назад

can you also show how to refresh access_token before api call?

@user-sd3xl4kv1m 5 месяцев назад

Thank you man

@user-ot2tg2bq1g 7 месяцев назад

The tutorial was amazing🥰. Can you please do apple authentication tutorial with next auth and firebase, it would be so helpful.

@riyadkarim5808 8 месяцев назад

Thank you very much

@FullstackDeveloper-tf7zy 17 дней назад

thanks dear

@jordanmills4945 11 месяцев назад

Great vid but being able to hear the gulping was driving me crazy maybe add a noise gate or noise suppression thanks! 😄

@codecommerce 11 месяцев назад

Sorry Jordan! That should be fixed now. 👍

@vizunaldth 9 месяцев назад

Nice, thx

@Glebtc 7 месяцев назад

Is anybody else receiving UserAuth() is not a function error?

@Roman_Milyan 3 месяца назад

ye , same, have you fixed this?

@leuzaoo 10 месяцев назад

well job

@alangutierrez6963 11 месяцев назад

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 🙏

@BrandonFunk 10 месяцев назад

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

@david_law 5 месяцев назад

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.