#Pass redirect
1 messages · Page 1 of 1 (latest)
In Next.js, you can handle unauthorized access by redirecting users to a login or error page as appropriate. This can be done using middleware or within the getServerSideProps function.
Here's an example of how you can use middleware to handle unauthorized access:
import type { NextRequest } from 'next/server'
export function middleware(request: NextRequest) {
const currentUser = request.cookies.get('currentUser')?.value
if (currentUser && !request.nextUrl.pathname.startsWith('/dashboard')) {
return Response.redirect(new URL('/dashboard', request.url))
}
if (!currentUser && !request.nextUrl.pathname.startsWith('/login')) {
return Response.redirect(new URL('/login', request.url))
}
}
export const config = {
matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'],
}
This middleware checks if a user is logged in and redirects them to the dashboard or login page as appropriate. The matcher config ensures that the middleware only applies to certain routes (source (https://nextjs.org/docs/app/building-your-application/authentication#handling-unauthorized-access)).
You can also handle redirects within the getServerSideProps function:
export async function getServerSideProps(context) {
const res = await fetch(`<https://.../data`>)
const data = await res.json()
if (!data) {
return {
redirect: {
destination: '/',
permanent: false,
},
}
}
return {
props: {}, // will be passed to the page component as props
}
}
In this example, if the fetched data is not available, the user is redirected to the home page (source (https://nextjs.org/docs/pages/api-reference/functions/get-server-side-props#redirect)).
Remember, while middleware can be useful for initial validation, it should not be the sole line of defense in protecting your data. The bulk of security checks should be performed in the Data Access Layer (DAL) (source (https://nextjs.org/docs/pages/building-your-application/authentication#handling-unauthorized-access)).