how to handle auth with an external server? (both refresh & access tokens)
Unanswered
Horse guard wasp posted this in #help-forum
Horse guard waspOP
all the examples on the internet show an implementation where you do not have an external backend, and are only using nextjs for the entire app.
or if theres an example that does have an external backend, it doesnt implement refresh and access tokens correctly.
i want to know how to implement this according to this example:
external backend api written in whatever language (example: express/spring/golang)
this external backend, on login, returns an access token in the response body that expires after 15 mins; and returns a refresh token that expires after a month or so, in an HTTPONLY cookie with the path "/api/auth/refresh". (meaning this refresh token is only sent to that single path and no other)
when the access token expires, the client sends a request to "/api/auth/refresh" and gets a renewed access token.
this is simple enough in a SPA app like react, because the refresh token is saved in a cookie in the client's browser, and the browser sends the request to the refresh api.
but in a Nextjs app, consider this scenario:
1- client requests "/dashboard/" page from nextjs. (which is a ssr route that contains dynamic data)
2- nextjs receives the request, sends a request to external backend to get required data, gets a 401 because access token is expired.
3- right now the nextjs server is supposed to send a request to "/api/auth/refresh" to get a renewed access token and try again, problem is the client initially requested "/dashboard/" which means the initial request doesnt have the refreshToken cookie.
you might say you can try to remove the path restriction and have the refresh token sent to every route, but this beats the purpose of it and makes the app less secure, and its as if you are only using one access token that has a long expiry duration (in this example 1 month)
any thoughts?
or if theres an example that does have an external backend, it doesnt implement refresh and access tokens correctly.
i want to know how to implement this according to this example:
external backend api written in whatever language (example: express/spring/golang)
this external backend, on login, returns an access token in the response body that expires after 15 mins; and returns a refresh token that expires after a month or so, in an HTTPONLY cookie with the path "/api/auth/refresh". (meaning this refresh token is only sent to that single path and no other)
when the access token expires, the client sends a request to "/api/auth/refresh" and gets a renewed access token.
this is simple enough in a SPA app like react, because the refresh token is saved in a cookie in the client's browser, and the browser sends the request to the refresh api.
but in a Nextjs app, consider this scenario:
1- client requests "/dashboard/" page from nextjs. (which is a ssr route that contains dynamic data)
2- nextjs receives the request, sends a request to external backend to get required data, gets a 401 because access token is expired.
3- right now the nextjs server is supposed to send a request to "/api/auth/refresh" to get a renewed access token and try again, problem is the client initially requested "/dashboard/" which means the initial request doesnt have the refreshToken cookie.
you might say you can try to remove the path restriction and have the refresh token sent to every route, but this beats the purpose of it and makes the app less secure, and its as if you are only using one access token that has a long expiry duration (in this example 1 month)
any thoughts?
25 Replies
@Horse guard wasp this is basically when you implement auth on your own right?
Horse guard waspOP
i dont know, i'm new to nextjs, i'm only used to react.
also isn't this supposed to be the norm? with most backends employing this auth method? are most nextjs users just using it as their entire app without a separate backend?
when it comes to implemting my own auth for this, how should it be done? should i use auth.js and customize it to suite this need (i'm not sure this is possible)
or should i ignore it completely and start from scratch.
what i think is possible is to have all pages act as client side, and do their fetching on their own, and only use server side rendering for pages that don't require data that is behind an auth wall. for example blog post, ecommerce product page.
bottom line and most important thing:
i don't know if it's possible to request a server rendered page, that fetches data dynamically from an external backend, with that data being protected, and the backend employing the auth process described above (which is the norm)
also isn't this supposed to be the norm? with most backends employing this auth method? are most nextjs users just using it as their entire app without a separate backend?
when it comes to implemting my own auth for this, how should it be done? should i use auth.js and customize it to suite this need (i'm not sure this is possible)
or should i ignore it completely and start from scratch.
what i think is possible is to have all pages act as client side, and do their fetching on their own, and only use server side rendering for pages that don't require data that is behind an auth wall. for example blog post, ecommerce product page.
bottom line and most important thing:
i don't know if it's possible to request a server rendered page, that fetches data dynamically from an external backend, with that data being protected, and the backend employing the auth process described above (which is the norm)
and also auth strategey also depends on the products
because if you see those banking/payroll services
there is no refresh token or something, if your session is expired, you are just redirected to the login page
also some auth providers don't support refresh token
Horse guard waspOP
true, different apps employ different auth strategies
but so is the answer to my last question that its not possible?
but so is the answer to my last question that its not possible?
sorry what was your last question? as you had lots of questions lol
Horse guard waspOP
no worries haha, thx for answering all my posts btw
my last question:
bottom line and most important thing:
i don't know if it's possible to request a server rendered page, that fetches data dynamically from an external backend, with that data being protected, and the backend employing the auth process described above (which is the norm)
my last question:
bottom line and most important thing:
i don't know if it's possible to request a server rendered page, that fetches data dynamically from an external backend, with that data being protected, and the backend employing the auth process described above (which is the norm)
well, I think you should append token to get your page rendered on the server with dynamic data from an external backend
but as you said you are new to next.js, what kind of page it is and what kind of data do you have inside it?
Horse guard waspOP
1, i dont understand what you mean.
2, for an example, a protected dashboard page that shows some statistic data that changes frequently, and this data is on the external api behind an auth wall.
2, for an example, a protected dashboard page that shows some statistic data that changes frequently, and this data is on the external api behind an auth wall.
well, if it's frequent data, I feel like it doesn't need to be rendered on the server
client side data fetching will be better
Horse guard waspOP
whats the advantage of server side fetching INfrequent data?
you can pre-render, or pre-build those pages
also for those user-specific data, SSR or CSR will be better
that's why GPT moved from Next to Remix (even in remix heavily relying on CSR)
Horse guard waspOP
doesnt matter if the data changes frequently or not, when prerendering, next is going to fetch the data from the external backend and generate the page on the server regardless, wether it changes frequently or not is on the side of the external backends' database
Korat
+1 that there should be more support in docs for this scenarion, I've been dealing with this from the beginning (1y/ago) and still am not sure if im doing it in the best way.
What I ended up doing is saving the access and refresh tokens in server side cookies and using the nextjs's server as proxy meaning that every client requests that needs to request an authenticated endpoint from an external server first need to move through the nextjs server to access that cookies and forward it to the backend.
What I ended up doing is saving the access and refresh tokens in server side cookies and using the nextjs's server as proxy meaning that every client requests that needs to request an authenticated endpoint from an external server first need to move through the nextjs server to access that cookies and forward it to the backend.
I believe in such cases (I call them ERP apps that has an external backend for all the logic and stuff) SPA's are the best fit for it.
But in the other hand we all want to take advantage of React Server stuff.
But in the other hand we all want to take advantage of React Server stuff.
I have most of the apps working in such way now where refresh token works but not sure what to say about performance
I hope this helps you have an idea about it
Horse guard waspOP
i salute you, because i'm trying to learn next js auth for the last 7 days and it's making me feel not so smart, thinking this is simple and i'm just not getting it.
when it comes to your example, i'm not sure i understand it correctly when you say you're saving the access and refresh tokens in server side cookies, because cookies are saved in browser and the server is stateless
when it comes to your example, i'm not sure i understand it correctly when you say you're saving the access and refresh tokens in server side cookies, because cookies are saved in browser and the server is stateless
Korat
I mean the cookies set on server actions or route handlers marked with secure and httponly flags cannot be accessed using js even though you can see them in the browser devtools.
But yeah don’t feel like that, its a bit tricky because there is no docs regarding this case.
Even though there are good docs in nextjs https://nextjs.org/docs/pages/building-your-application/authentication that can help you and inspire you
But yeah don’t feel like that, its a bit tricky because there is no docs regarding this case.
Even though there are good docs in nextjs https://nextjs.org/docs/pages/building-your-application/authentication that can help you and inspire you