Who thinks I should create a next-auth with github login next? 👀😆

@kamaboko1

8 ай бұрын

Nah....how about a MySpace login. Lol.

@WebDevEducation

8 ай бұрын

😂

@agneldominique352

8 ай бұрын

Facebook login

@dinoDonga

8 ай бұрын

next auth is discouraging the use of credentials due to the inherint security risk. Imo who the frick wants to log in with email and password anyways and then confirm - when i can let google / github / discord handle that? If an app does not offer SSO chances are people just dont try them

@WebDevEducation

8 ай бұрын

@@dinoDonga sure, personally I use auth0 for everything because I can't be bothered to set up auth myself. but it doesn't mean knowing how to set it up isn't useful.

Finally someone making a simple yet completely efficient auth example; I watched and read 20+ tuts on this matter and all of them either cut corners or implemented the most obscure auth ever... Subscribed!

Finally at least something usefull. I don't want to use any "cloud" services. All tutorials anbout nextJS is only about "connecting" a lot of cloud services. In this video I see only postgres via Vercel - very nice. 8 cloudless NextJS points out of 10 Thanks!

This is the INSANE video i have ever seen. I was searching this tech stack and implementations for a week but, i couldnt find full of this on the same video. Thank you very very much you'r the best!!

Immediately subscribed! This content is golden! 💎 Thank you so much for showing credentials setup with NextAuth. I really enjoy how well-structured your guides, and you also manage to add a human touch to them. Please, continue will this great content! 👍

This is exactly what I was looking for. Thank you for helping with next-auth!

Bless your soul for this tutorial, came in clutch when no other documentation or tutorials made any of this clear. Cheers!

Thank you for the video! I'm learning NextJs now but it's difficult to find clear tutorials with App Router. This is finally clear on the project structure and flow for NextAuth!👍

Until now, the best tutorial about nextauth credentials I found, helped a lot. Thanks for sharing. 👌

This video is amazing. Rewatching it for the 4th time

Finally, someone with brains. Thanks for this tutorial

@WebDevEducation

7 ай бұрын

Haha you're welcome 🙏

Intro just 🔥 🔥🔥🔥🔥

Amazing brother! great content!

Great Tutorial!, would be keen to an extension to this tut to add google sign in to same login page. Thanks for the hard work putting this tutorial together!

Thank you! amazing tutorial!

This is the tutorial that im searchin for! thank you so much 💖

@WebDevEducation

8 ай бұрын

You're welcome 😊

awesome! seamlessly implemented it

Great video! Does getServerSession on a next page opt you out of ISR? I'm assuming it does but want to be sure

OMG. what I am looking for, Thank you

Programming while in a car turned off is wild. Insane that you didn't get hot while inside the car (still watching 3 mins in)

@WebDevEducation

Ай бұрын

Haha the car was on, I live in Indonesia so would not have survived without the AC 😆

@Not_Aran8276

Ай бұрын

@@WebDevEducation Wait no way, I also live here in Indonesia (East Java, Malang). No wonder why you have that Suzuki Baleno car since that car is pretty popular here, and I guess I didn't notice the white and black license plate coloring format on the back of the car (0:08). Nice, keep up the good work!

@WebDevEducation

Ай бұрын

Ahhh awesome! Yes I live in Bali :)

This is great, thank you... As a suggestion maybe go a little deeper and show a graphql implementation.

It's really helpful for me thanks for this video I want to specify

Mans here making tutorials from the car. Dedication.

@WebDevEducation

8 ай бұрын

😂

Thanks man, really thanks.

intro 10/10

Hi from Singapore!

Very useful post🔥🔥🔥

@WebDevEducation

8 ай бұрын

Glad it was helpful!

잘 배우고 갑니다 next-auth 어려운거 아니었네

60sec, fully agree! They do it because its an easy tutorial and drives views, but lacks real world value imo...

Very useful

Absolutely love the mentality

Great vid. For the next vid, maybe an online payment for next jd.

Subscribed!

@WebDevEducation

4 ай бұрын

🙏

thank you!

tysm!!!

Great TUT! I learned a shit-ton from this video! I appreciate you, Man! Quick question, at 37:50, regarding the 'router.refresh'. For some reason, I had to remove it because the page would not push back to the homepage. Was that deprecated? Again...thank you so much!

You are awesome

Hello thank you for the great tutorial! I have a project with an Express.js backend and a Next.js frontend, does it make sense to use NextAuth in that case? If so how would you do it? Cheers

@WebDevEducation

7 ай бұрын

I would assume it's possible but I've never tried to hook up next auth with express so I'm not sure.

U r the best

Great tutorial! How can i implement both Credentials and oAuth providers in Auth.js, but with my backend logic in NestJs? That is, store my users in DB, but only NestJs can read/write database?

Hello, I am developing the front-end of a project with Next.js, but the back-end of the project is in Django. I want to know if I can use NextAuth for authentication without causing any issues with the Django back-end? Also, could you advise me on whether I should store the token in a cookie or use NextAuth? Please guide me.

