hasNot for Headers, Redirects, and Rewrites

[laugharn]

Update: We've released a solution for adding conditional logic for redirects, rewrites, and headers with Middleware in Next.js 12. Since this allows you to write code, you're not longer constrained by the configuration file limitations which previously blocked doing a hasNot type key.

---

Describe the feature you'd like to request

Next 10.2 introduced the has property, which is an incredible feature that enables a laundry list of feature requests (redirect authenticated users from / to /dashboard, getStaticProps on subdomains, the list goes on).

Unfortunately, the number one feature on my list doesn't seem to be possible at the moment: (I caveat this by saying this might already be possible and I'm doing it wrong) I would love to be able to redirect or rewrite a route if the request does not have a cookie, header, host, or query. The most common use case for this would be to redirect a request for something like /private/:path* to /login?redirect=:path but I'm sure there are plenty of other creative implementations that could be unlocked.

Describe the solution you'd like

A hasNot¹ property for headers, redirects, and rewrites that acts like the hasProperty but in reverse. Given the above scenario, it would be great to be able to do something like:

redirects() {
  return [
    {
      destination: "/login?redirect=:path*",
      hasNot: [
        {
          key: 'auth-cookie',
          type: "cookie",
        },
      ],
      permanent: false,
      source: "/private/path:*",
    },
  ];
},

¹ - This is awkward naming, but English kind of fails us here. I picked hasNot because it's a pretty clear and concise partner to has, and other frameworks have used it, even if they discarded it for something differently awkward.

Describe alternatives you've considered

My use case is pretty specifically around auth, so the alternatives I currently implement are either:

• A cookie check in getServerSideProps
• A client side loading UI and redirect

These are perfectly fine, but the DX of handling this at the config level would be amazing!

[elbasan]

Exactly what I am looking for! Hope this gets implemented in the near future

https://stackoverflow.com/questions/67512961/next-js-redirects-redirect-if-user-has-no-token

[bradbarrow]

Just what I need. Arguably, I would prefer to have this solved at the config level (sub-path locale redirects) but I figured one could achieve it with redirects in next.config.js, by matching on has.key.cookie of NEXT_LOCALE or has.key.header of Accept-Language, but sadly I can't check for the lack of a NEXT_LOCALE cookie.

Can definitely see this being useful elsewhere too

[ptrhck]

Is this on the roadmap?

[mrlaseptima]

No one answer you bro. No one care to us here.

[mrlaseptima]

What are you doing, dear Vercel ?
Where are the contributors ?
Do this for us, please. We need this. It's simple.
Just add hasNot 🤦‍♂️

[andrewfairlie]

@mrlaseptima if it's simple I'm sure the community would value your pull request with your solution. If it's good enough, I see no reason why it wouldn't be accepted and merged.

We're not entitled to every feature we ask for, but this is an open-source project and instead of bemoaning the lack of contributions you can contribute to it yourself.

[laugharn]

#27431 (review) exciting news, it looks like this is on the team's radar.

[patryk-smc]

In a meantime, anyone figured out a workaround for this (via next.config.js)?

[patryk-smc]

Thanks, unfortunately I need to use query params. This is the logic I'm looking into implementing.

catch all (*)

if request has X query param
- rewrite to api route
- api does authentication and redirects back to the requested url with Y query param

else if request has Y query param
- render requested page

else
- show 404 or other page

[valoricDe]

Couldn't you check for query param Y and render requested page. In all other cases you direct to api which then forwards to error page if query param X is not given?

[patryk-smc]

Mind to elaborate? Whatever I do, I finally end with either infinite loop or breaking Next internals.

[valoricDe]

{
  source: '/base/:path(.*)',
  destination: '/base/:path',
  has: [{ type: 'query', key: 'Y' }],
},
{ source: '/base/:path(.*)', destination: `/api/:path` },

then you create in api folder a [...catchAll].ts file and check in

function handler(req: NextApiRequest, res: NextApiResponse) {
    if(!req.query.X) {
      res.redirect('/error')
      return
    }
    do auth
}

if this not helps I also have no idea.

[patryk-smc]

It only works for paths not used by pages, but thank you for your time!

[skoob13]

Next 12 introduced the middleware that solved the issue of hasNot absence for our case. The most annoying case was checking the absence of session cookie. Following is how we implemented hasNot with a middleware in the root of pages folder:

import { NextRequest, NextResponse } from 'next/server';

export function middleware(req: NextRequest) {
  if (
    req.nextUrl.pathname.match(/\/(account|admin|checkout|confirmation).*/) &&
    !req.cookies.sessionid
  ) {
    return NextResponse.redirect('/signin', 307);
  }
}

[balazsorban44]

When the user does have the sessionid cookie and continues to one of the protected pages, how do you show the user that they are logged in? How do you start fetching the protected content?

[skoob13]

@balazsorban44 we have the link with preload attribute that fetches the user. It usually happens before the page load, so the fetch on mount already has its data, however, if it happens after we show the skeletons instead of the real UI. To avoid flickering we use the same approach as Next.js uses for FOUC.

[leerob]

Update: We've released a solution for adding conditional logic for redirects, rewrites, and headers with Middleware in Next.js 12. Since this allows you to write code, you're not longer constrained by the configuration file limitations which previously blocked doing a hasNot type key.