How can I use Next.js redirects? - reactjs

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",
},
],
},
];
},
};

Answer 1

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',
},
],
},
]
},
}

Answer 2

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