Private routes
Unanswered
svidskiy posted this in #help-forum
svidskiyOP
Can you advise on the best approach? I want to implement the logic for private routes, but I'm facing a small dilemma.
I have authentication happening on an external server to which I have no access. The authentication is implemented through JWT tokens (access, refresh); after authentication, cookies are set in the browser.
I have a main page with a header where the UI depends on the user's authentication status. If they are authenticated, a menu is displayed; if not, there's a login button.
There are many implementations like this: an initial authentication page, followed by a redirect to a private section (like a dashboard implementation). This is simple to implement through the same cookie check and middleware. But I haven't yet seen a proper implementation of my case, in general, I haven't seen such.
In my case, implementing a redirect to authentication through middleware is no longer an option because users simply won't be able to navigate the site if they are not authenticated.
I've thought of several options:
Create a group of routes; in the group, make a layout and in it, perform a check. Should I request the user? (A little addition: I need to redirect to the main page and open a modal, so the layout should always be client-side, is this valid?)
On the server side: create a separate route handler, in it, get the cookies and request the user (and perform the necessary checks. But, as I mentioned in the first option, I need to open a modal, so this option probably falls away. How valid is this approach?)
I'm a bit uneasy about the multiple API calls to get the user: once to pass to the client, and a second time on the server to check their authentication.
Addition: I have a user provider (in the main layout I request the user on the server side) and I pass it into the context for access throughout the application (because in the header I need logic to check the user for authentication).
I have authentication happening on an external server to which I have no access. The authentication is implemented through JWT tokens (access, refresh); after authentication, cookies are set in the browser.
I have a main page with a header where the UI depends on the user's authentication status. If they are authenticated, a menu is displayed; if not, there's a login button.
There are many implementations like this: an initial authentication page, followed by a redirect to a private section (like a dashboard implementation). This is simple to implement through the same cookie check and middleware. But I haven't yet seen a proper implementation of my case, in general, I haven't seen such.
In my case, implementing a redirect to authentication through middleware is no longer an option because users simply won't be able to navigate the site if they are not authenticated.
I've thought of several options:
Create a group of routes; in the group, make a layout and in it, perform a check. Should I request the user? (A little addition: I need to redirect to the main page and open a modal, so the layout should always be client-side, is this valid?)
On the server side: create a separate route handler, in it, get the cookies and request the user (and perform the necessary checks. But, as I mentioned in the first option, I need to open a modal, so this option probably falls away. How valid is this approach?)
I'm a bit uneasy about the multiple API calls to get the user: once to pass to the client, and a second time on the server to check their authentication.
Addition: I have a user provider (in the main layout I request the user on the server side) and I pass it into the context for access throughout the application (because in the header I need logic to check the user for authentication).
8 Replies
"In my case, implementing a redirect to authentication through middleware is no longer an option because users simply won't be able to navigate the site if they are not authenticated."
I dont think I understood. Like if they try to access a private route like
"/app/dashboard" and they're not logged in, you could just redirect them to "/login" or "/" if there's where people login.
Right?
I dont think I understood. Like if they try to access a private route like
"/app/dashboard" and they're not logged in, you could just redirect them to "/login" or "/" if there's where people login.
Right?
@Noronha "In my case, implementing a redirect to authentication through middleware is no longer an option because users simply won't be able to navigate the site if they are not authenticated."
I dont think I understood. Like if they try to access a private route like
"/app/dashboard" and they're not logged in, you could just redirect them to "/login" or "/" if there's where people login.
Right?
svidskiyOP
I'm saying that if a check is implemented in the middleware, for instance, for the presence of a token in the cookies, and if it's not found there, then the user is redirected to a login page. I have many public pages like home, about, help, contests, etc. In this case, the user wouldn't be able to navigate through these pages because he would constantly be redirected (if he is not authorized).
You can configure in your middleware exactly what paths it should check... Thus you can protect your private routes and leave your public routes free.
svidskiyOP
Oh, it seems I was a bit foolish and forgot about this. Should I just perform a check for the presence of the token, or would it be best to request user and make a decision based on the response from server?
Do I understand correctly that this request will be cached for optimization purposes? (If I do it in middleware)
Checkout this dummy-not-to-use-in-real-life example, let me know if this helps you in anyway:
https://github.com/mtnoronha/nextjs-playground/blob/main/middleware.ts
https://github.com/mtnoronha/nextjs-playground/blob/main/middleware.ts
@Noronha Checkout this dummy-not-to-use-in-real-life example, let me know if this helps you in anyway:
https://github.com/mtnoronha/nextjs-playground/blob/main/middleware.ts
svidskiyOP
It looks like a solution, I can't test it know, but it seems to be what I need. Thank you 
I hope it helps you 🙂 Good luck!