Issues with Route Protection and Redirection Using @supabase/ssr

[sayem314]

Environment

• Next.js version: 14.1.0
• @supabase/ssr version: 0.1.0

Description

I'm currently working on implementing route protection and automatic redirection in my Next.js project using @supabase/ssr. Although I've managed to handle cookies within middleware for my dashboard group routes, I'm facing a challenge when it comes to protecting these routes and redirecting based on the authentication state.

Expected Behavior

• When a user is not logged in, they should be redirected to the login page upon trying to access any route within the dashboard group.
• Once the user is logged in, they should be automatically redirected to the dashboard if they attempt to visit the login or signup pages.

Current Behavior

• Currently, there's no clear way to protect dashboard group routes and perform the expected redirections.

Project Structure

.
├── app
│   ├── apple-icon.png
│   ├── (auth) <----------------don't show if user is logged in
│   │   ├── components
│   │   │   ├── BodyInput.tsx
│   │   │   └── FooterLinks.tsx
│   │   ├── login
│   │   │   └── page.tsx
│   │   ├── password-reset
│   │   │   ├── [code]
│   │   │   │   └── page.tsx
│   │   │   └── page.tsx
│   │   └── signup
│   │       └── page.tsx
│   ├── auth
│   │   └── callback
│   │       └── route.ts
│   ├── (dashboard) <----------- protect this group
│   │   ├── apps
│   │   │   ├── page.tsx
│   │   │   └── servers.tsx
│   │   ├── header.tsx
│   │   └── layout.tsx
│   ├── error
│   │   └── page.tsx
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx
│   ├── not-found.tsx
│   ├── page.tsx <------------ public landing page so skip adding cookies with middleware
│   ├── private
│   │   └── page.tsx
│   └── providers.tsx
├── bun.lockb
├── middleware.ts
├── next.config.mjs
├── package.json
├── postcss.config.js
├── public
│   ├── next.svg
│   └── vercel.svg
├── README.md
├── tailwind.config.ts
├── tsconfig.json
└── utils
    └── supabase
        ├── client.ts
        └── server.ts

Additional Context

Any guidance or recommendations on how to implement this functionality with @supabase/ssr would be greatly appreciated.

[charislam]

The pattern we've been using in our examples is to check for a valid user at the top of a Server Component, and immediately redirect if one isn't found. (See the final step in our Next.js guide.)

Does this work for your use case?

[sayem314]

@charislam If you are talking about this snippet, then it requires explicit code to be written on all pages.tsx file. Not very convenient. I want to do it in middleware for group (dashboard).

[charislam]

Ahh I see. So you've run into a bit of a Next.js limitation there. As far as I know, you can't detect the route group in middleware.

One option would be to add dashboard to all your paths so you can match against it, but I can understand if you don't want to change your URL structure to work around a technical limitation.

Another option is possibly hacking the route group layout to rerender on every page change and putting the logic there. But to be honest, I haven't tried this and it seems to go against the App Router layout ethos.

Sorry I can't be more help, would love to see if it someone else has come up with a better pattern for handling this.

[sayem314]

Okay, gotcha. Thanks for the detailed comment. So for now I think we must use hacks/tricks to workaround this until route group middleware is available.

[Elsass1]

@sayem314 what did you do to solve your problem? I am facing the same situation.