Next Auth Sign in With Credentials

Pro Next JS: bit.ly/3MXZMGG
This is the video where you will learn how we can use NextAuth and create a sign in or authentication mechanism for the next-js app. We will first learn how the next auth works and then we will create a form to add email and password. Then we will go to the backend and add our authentication logic using CredentialsProvider which is one of the authentication providers available inside the next auth.
Then we will again come to our front end which is obviously made with the next js. Then we will learn about the session-provider so that we can use session hook and authenticate our user in our next js app.
Resources: fsniraj.dev/ne...
Part 2: • Protect Your API - Nex...
Source code: github.com/ndp...
Note see part 2 for complete understanding
Other Next JS Related Videos
• Next JS
Social Media Links
Instagram - / fsniraj
Twitter - / fsniraj

[@nicolasnasr945]

that’s probably the best tutorial on nextauth short and straight to the point

[@mauriciocarrion6205]

This video is just amazing, i search a lot for a simple tutorial of nextauth, just to protect a non public app. You rocks bro thankyou a lot!

[@matth6394]

i rarely like and comment on videos but this one was super helpful and well put together, major props!

[@fsniraj]

You are like me.

[@toktok3257]

@@fsnirajNice comment mate

[@usmanaliusmanali7511]

best best best ever ..... i've watched hell alot of tutorials of lenght more than an hour but wasn't able to understand next-auth ..but the way you keep the things simple when explaining was just mind blowing ..Thanks alot man😍

[@amirhosseinshahabnia]

Very helpful video sir! Been trying to understand how it works all day, but this one is really helpful!

[@codegist3048]

Thank you so much. Next-Auth has to include this video in their tutorials page. There is no clear docs, nor a tutorial that tells how to use Credentials Provider for the 1000s of systems out there in need of. Thanks

[@anthonyezeh7511]

So direct to the point. you are a hero.

[@edouardcourty4267]

Hands down the best NextAUth tutorial I've seen so far.

[@giladt]

Thank you for the great tutorial. One thing might be worth mentioning though: The security risks involved in handling non encrypted + salted credentials from client to server or storing unencrypted data in a database. If you don't know how to do it properly, better use a reliable ready made solution instead. In general, using credentials is a practice that better be avoided (at least IMO)

[@mekesiabrown625]

I have a client that wants this interface. *shrug*

[@toktok3257]

Using zod strong schema validation with react-hook-form should resolve this risk ?

[@codeorcode]

checked so many videos , but this is one of the best .

[@marceldavis3628]

Thanks ❤. The last Part with the custom Errors helped me the most.

[@jman5447]

this is so helpful! this helps me implement sign in showcase without using thirdparty authentication thank you Niraj!

[@andreicucea]

so good and concise. so much time wasted trying to find this exact information. thank you.

[@isaacpriestley]

How can I redirect to `/protected` after signin?

[@Collins01]

Hey man, you're the best. New subscriber, keep it up.🔥

[@nikhilcarpenter]

Please make complete javascript course, to show how to use functions, pass parameters, returns value, combining and mixing code logic, I love your style and want to learn

[@languageswithenoch4417]

This is amazing, straight to the point, I love it. I will subscribe

[@JulioTex]

Great tutorial, thank you for sharing the knowledge :)

[@arnoldsianturi2181]

Why do I always get status 200 and ok true, even if I input wrong credentials?

[@dankdonuts]

