# 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`](https://nextjs.org/docs/pages/api-reference/functions/get-server-side-props#redirect)
response in order to redirect the user to a page they are authorized for.

That might look something like this:

```javascript
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](https://nextjs.org/docs/app/api-reference/functions/redirect) that we
can invoke directly in a component. This will redirect the user instead of
rendering the component to HTML.

```javascript
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 (...)
}
```