Next.js + Strapi - User Authentication
ฝัง
- เผยแพร่เมื่อ 5 ก.พ. 2025
- In this episode we are going to create user authentication for our #Nextjs and #Strapi website using JSON Web Tokens or #JWT
In this a bit longer episode we are going to take a look at user authentication that comes with Strapi, and we are going to learn how to implement it into our Next.js app. This is not very hard to do once you undertand the logic behind it and learn how to use JWT (JSON Web Tokens) for authenticating your users.
Code used in this video
bit.ly/2DbbA9h
You can support my work on Patreon
/ watchlearn
Follow me on Social Media
Github: github.com/iva...
Twitter: / ivan_doric
Instagram: / watchlearntuts
Facebook: / watchlearntutorials
ctx.res.writeHead(302, {
Location: location,
"Content-Type": "text/html; charset=utf-8",
});
needed to add the Content-Type on the latest version of NextJS now the redirect works w/out an error.
FINALLY! Thanks man, my app has been crashing all the time and i had a hard time debugging this:)
Thanks for the info, I'm pinning this comment so that people can find it better.
You are the only one talking about this. This is great. Not every system is based on "password less" designs. Thanks for the vid.
Thanks 😃
Thank you so much for the effort you put in your videos. Normally I don't comment. But you deserve all the subscribes and likes!
Thanks man, that means a lot 👍 😀
exactly what i was looking for!!!
Nice 😀
Great Job !!! Nice video. Grettings from Argentina
Thanks :)
Thank you, Ivan! Excellent! May be you can make tutorial of using Next-auth custom provider with Users stored in Strapi?
Somebody already suggested it. I will take a look at it. Looks interesting, it will depend on the things that it will take care for us out of the box.
@@WatchandLearnTutorials I agree with Sergey, will be nice if you do it!! \o/
I agree to the agreement from Ricardo and Sergey lol.
Nice Series!!! Can you please add guide on google Login with current setup ?
Probably not going to do that, but you can check the documentation, I think it would be easy to do with providers: strapi.io/documentation/3.0.0-beta.x/plugins/users-permissions.html#providers
Amazing video.
What if I have more than one protect route?
Not just payed-articles
Well you do the same thing like for this route. What is the problem that you are running into.
do u have github of this tutorial?
Yeah, it's in the description.
Hi, is it secure to store the jwt in a cookie? Is httponly the key?
I'm not a security expert, so I will not comment on that. But you can read this to get a better idea: indepth.dev/posts/1382/localstorage-vs-cookies
Great tutorials, as a tip, try making the videos a bit shorter, so you can reach bigger audiences.
I get that, and I have some videos that a short, but I want people to learn from these videos. And they are as long as they need to be, because I don't want to skip over some concepts that some people may not be familiar with. However I am considering a "quickie" series for this channel, where I would cover a subject in no more than five minutes, or something like that. But that format is not good for a course like this.
He did all of this in under 30 minutes. That's not at all too long for this kind of topic.
Hi, may I know how to display the username that is successfully login to the system?
Take a look at this part of the docs: strapi.io/documentation/developer-docs/latest/development/plugins/users-permissions.html#retrieve-your-user-s-information you can retrieve your user info that way.
The video is amazing thanks! I only had one problem but I managed to fix it. The handleClick was always redirecting me even if the password was wrong. So I checked the Cookie saved and its value was undefined. So before setting the Cookie I had only to check using if condition that the jwt value is valid and not undefined. I hope this helps too and thank you again for the video. Keep up bro
This is the code
setCookie(null, "jwt", loginResponse.jwt, {
maxAge: 30 * 24 * 60 * 60,
path: "/",
});
Router.push("/");
}
Glad you like the video, and that you solved your problem 😀 ... thanks for watching.
Thanks for the tutorial! Helped me a lot! I have one question regarding use context in getServerSideProps, I tried to do this inside getServerSideProps: ```const { getToken } = useContext(AuthContext);
const jwt = getToken();``` but I can't use useContext, is there a workaround to retrieve the token from AuthContext to make the auth requests?
You can't use useContext inside getServerSideProps... Context is only available on the client side, and hooks are also available only inside of your component. You should save the token inside cookies, and then you can retrieve it on the client and on the server. And the easiest way to achieve that is with Nookies library github.com/maticzav/nookies .... I'm not sure if I mentioned that in the video.
@@WatchandLearnTutorials thanks, you did mention nookies in the video!
how we can set the Cookie as HttpOnly?
By reading the documentation ;) - github.com/maticzav/nookies it has HttpOnly option. eg.
setCookie(null, 'fromClient', 'value', {
maxAge: 30 * 24 * 60 * 60,
path: '/',
httpOnly: true
})
Here you can check how to modify strapi so that it works with cookies on server side, so then it's possible to use httponly talke.dev/strapi-user-permissions-jwt-cookies
Another way of getting cookie with HttpOnly without modifying Strapi is:
- Create an API endpoint in next that will be the responsible for login to Strapi.
- In this endpoint, the cookie will be created server side with the jwt token string.
- In the auth function inside the login page, we will call the API endpoint we already created instead of Strapi auth endpoint.
- Anywhere else that we try to fetch data from Strapi, we will read the token from the cookie first and then include it as authorization bearer.
Note: The cookie will only be accesible server side (obviously) and only in "getServerSideProps", "getInitialProps" but not in "getStaticProps" nor "getStaticPaths".
Nice video, but, how creat user??
It's similar to authentication, you just send email and password for the user to the /auth/local/register ... strapi.io/documentation/developer-docs/latest/plugins/users-permissions.html#registration
why not next-auth ?
Wow, nice. Wasn't aware of this. I will check it out.
@@KellvemBarbosa i don't know if it's a good alternative, but it does look interesting. I will have to test it out.
323.응원합니다
how to Next.js + Strapi - User Authentication with next-auth ?
You can checkout this video: th-cam.com/video/A1LyDnwkiz8/w-d-xo.html this uses Directus instead of Strapi. But they are pretty similar. Next-Auth config should be mostly the same, you just have to use Strapis endoints and send required data there. You can get the general idea how it works from the video mentioned.
@@WatchandLearnTutorials i try it but errors you can making the videos about it ? help me pls
It’s “PAID”. Not “payed”.
the worst training ever :/