me too :((((((

[@hEAVEN_Beyond]

I have the same problem. Why does it always return 200, even if it should return 401?

[@MichaelSoriano]

Thank you sir. This is exactly what I need. Will try it out…

[@ChrisJohnNewton]

Lots of valuable information here!

[@KamalSingh-zo1ol]

Great video. Just curious why did you use instead of for submit button

[@fsniraj]

It is just a habit, use whatever you like.

[@sandunmadushan1732]

thank you so much. this is the video I was looking for.

[@OetziOfficial]

Thank you for this wonderful tutorial!

[@江進富-e1l]

Thank you sir. This is exactly what I need. Will try it out… 😄😄

[@MrCottonlion]

One question: how to write the type of credentials, req and its return? Sofar I have any async authorize(credentials: any, req: any): Promise

[@Zentamusic]

Great video! thanks so much

[@wazzadev7209]

Thanks very much for this, very helpful.

[@yousafwazir286]

amazing video i learned so much thanks

[@chinthakakasun6908]

Good tutorial, Thanks

[@dontignore5567]

Outdated, not working anymore. I put route.ts insige [...nextauth] folder. Still its not workin when I call signIn function in my login form it give me error

[@DevGio]

Let’s say we don’t want to return name, email, and image for the user. With the json web token, can we get a custom user back if we use callbacks? I want a property of {role: “admin”} to be on certain users as well 🤙🏼

[@DestinationDub]

Fantastic tutorial... thank you so much!

[@jirisuster6165]

Top tutorial, thanks mate.

[@desvelame]

you just won my subscription

[@mrkcsum]

Can you create a video showing how to debug typescript next js app within vs code? I tried a whole day without success and there is no youtube video teaching how to do it.

[@ArslanGreat-y8s]

Thank you so much very helpful content

[@Solo_playz]

Hello Niraj Thanks for this really needy video on next auth, But I'm confused a little bit here or you can consider this a stupid question from my end question: You are checking email and p[as in that authorize function in the credentials provider and the email and password values are static so I understand that we have to make a DB call to get the uesr from that email provioded and check for the password match as well till this I'm fine But How to signup user with credentials as I can do it easily by creating signup api route and create user and store in DB but as here we are creating session on signin so to sinnIn user needs to be signup first and during signup how we can create the session please bro I know i explained a lot but I want the solution for this! Thank you in advance!

[@SahilKumar-v8h4o]

This video really works. Thanks

[@pantelispapadopoulos4580]

Can you pls explain how i will automatic redirect the user to a landing page after the successful login? Because i tried both callbackurl and redirect and nothing worked it keep reload and stuck to my login page ...

[@amadacruse4193]

awesome tutorial, but it gives me an error Module not found: Can't resolve 'next/headers', and literally i dont have any mistakes on my code. Any idea! somewhere i read that this is a common mistake on new next-auth versions... so what are we supoosed to do Ty in advance sir

[@TomCho0802]

Thank you for making this video! When I followed your code about credentials, I had an issue that said "TypeError: Cannot destructure property 'nextauth' of 'req.query' as it is undefined".So, Does the next auth version 4.20.1 work? My package is "dependencies": { "@prisma/client": "^4.11.0", "@types/node": "18.15.5", "@types/react": "18.0.28", "@types/react-dom": "18.0.11", "bcrypt": "^5.1.0", "eslint": "8.36.0", "eslint-config-next": "13.2.4", "next": "13.2.4", "next-auth": "^4.20.1", "react": "18.2.0", "react-dom": "18.2.0", "typescript": "5.0.2" }, "devDependencies": { "@types/bcrypt": "^5.0.0", "prisma": "^4.11.0" }.

[@haliszekeriyaozkok4851]

thank you, it helped so much.

[@ЕкатеринаШимчёнок-я8б]

Thank you so much😍

[@C0D3O]

I get the userId from the auth function, how do I redirect to a userId dynamic route afterwards?

[@AyanKhan-rb2ie]

Is this Real ?? Such a simple and short video of Next Auth ?? wow

[@leborrr]

Thx for the video. I have a question. I have existing backend. Backend returns "token" inside the "body" after a login request. I want this token to my app's token. But cant change the NextJsAuth's "token". It provides a token itself. I'm returning it inside "async authorize" function. And it returns it as "User". Cant change the token inside the NextjsAuth's context.

[@anshkumargarhewal8582]

Did you find the solution

[@jeheskielsunloy3881]

great video mate, i have a question tho. how can i extend my user model ?

[@dsaojalgaon7122]

far, and makes confident about using the DAW the first ti.

[@mrbananaaa69]

omg 15 minutes and i got everything

[@caudat8238]

yo bro, really thankya. Big respect

[@josephuzuegbu7431]

Nice Tutorial

[@thelyncan7534]

Yo. Maybe this is a dumb question but if we look closely, you entered an id field but the user object from protected page doesn't have any id. how can we add more data to user object

[@fsniraj]

Yes you are right the id is missing from the user profile for that you have to use JWT and session callback and modify your user there.

[@brightisaac1386]

Thanks alot bro

[@Denis-xt2hs]

Hey, how can I get rid of this 401 error message in dev tools ? ( 11:29 ) Trycatch block doesn't help

[@caglarkarahuseyin]

Super helpful!

[@lucasemanuel3373]

Good lord you are an angel

[@it.sawang]

SessionProvider TypeError: Cannot read properties of null (reading 'useState')

[@tiagoagm]

This router replace in the protected route is not good. You should this in server side always.

[@rahimullahhamidi4321]

How can Use NextAuth with External API Like If I have api which created in Spring Boot, Please Brother Anwser my Question. If Possible Please Make a Video on it. thanks Advance

[@anikishaan5354]

thanks for this amazing video

[@fsniraj]

Here is the new version with lots of different things covered Next JS Authetication Master Class kzbin.info/www/bejne/Z37Rp5aChc2YgtE

[@codedusting]

Registration is not supported, I think in NextAuth. Email verification too?

[@nileshratanguptanrg]

very nice tutorial, I appreciate :)

[@fsniraj]

Glad you liked it

[@mekesiabrown625]

In this app, did you use next-auth v3 or v4?

[@codegiz]

I saw your blog post, but will you be able to post your code to github? It will be very helpful.

[@fsniraj]

This is part one if you see the part two there needs to be a link.

[@Tommy-and-Ray]

Great vid.

[@drkreh]

wow nice beginner friendly video but how about role-based-login-strategy, can u make video about that

[@fsniraj]

Part 2 is in the description

[@drkreh]

@@fsniraj thank you very much

[@HamedRohani]

Bro have you ever used next auth with react native?

[@manuelpineda8869]

Thanks a lot, deserve a sub.

[@Adrian-mu8gg]

love this, but how would i handle reset or password recovert?

[@fsniraj]

It's a long process and you can check out this playlist for reference MERN Authentication System With Email Verification & Forget Password: kzbin.info/aero/PLaAoUJDWH9WpmAUayPDh8zrwZoH_PZ4ON

[@zul.overflow]

great tutorial brooo

[@haripramod8573]

thank you

[@technotes721]

Why we are not getting the id in response

[@romainbacque9408]

But how csrf protection work in this case ?

[@damphuvve]

trying to accomplish this with the new beta app structure, but cannot figure out how to apply what is done in "_app.tsx". Should it be in rootlayout that you add sessionprovider? if so, can you give me an example how to add pageProps.session correctly there? i only gett errors :/

[@PatalJunior]

Did you get any progress, i figured It should be in the layout.js but I can't seem to get it working, I can't get the user info.

[@alfonzofong491]

hello friend excellent video you explain very well, but when I ask for the data using useSession() the object in the console comes out empty not null just empty, how could I get the id, name and email?

[@fsniraj]

Make sure you are returning your user object inside authorized function and remove your session from browser as I mention and then login again you should have the user object.

[@alfonzofong491]

@@fsniraj hello friend I am returning the same object as in the video, I even made a console.log in the nextauth.js and return the values on the server, but when I ask with useSession on the front I get back the object { }, I think it could be the sessionProvider, could you see the post I published in stackoverflow if you have time? the name is: Nextjs next-auth sessionProvider not reading session property Typescript

[@saransekhar6618]

yo yo toby fox and creo brought here doe

[@zzzzzzzzzzzzzzzzzz1g]

auth js team is dumb for dying on this hill. username and password should work out the box. also there should be a sign up section also.

[@nileshratanguptanrg]

I need your help, can you please tell me how can we get user id in page after login or in api backend ?

[@fsniraj]

watch the second part

[@14FL14]

Thanks man

[@MrBraianzzz]

is there any change on this tutorial if using Next.js 13 ?

[@fsniraj]

Check out this kzbin.info/www/bejne/b5e4aYyCZc-sf6M

[@Richard-wg4lu]

im getting the error with status status 200 .. how to change that

[@fsniraj]

Sorry I don't know

[@aramabdulrahman2087]

thanks please next add ... next js 12.2 middleware new features to protected routes

[@fsniraj]

Ok

[@HiImKyle]

How do you add more data to the `useSession` data?

[@fsniraj]

See the second part link is in the description

[@mrezamuktasib]

is it presist?

[@bakre_dev8728]

Perfect

[@webupps]

How do you add more data to user session?

[@fsniraj]

Watch second part kzbin.info/www/bejne/pZ3Pn6iqYq9nbdU

[@dineshsunny18]

What is the extension to get the nextjs typescript snippet for the signin page? @0:35

[@fsniraj]

There are tons of plugins for snippets but I like my own custom things. If you want that as well try this kzbin.info/www/bejne/hqrJk5WsiLCEqqc

[@dineshsunny18]

@@fsniraj Thank you. :)

[@zn3128]

How DO YOU OPEN A setup ALL OF THE TUTORIALS START WITH A setup

[@fsniraj]

Sorry but it is a little advance topic and if you can not understand the setup you need some more experience.

[@moodrow1234]

So good

[@memostartup281]

Sir please make tutorial on how to send and receive friend request like Facebook in react native firebase Android

[@LotusSoftPvtLtd]

nice

[@harsha4074]

bro tutorial on next 14 please

[@jrmartinss]

Very confusing NextAuth 😅

[@ekosaputro1640]

why my data?.user return {}

[@bbbilal]

1:40

[@dioncley000]

not working

[@gaby_g8634]

all workеd

[@juanmodestobritoguzman142]

I dоwnloaded everything is okay