Next-Auth in App Router of Next.js + external JWT
Answered
Rampur Greyhound posted this in #help-forum
Rampur GreyhoundOP
Hi everyone, i have a question... how can handle login flow in my nextjs app router where i receive directly an external jwt as cookie?
So i have to check if user is authenticated in every page otherwise i have to show signin modal.
Can i use nextauth or it is not necessary?
I'm thinking to use nextauth, retrieve the jwt from cookie and put it in a session, and then check if jwt is expired on client side.
Is it a valid solution?
Is there any solution (using only middleware)?
Thanks to everyone
So i have to check if user is authenticated in every page otherwise i have to show signin modal.
Can i use nextauth or it is not necessary?
I'm thinking to use nextauth, retrieve the jwt from cookie and put it in a session, and then check if jwt is expired on client side.
Is it a valid solution?
Is there any solution (using only middleware)?
Thanks to everyone
Answered by B33fb0n3
that depends on your use case. You CAN use both: middleware AND nextauth, to protect your routes.
If you would check the jwt clientside, the customer can peek into the content or even watch the content even when he's not authenticated. And that's not what you want. So validate the jwt token serverside if you have serverside content
I recommend you checking the jwt once serverside in your middleware. If it's valid, show the page, inside the page he can do whatever you want to do
If you would check the jwt clientside, the customer can peek into the content or even watch the content even when he's not authenticated. And that's not what you want. So validate the jwt token serverside if you have serverside content
I recommend you checking the jwt once serverside in your middleware. If it's valid, show the page, inside the page he can do whatever you want to do
13 Replies
hey, you can use the middleware like you said. I am using amplify auth (so also external) and amplify sets the required cookies. After that I can access these cookies serverside. Now I build my middleware (is serverside), get the cookies, validate them (amplify offers me methods for this, I think you third party should too) and redirect to signin/up if he can't be authenticated @Rampur Greyhound
@B33fb0n3 hey, you can use the middleware like you said. I am using amplify auth (so also external) and amplify sets the required cookies. After that I can access these cookies serverside. Now I build my middleware (is serverside), get the cookies, validate them (amplify offers me methods for this, I think you third party should too) and redirect to signin/up if he can't be authenticated <@596048143414722591>
Rampur GreyhoundOP
middleware or nextauth? because i have written a solution with nextauth... you could verify only expired? Why you call a backend method to verify if jwt is valid.
On client side how you verify if user is authenticed...
On client side how you verify if user is authenticed...
@Rampur Greyhound middleware or nextauth? because i have written a solution with nextauth... you could verify only expired? Why you call a backend method to verify if jwt is valid.
On client side how you verify if user is authenticed...
that depends on your use case. You CAN use both: middleware AND nextauth, to protect your routes.
If you would check the jwt clientside, the customer can peek into the content or even watch the content even when he's not authenticated. And that's not what you want. So validate the jwt token serverside if you have serverside content
I recommend you checking the jwt once serverside in your middleware. If it's valid, show the page, inside the page he can do whatever you want to do
If you would check the jwt clientside, the customer can peek into the content or even watch the content even when he's not authenticated. And that's not what you want. So validate the jwt token serverside if you have serverside content
I recommend you checking the jwt once serverside in your middleware. If it's valid, show the page, inside the page he can do whatever you want to do
Answer
Rampur GreyhoundOP
Ehi sorry for the late, thanks for your help … I'll go a bit deeper ... my app (nextjs app router)has to interface with an api server which also provides me with a signin method and directly returns a jwt set in cookies.
Having said that if I use nextauth using a credentials provider I would be ok as far as client side is concerned because with the jwt that nextauth returns I manage the client side session.
For the api calls at this point based on the status it returns I understand if I am authenticated or not.
What do you think?
Having said that if I use nextauth using a credentials provider I would be ok as far as client side is concerned because with the jwt that nextauth returns I manage the client side session.
For the api calls at this point based on the status it returns I understand if I am authenticated or not.
What do you think?
@Rampur Greyhound Ehi sorry for the late, thanks for your help … I'll go a bit deeper ... my app (nextjs app router)has to interface with an api server which also provides me with a signin method and directly returns a jwt set in cookies.
Having said that if I use nextauth using a credentials provider I would be ok as far as client side is concerned because with the jwt that nextauth returns I manage the client side session.
For the api calls at this point based on the status it returns I understand if I am authenticated or not.
What do you think?
yea, that sounds great!
(I meant that by saying):
(I meant that by saying):
After that I can access these cookies serverside ... get the cookies, validate them ...and redirect to signin/up if he can't be authenticated ...Or let the request thought to the page ^^
@B33fb0n3 yea, that sounds great!
(I meant that by saying):
> After that I can access these cookies serverside ... get the cookies, validate them ...and redirect to signin/up if he can't be authenticated ...
Or let the request thought to the page ^^
Rampur GreyhoundOP
But in your example your backend is a Nextjs api?
yea in my example my routes are protected through the middeware. So the part
By the way: my auth works nearly the same as yours. User login clientside and then set cookies
get the cookies, validate them ...and redirect to signin/up if he can't be authenticated ...is all in middleware. And the page.js only does everything, that it's suppose to render. Like if there is no auth. The auth will be handled in my example through the middleware.
By the way: my auth works nearly the same as yours. User login clientside and then set cookies
Rampur GreyhoundOP
You don’t use react query?
@Rampur Greyhound You don’t use react query?
No, for what should I need it for?
@B33fb0n3 No, for what should I need it for?
Rampur GreyhoundOP
I'm thinking these solutions:
------- using two jwt
1. Use nextauth to login and get two jwt saved directly as cookies, the one that returns the third-party backend (jws) and the one that returns nextauth (jwe) with expire shorter than the first
2. Use the second jwt (nextauth) to handle if user is authenticated
3. Call the third-party backend methods that checks the first jwt if it is valid. in theory this condition should never occur if I set the jwt returned from nextauth to expire smaller
------- using only jwt that return nextauth
1. Use nextauth to login and get two jwt saved directly as cookies, the one that returns the backend (jws) and the one that returns nextauth (jwe) with expire shorter than the first
2. Map the calls that the client makes directly to the third-party backend with nextjs and use a middleware to understand if the nextauth jwt is valid... here too the token must expire before the token that the third-party backend returns
------- using only jwt that return third-party backend
1. Ask a verify token method to third-party backend
2. Signin and obtain jwt from third-party backend
3. Map the calls that the client makes directly to the third-party backend with nextjs and use a middleware to understand if the nextauth jwt is valid... here too the token must expire before the token that the third-party backend returns
Use ReactQyery to optimize responses from the backend....
------- using two jwt
1. Use nextauth to login and get two jwt saved directly as cookies, the one that returns the third-party backend (jws) and the one that returns nextauth (jwe) with expire shorter than the first
2. Use the second jwt (nextauth) to handle if user is authenticated
3. Call the third-party backend methods that checks the first jwt if it is valid. in theory this condition should never occur if I set the jwt returned from nextauth to expire smaller
------- using only jwt that return nextauth
1. Use nextauth to login and get two jwt saved directly as cookies, the one that returns the backend (jws) and the one that returns nextauth (jwe) with expire shorter than the first
2. Map the calls that the client makes directly to the third-party backend with nextjs and use a middleware to understand if the nextauth jwt is valid... here too the token must expire before the token that the third-party backend returns
------- using only jwt that return third-party backend
1. Ask a verify token method to third-party backend
2. Signin and obtain jwt from third-party backend
3. Map the calls that the client makes directly to the third-party backend with nextjs and use a middleware to understand if the nextauth jwt is valid... here too the token must expire before the token that the third-party backend returns
Use ReactQyery to optimize responses from the backend....
first things first: wow, that's a long message, thanks for that!
Secondly: yes, the last methods works for me. I was a bit confused via this topic:
In the solution I prefer my third party can also validate the jwt that is returned by the third party. So I don't need nextauth
Secondly: yes, the last methods works for me. I was a bit confused via this topic:
... ---- using only jwt that return third-party ...
to understand if the nextauth jwt is valid
In the solution I prefer my third party can also validate the jwt that is returned by the third party. So I don't need nextauth
Rampur GreyhoundOP
Ok thank you for your help/comparison
@Rampur Greyhound Ok thank you for your help/comparison
Would you mark my message as solution: https://nextjs-forum.com/post/1182624035637567629#message-1183342390803693618