sir, what is the difference between this method and server action for handling login/register?

Hello, thanks for the awesome content! Got one question though, given this setup, what would be the best way to handle making requests to a backend using the jwt-token in the header?

@radutarean9616

8 ай бұрын

While the heart is awesome, answers would be even more appreciated. :) No pressure. I am genuinely wondering what the best setup for this is and some resources or something would be much appreciated. Thanks in advance, you deliver awesome content!

@WebDevEducation

8 ай бұрын

The route handlers in Next JS are the backend, and we can grab the session from getServerSession. You should be able to grab any headers you need from the route handler. If you're using a different backend then you'll probably need a different solution than next-auth as its next specific. With that said next-auth team have created authjs.dev/, (which I believe will be used instead of next-auth in the future) which provides more generic auth solutions for other frameworks and backends that may be more suited to your needs.

@JuanDavidPF

6 ай бұрын

I think you can just add the jwt token your auth provider gives you and use it as a bearer token in all your requests

I understood everything (even with my broken English).

Great tutorial but how do we send axios post request if the backend is separate from the front end and the api needs an authorization jwt token

thank you.

@WebDevEducation At 23:51, won't the code be vulnerable to an SQL injection attack, as you are directly inputting the given values into the database without formatting?

@WebDevEducation

7 ай бұрын

Nope. Check the docs: vercel.com/docs/storage/vercel-postgres/sdk#preventing-sql-injections

"who the freak is logging in to the application using github" killed me 🤣

Perfect

is it possible to store sessions in database? to be able to keep track of sessions and expire sessions manually

Man, you are funny. I like your video. Thanks though, it's helpful.

hello, thanks for the great video. Can you show us how to reset password works?

finallyyyyyyy, somebody that think properly has released a good tutorial😐😐

Hello. I used your guide, logging in/registering with next-auth is a new topic for me and I have a problem. Logging out doesn't work for me, i.e. sign-out with next-auth logs me out, but when I refresh the page in localstorage, a new session immediately appears, so I'm de facto logged in all the time, without the option of permanently logging out. Could you advise me something? I've been looking for documentation, etc., but I haven't yet found a reason why it keeps setting a session at startup, even without logging in.

when i test register the response show in client side not server side what happen about that?

Nice video! What‘s the benefit of extracting the forms into their own client components leaving the register and login pages as server components?

@WebDevEducation

8 ай бұрын

You know what? I'm not actually sure why I did it that way 😆 I think the pages as client components would be a better approach in this example.

@HokagePain07

6 ай бұрын

It's just a good practise, it allows to load page faster, in this example it's not much, but in page with more elements it will do diffrence

@antares-the-one

5 ай бұрын

because of async

10/10

Nice. Can you do a video on authentication using JWT and next auth using backend nestjs and frontend nextjs?

@WebDevEducation

8 ай бұрын

Unfortunately I've never used nest js so wouldn't know how to

tysm

@WebDevEducation

5 ай бұрын

🙏

how did u manage to start a session using credentials login , i watched the video many time but i didn't find a way to createSession on login using credentials ,please explaine

thanks

best best best

I have the same code as you at 31:43 but I keep getting an error in the authorize function where it says the type credentials Record is not assignable to a type and it goes like a waterfall of type errors. Does anyone know why this happens? I appreciate the responses

@tharishaperera9345

8 ай бұрын

I have the same issue and need help

@Holsp

3 ай бұрын

Same problem. I solved it by including if( user == null ) return null; before the const passwordCorrect and deleting a question mark in "user.password" in the compare function.

Hello, excellent course, but I have a question. In the documentation, it says that I need to create the path "pages/api/auth/[...nextauth].js," but in the course, you do it like this: "pages/api/auth/[...nextauth]/route.ts." Is it the same, or what differs when doing it this way?

@WebDevEducation

3 ай бұрын

Both ways are correct, it just depends on if you're using the pages directory or app directory. With the app directory it should be app/api/auth/[...nextauth]/route.ts

@facundocarreno8956

3 ай бұрын

@@WebDevEducation Thank you very much for the response

@facundocarreno8956

2 ай бұрын

thank for the help @@WebDevEducation

the middleware part is not working not restricting the dashboard page if logged out !!

does vercel/postgres work with local postgres?

How can this code be refactored if the backend is handled by a different server?

Your introduction just killed me. 'login with github' 😀.

@WebDevEducation

7 ай бұрын

😂

Thank you!!! How would you add admin approval before users can login?

@Chambrln

7 ай бұрын

I would suggest adding an additional field in the user database. Upon registering the field defaults to loginApproved=false. You would need an admin page where the account could be approved and then change the loginApproved=true. Modify the SQL query in your authorize function to include a WHERE loginApproved = true.

@user-gb2io2cb9o

7 ай бұрын

