Add Authentication to Next.js in 10 mins with OAuth (Google, Github...)

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

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

50% 1

Adding Authentication to your React or Next.js application can be hard sometimes, especially if you're dealing with OAuth providers like allowing your users to log in with their Google account or even using regular credentials like Email and password it will turn into a huge mess when trying to deal with different aspects of authentication.
⭐ Timestamps ⭐
00:00 Intro
00:51 NextAuth.js Library
02:03 NextAuth Setup
04:16 Login with Credentials (Email & Password)
06:27 Adding Login with Google & Github config
10:23 Generated Login page
12:25 Using a Custom Login Page
14:42 Google and Github Login
16:25 Managing User Session
18:13 Protected routes & Redirects
-- Special Links
✨ Join Figma for Free and start designing now!
psxid.figma.com/69wr7zzb1mxm
👉 ✨ Join Figma For Professionals And Start Designing with your Team ✨
psxid.figma.com/ucwkx28d18fo-...
💻 Clone the Next.js Auth Repo
github.com/ipenywis/nextjs-auth
🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize
• Build Login/Register A...
🧭 Turn Design into React Code | From prototype to Full website in no time
• Turn Design into React...
🧭 Watch Tutorial on Designing the website on Figma
• I Design a onecolor We...
🧭 Watch Create a Modern React Login/Register Form with smooth Animations
• Create a Modern React ...
🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools
• Debug React Apps Like ...
🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React
• Master React Like Pro ...
🧭 Learn Redux For Beginners | React Redux from Zero To Hero to build a real-world app
• Debug React Apps Like ...
🧭 Introduction to GraphQL with Apollo and React
• Introduction to GraphQ...
🐦 Follow me on Twitter: / ipenywis
💻 Github Profile: github.com/ipenywis
Made with 💗 by Coderone

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

17 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@SuperShivammm Год назад

Very practical way of using next-auth with next js . Thanks

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

Excellent video!

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

amazing video, thank you so much it helped me out a lot!!

@Gamer-gw6nj 4 месяца назад

Could you help me find the previous video?

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

top man keep it cool great job

@ZiaCodes Год назад

Why to make "IsloggedInServer and the IsLoggedClient" function and add to every page, it will be repeating the same thing. Isn't the middleware a best option for this type?

@rockNbrain Год назад

Great job dude 🎉 tks

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

Great Job... I love your teach

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

Thank you kindly!

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

The github code is missing the next-auth specific implementation for Google & github. Can you please push the code into the repo? It would help us to go through the code and implement.

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

thank you for the help, i have been struggling with authentication for weeks

@thepromisebenard Год назад

Nice video. please mind sharing what font and theme you are using for vscode?

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

Thank you so much, its works

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

You forgot to show us how to set up the authorizatiion for GitHub, but otherwise... good video. I've learned a lot.

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

Question: for authButtonsFiles - I am not certain why there are two buttons ( google / github ) when it could have been refactored into one for instance ? Did you had / do you have specific reasons or was it made just on the fly for the purpose of the video ?

@dachewster9999 Год назад

You didn't use the latest version which is AuthJs, and you didn't use middleware, so what you showed is not very good

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

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

And didn't deploy on vercel, so credentials won't work

@twd2 Год назад

Great tutorial, does the Google login and Credentials login handle the refresh token, CSRF etc !!!

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

hey! You explained the things in simple and understandable word, quite helpful. well I got stuck in an issue, while I'm trying to signIn with google it gives me error message "Try signing in with a different account", I'm pretty sure I have followed all steps and cross checked multiple times too, not sure why this error still there. Can you provide me any suggestions or have any idea why it behave like this.

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

great tutorial! question - how do you use hooks inside a condition? isnt it against react hooks rules?

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

can you explain us how to customize the sign in form? like the GoogleSignInButton and GithubSignInButton thanks

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

Which vscode theme you are using ?

@Adrian-mu8gg 11 месяцев назад

what if i use the credentials provider but forget password? does next-auth got any thing out of the box to handle that? like email resend reset password token?

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

Best way for a custom backend to integrate with Google provider, ideally i need mmy backend to track accounts through the creation of user entities in the backend as each user will have their own data.

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

good video sir

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

nice video

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

thanks bro

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

when you "contiune with Google" does your data get saved on the prisma database, because when i try this, I cannot find the user data in my prisma studio

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

Hi, thanks for the nice video. I notice that in production, as you click the button to use google or github, chrome flags your site as dangerous, why is that, any way to fix it.

@jethrangomez1313 Год назад

I have a problem with authentication, how can I automatically cancel authentication? when i am logged in and i close windows then open it but it logs in by itself

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

Have you tried the refreh token strategy?

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

how do you sign out of the github API? i can sign out on my app, but i'm still logged in through github :(

@zakidzz Год назад

how about next js next auth with nest js as a backend.....

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

Great video. Where can I find the source code of this particular video?😃

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

Hey man, nice explanation. Thank you. But Is there a way do the same kind of email checking like in the credentials provider with the Google Provider? Let's say I have a user table and when someone trying logging in with Google, their email needs to be cross-matched with a user from the user table. if matched they should be allowed to login otherwise redirect to login page. Can anyone suggest a solution for this problem? TIA

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

Why don't you need an adapter for the auth configs?

@hamzandev9482 Год назад

How i can store the user information to database like postgres if the user signed in using GitHub or other providers?

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

Same, and what if I want to remove any user how can I do that

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

Hi, in production the login doesent work, any idea why ? I use same urls for dev and production build, dev works great, production (local) not.

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

✨👌

@drgnstudio5246 Год назад

what theme is that

@LemanGahramanova-kh8fb Месяц назад

i have an error: Error with Permissions-Policy header: Unrecognized feature: 'ch-ua-form-factor'. How i can fix this problem?

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

hi, i did that but after try to login i have error below Try signing in with a different account. expected 200 OK, got: 403 Forbidden can't find anything for that

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

where did you pass the nextauth secret?

@sirvoya2357 4 дня назад

how can i use DiscordProvider?

@rishiraj2548 Год назад

Good day greetings

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

Nice tut Bruh, bbut I can't get the Git Repo, I looked, up and down, but did not see it!

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

github.com/ipenywis/nextjs-auth

@kiliusz Год назад

said 5min title 10min video length 20min

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

I could login using Github but it didn't redirect me to the "dashboard || timeline || etc" I stay in the same page with my session started. How can I do to redirect after login with github/google ?

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

I too have the same issue sir, any update on your side?

@codernerd7076 Год назад

2FA would make it even more secure

@Gamer-gw6nj 4 месяца назад

Where is the previous video where he built the whole clone? @CoderOne

@nahrulk Год назад

how can i get te toke.. ehe

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

i dont understand u add a lot of code before...

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

it took me over 1 h and i stil dont have that....

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

source code? github ?

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

github.com/ipenywis/nextjs-auth

@Cowglow Год назад

6:03 coding and talking is hard.

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

its 20 min

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

Title: Add Authentication to Next.js in 10 mins Video Duration: 20 mins.

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

It's called a "VIDEO TUTORIAL". So I have to go through and explain all the bits and details so everyone from beginner to advanced can easily understand and walk away happy. It says 10mins because anyone can add auth in 10mins but it doesn't necessarily mean that the video will be less than 10mins. The video is meant to make people understand not just implement it and walk away!

@Gamer-gw6nj 4 месяца назад

@@CoderOne I want to explore the previous video where you build the whole twitter clone. Could you give me the link of that video please? I need it urgently.

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

unclear as hell