Advice on handling auth in middleware with conditional routing based on Supabase auth
Unanswered
La Sagra's Flycatcher posted this in #help-forum
La Sagra's FlycatcherOP
Hello, I have a question for more experienced Next devs:
I'm using Supabase nextjs auth helers, which basically means that the auth state is determined by the cookies and therefore I can get the user/session objects from client components, server components, middleware, and in api routes.
In their tutorial, one of the design patterns they used was have a middleware condition that redirected users to /signup if they tried to GET /account without being authenticated. I implemented this, but then noticed the following issue.
My website lets you access '/' whether or not you're authenticated, and there's a link to /account. The desired behavior is that the middleware will redirect the user to /signup if they aren't authed and click on the /account link in '/'. the issue is that for a few minutes after a user changes auth state (signs in or signs out), the link still takes them to the wrong route (/account when newly signed out and /signup when newly authed).
I believe that this is because Nextjs caches routes (pretty sure it's caching and not pre-fetching since the docs say that pre-fetching doesn't occur on local + no requests are being made in the network tab of dev tools).
Should I try to do path invalidation with next js or just change away from middleware conditional routing to having the /account server component page.js redirect to signup if no user object exists?
Thanks!
I'm using Supabase nextjs auth helers, which basically means that the auth state is determined by the cookies and therefore I can get the user/session objects from client components, server components, middleware, and in api routes.
In their tutorial, one of the design patterns they used was have a middleware condition that redirected users to /signup if they tried to GET /account without being authenticated. I implemented this, but then noticed the following issue.
My website lets you access '/' whether or not you're authenticated, and there's a link to /account. The desired behavior is that the middleware will redirect the user to /signup if they aren't authed and click on the /account link in '/'. the issue is that for a few minutes after a user changes auth state (signs in or signs out), the link still takes them to the wrong route (/account when newly signed out and /signup when newly authed).
I believe that this is because Nextjs caches routes (pretty sure it's caching and not pre-fetching since the docs say that pre-fetching doesn't occur on local + no requests are being made in the network tab of dev tools).
Should I try to do path invalidation with next js or just change away from middleware conditional routing to having the /account server component page.js redirect to signup if no user object exists?
Thanks!
8 Replies
La Sagra's FlycatcherOP
https://github.com/bztravis88/gifgrams <- repo, pretty simple project at the moment
Japanese anchovy
You should be able to define regex for the routes that this doesn't protect. I'm doing the same thing here and use this in my middleware
// See "Matching Paths" below to learn more
export const config = {
matcher: [
/*
* Match all request paths except for the ones starting with:
* - api (API routes)
* - _next/static (static files)
* - _next/image (image optimization files)
* - favicon.ico (favicon file)
/
'/((?!api|_next/static|_next/image|favicon.ico|login|assets/).*)',
],
};
// See "Matching Paths" below to learn more
export const config = {
matcher: [
/*
* Match all request paths except for the ones starting with:
* - api (API routes)
* - _next/static (static files)
* - _next/image (image optimization files)
* - favicon.ico (favicon file)
/
'/((?!api|_next/static|_next/image|favicon.ico|login|assets/).*)',
],
};
Basically, my middleware checks for the existance/validation of our token and then if that is valid lets the user pass or if not sends them to the login page
which looks like yours does the same type of thing expect your manually defining all the protected/unprotected routes
You can turn the prefetching off for the account link... could be the issue maybe
La Sagra's FlycatcherOP
@Japanese anchovy thanks taking a look! ðŸ™
I think that in this case the issue isn't that I'm running middleware when I don't want to be (I'd like to run the middleware on /account so that I can redirect users who aren't authenticated
You mentioned I can turn off preteching for the account path. how can I do this? I'm not finding it in the docs
I think that in this case the issue isn't that I'm running middleware when I don't want to be (I'd like to run the middleware on /account so that I can redirect users who aren't authenticated
You mentioned I can turn off preteching for the account path. how can I do this? I'm not finding it in the docs
La Sagra's FlycatcherOP
prefetching doesn't happen in development anyway, it seems like it's the cache that's the problem (referring to client side caching of server components found here in the docs: https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#client-side-caching-of-rendered-server-components
La Sagra's FlycatcherOP
I'm also unable to revalidate the cache of the server component /acount because there's an error
and I'd prefer not to use server actions since they're in alpha anyway
How else can I revalidate the /acount path? I feel like there has to be a way
Error: Invariant: static generation store missing in revalidateTag /accountand I'd prefer not to use server actions since they're in alpha anyway
How else can I revalidate the /acount path? I feel like there has to be a way