How can I use Next.js redirects?

Question

there! I want to configure the first screen as a login page. However, after logging in, we want to prevent the user from going to the login page after confirming the login with the cookie value. The configuration file is as below, and how can I solve it?

next.config.js

module.exports = {
  async redirects() {
    return [
      {
        source: "/",
        destination: "/login",
        permanent: false,
        has: [
          {
            type: "cookie",
            key: "authorized",
            value: "access_token",
          },
        ],
      },
    ];
  },
};

if you have auth setup on the client-side it would be best if you handle redirects on the client based on the auth context. — Idir Hamouch, Mar 11 '22 at 12:59

score 2 · Accepted Answer · answered Mar 15 '22 at 05:33

This doesn't look possible to me, since in the config we only can have static values, and authtoken will change for every login, UI side redirection must be handled from separate AuthContext like we do with react apps.

Another alternative to above approach

is having one more cookie like 'authorized' and it will have value let say true of false. So we can check for 'authorized' is it has value 'true', next.config is below for the same.

Reference: https://nextjs.org/docs/api-reference/next.config.js/redirects#header-cookie-and-query-matching

{
  reactStrictMode: true,
  async redirects() {
    return [
      {
        source: '/',
        destination: '/login',
        permanent: true,
        has: [
          {
            type: 'cookie',
            key: 'authorized',
            value: 'false',
          },
        ],
      },
    ]
  },
}

score 0 · Answer 2 · answered Mar 11 '22 at 15:51

A more robust and controllable approach would be using something like nextAuth

You would have to follow two steps

In order to cover both server side and client-side scenarios (users logging directly on a logged in page, implement both these ) you can conditionally redirect using a router.push on client and getInitialProps with a 302 on the server side

i.e Using nextAuth


import { useSession, getSession } from "next-auth/react"

export default function Page() {
  const { data: session, status } = useSession()

  if (status === "loading") {
    return <p>Loading...</p>
  }

  if (status === "unauthenticated") {
    return <p>Access Denied</p>
  }

// Do a router.push here  
}

Serverside

import { useSession, getSession } from "next-auth/react"

export default function Page() {
  const { data: session } = useSession()

  if (typeof window === "undefined") return null

  if (session) {
    // do a 302 redirect, using ctx.resShead via getInitialprops    


  return <p>Access Denied</p>
}

export async function getServerSideProps(context) {
  return {
    props: {
      session: await getSession(context),
    },
  }
}

In order for nextAuth to get cookies, declare it as a provider

see example here - https://stackoverflow.com/a/69418553/13749957

How can I use Next.js redirects?

2 Answers2

Another alternative to above approach