Thank you!@@Chambrln

Can you create this video using NextJS14, server actions, prisma with sqlserver - and credentials using email & password

What if I want to show the custom error coming from the backend instead of just the credentialsSignin error

How to get rid of the callback url that appears in the browser url. I just want to display /login without /login?callbacksUrl=...

Now how do I store the session in database and use it

thanks for the vid. curious, when I look inside session from getServerSession after logging in, it returns an object likeso: { user: { name: undefined, email: undefined, image: undefined } } why?

@WebDevEducation

8 ай бұрын

it might be because I forgot to pass the authOptions to the getServerSession: next-auth.js.org/configuration/nextjs#in-app-router

why do you fetch email and pass to your API at 21:00 without hashing them? wouldn't it be very insecure? just asking because I don't know how it works

@WebDevEducation

5 ай бұрын

hashing client side doesn't really make anything more secure. to make it secure you need to be using https (which you should *always* be using in production), and so you can hash password server side before storing it. in next 13.5 and newer you can run https in development pretty easily as well.

@antares-the-one

5 ай бұрын

@@WebDevEducation https makes total sense. Thanks for the guide, it is great showcase of bare minimum that illustrates the principle

bro learning from a car:DDD

I have issues as I have pages as root folder then inside I have _app.tsx and _document.tsx it is hard for me to manage the session and also use the navbar globally everywhere

@WebDevEducation

7 ай бұрын

This tutorial uses the app router. The setup is slightly different if you're using the pages router. If you check the next auth docs they have the differences in setup outline there 🙏

@user-jf5zr2wz2z

7 ай бұрын

can you imagine I had the bugs for 2 weeks 😪 I was trying to use a session when the user was signed in or out but it was hard I found that I had to wrap the session provider in _app.tsx the useSession maybe next time better to give us the link who used different setup @@WebDevEducation

You've got the explanation for client/server components wrong when creating the Registration page. Also, you're not seeing the console log during registration in your terminal because you moved the handler to the client component, so it's logged in the browser.

@WebDevEducation

8 ай бұрын

What did I get wrong?

@WebDevEducation

8 ай бұрын

Also, the console logs I'm referring to the second time "we should see some console logs in our terminal" is the console log from the api endpoint, not the handlesubmit function. You're right tho, when I originally said we should see it in the terminal for handlesubmit, that's not the case and are indeed logged in the browser because it's within the client component.

7 ай бұрын

You're right@@WebDevEducation , I got confused at 16:56 because the error message in the browser states "Client Component", but by default it's a server component in Next.js 13.4

Tutorial yang sangat bagus, Tapi saya punya kendala untuk menampilkan pesan error dibrowser jika kata sandi yang dimasukan salah, saya menggunakan prisma di /api/auth/login dan saya sudah membuat Response.json({status: false, message: "Password is wrong."}), bagaimana caranya response tersebut ditampilkan pada browser? Terima kasih.

@WebDevEducation

7 ай бұрын

Makasih kak 😊 Kalo mau tampilkan error bisa pake useState kayak ini (app/login/form.tsx): const router = useRouter(); const [error, setError] = useState(""); const handleSubmit = async (e: FormEvent) => { e.preventDefault(); const formData = new FormData(e.currentTarget); const response = await signIn('credentials', { email: formData.get('email'), password: formData.get('password'), redirect: false, }); console.log({ response }); if (!response?.error) { router.push('/'); router.refresh(); }else{ setError(response.error); } }; return (error ? {error} : Login );

@wadahkodeofficial5389

6 ай бұрын

@@WebDevEducation Terimakasih, tapi sudah solved kok dari kemarin-kemarin.

@wadahkodeofficial5389

6 ай бұрын

@@WebDevEducation Oh iya btw cara diatas kita tidak bisa mengatur custom message. async handleSubmit(...) { // Mencari pengguna const res = await fetch("/api/accounts/search?username="+username) const user = await res.json() if (res.ok && !user.found) { setMessage(user.message || "Nama pengguna tidak terdaftar.") } } Ini caraku sih buat mengatasi signIn() yang tidak bisa membuat custom message.

great video.. but the middleware is not working properly

@pomiusu

3 ай бұрын

it actually works, I were facing issues with middleware just not working but then I tried moving middleware.ts to the root directory and it worked, before that it was at approot/app

Note: using raw SQL code will make vunrable to SQL injection please use an orm or sanitize the user input

@WebDevEducation

4 ай бұрын

Please read the docs. This method isn't vulnerable to sql injection 🙏 vercel.com/docs/storage/vercel-postgres/sdk#preventing-sql-injections

create a video on Auth.js credentials

@WebDevEducation

18 күн бұрын

Watch this space 👀

i love how simple next auth is but the error handling is just so trash

Thank you!

I'm getting this error when using getServerSession(): ./node_modules/next-auth/core/init.js:10:14 Module not found: Can't resolve 'crypto' Any idea??