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",
},
],
},
];
},
};
CodePudding user response:
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 andgetInitialProps
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
CodePudding user response:
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',
},
],
},
]
},
}