Add Authentication to Next.js in 10 mins with OAuth (Google, Github...)
HTML-код
- Опубликовано: 10 июл 2024
- 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
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?
Very practical way of using next-auth with next js . Thanks
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.
Excellent video!
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 ?
very good tutorial.. thanks!!
Thank you kindly!
amazing video, thank you so much it helped me out a lot!!
Could you help me find the previous video?
Great job dude 🎉 tks
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?
top man keep it cool great job
can you explain us how to customize the sign in form?
like the GoogleSignInButton and GithubSignInButton
thanks
Great Job... I love your teach
Thank you so much, its works
Nice video. please mind sharing what font and theme you are using for vscode?
You didn't use the latest version which is AuthJs, and you didn't use middleware, so what you showed is not very good
?
And didn't deploy on vercel, so credentials won't work
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
Any idea how we can deploy this on Google Cloud Run (with variables & secrets) and/or Vercel? My ENV variables do not seem to work on either. Thanks man
how about next js next auth with nest js as a backend.....
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.
great tutorial! question - how do you use hooks inside a condition? isnt it against react hooks rules?
how do you sign out of the github API? i can sign out on my app, but i'm still logged in through github :(
Great tutorial, does the Google login and Credentials login handle the refresh token, CSRF etc !!!
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
i have an error: Error with Permissions-Policy header: Unrecognized feature: 'ch-ua-form-factor'.
How i can fix this problem?
Which vscode theme you are using ?
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.
thank you for the help, i have been struggling with authentication for weeks
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.
You forgot to show us how to set up the authorizatiion for GitHub, but otherwise... good video. I've learned a lot.
How i can store the user information to database like postgres if the user signed in using GitHub or other providers?
Same, and what if I want to remove any user how can I do that
Why don't you need an adapter for the auth configs?
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
what theme is that
thanks bro
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.
Have you tried the refreh token strategy?
how can i use DiscordProvider?
good video sir
nice video
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
where did you pass the nextauth secret?
Great video. Where can I find the source code of this particular video?😃
✨👌
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 ?
I too have the same issue sir, any update on your side?
Good day greetings
Kindly make new video using authjs
Nice tut Bruh, bbut I can't get the Git Repo, I looked, up and down, but did not see it!
github.com/ipenywis/nextjs-auth
Where is the previous video where he built the whole clone? @CoderOne
2FA would make it even more secure
how can i get te toke.. ehe
said 5min
title 10min
video length 20min
i dont understand u add a lot of code before...
it took me over 1 h and i stil dont have that....
source code? github ?
github.com/ipenywis/nextjs-auth
6:03 coding and talking is hard.
Title: Add Authentication to Next.js in 10 mins
Video Duration: 20 mins.
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!
@@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.
its 20 min
unclear as hell
these captions are irritating