redirect-an-unauthorized-user.md

Redirect An Unauthorized User

With the Page Router in earlier next version, we could do a server-side authorization check in getServerSideProps and then return a redirect response in order to redirect the user to a page they are authorized for.

That might look something like this:

export async function getServerSideProps(context) {
  const session = await getServerAuthSession()
  const ability = getAbility({user: session?.user})

  if (!ability.can('create', 'Post')) {
    return {
      redirect: {
        destination: '/posts',
        permanent: false,
      },
    }
  }
 
  return {
    props: {},
  }
}

We can achieve the same thing with the App Router, but with a bit less code. The next/navigation package has a redirect function that we can invoke directly in a component. This will redirect the user instead of rendering the component to HTML.

import { redirect } from 'next/navigation'

export default async function CreatePost() {
  const session = await getServerAuthSession()
  const ability = getAbility({user: session?.user})

  if (!ability.can('create', 'Post')) {
    redirect('/posts')
  }

  // JSX follows
  return (...)
}