---
title: "Instant server side redirects with Vercel"
url: https://monogram.io/blog/vercel-server-side-redirects
description: "Redirect users to their dashboard when they're logged in."
date: 2022-05-23
authors: ["Claudio"]
---

# Instant server side redirects with Vercel

**Published:** May 23, 2022 | **Authors:** Claudio, Director of Engineering | **Categories:** SEO

---

Redirect users to their dashboard when they're logged in.

Users want to get to their content as fast as possible and with the least amount of hurdles. Notice how [github.com](https://github.com/) and [vercel.com](http://vercel.com/) shows your dashboard right away, without having to make any more clicks.

*"There's a special place in hell for startups that when I'm already logged in don't redirect me to their dashboard from their frontpage but make me click Log In." -* [*@levelsio*](https://twitter.com/levelsio/status/1480249526325682179)

The bottom line is, users hitting your root URL expect to be brought to their home screen if they’re already logged in.

Statically generating sites — also known as the Jamstack — [is the best way to build websites](https://monogram.io/blog/jamstack-vs-wordpress) and web apps. While the Jamstack offers unique advantages in SEO, Performance, Editor experience, and more, there are inherently some limitations to entirely static sites. One particular challenge is implementing these instant redirects on landing pages that users expect.

One solution to this is to use a [client side redirect](https://www.w3.org/TR/WCAG20-TECHS/G110.html). Self-descriptively, this happens with JavaScript on the user’s browser, which leads to two fundamental issues. First, the user must wait for the page to be loaded. The markup and JavaScript must be loaded onto the page before the redirect is initiated, which can take multiple seconds — leading a web app to feel sluggish. Second, the user will see a flash of styled content. Seeing the marketing site for [raster.app](http://raster.app/), for example, before being redirected to your workspace would cause a poor user experience.

Vercel offers a nifty solution **without sacrificing the advantages of Jamstack** using the [project config file](https://vercel.com/docs/project-configuration). The **vercel.json file** has tons of configuration options for your project, but has some especially cool ones involving redirects and rewrites. Here, we’ll focus on [redirects](https://vercel.com/docs/project-configuration#project-configuration/redirects). Unconditional redirects, of course, are supported simply by settings the source and destination keys on the JSON object. However, with the *has* parameter, you can have more fine control over in what circumstances the redirect occurs. This includes redirecting conditionally based on cookies.

In a Next.JS application, just use the **next.config.js** file. The object structure is the same.

[See the Live Demo](https://redirect-rewrite-demo.monogram.dev/)

## Redirect if the user is signed in

```json
"redirects": [{
  "source": "/",
  "destination": "/dashboard",
  "has": {
    "type": "cookie",
    "key": "user-is-signed-in",
    "value": "yes"
  }
}]
```

If (and only if) the user has the user-is-signed-cookie set to yes, the user will be redirected from the root URL to /dashboard.

Better yet, if you want to redirect a user to a unique URL (based on their username, for example), you could set a cookie *user-id* with a value that contains their id. Then, use a regex-like string in the *value* to have it accessible in the redirect:

## Redirect to a unique URL

```json
"redirects": [{
  "source": "/",
  "destination": "/u/:userId",
  "has": {
    "type": "cookie",
    "key": "user-id",
    "value": "u-(?<userId>.*)"
  }
}]
```

This redirect makes any request with cookie *user-id* redirect to the URL that contains their ID. At this point, all that’s left is setting these cookies when the user logs in.

## Set the cookies when the user logs in

```
onAuthStateChanged(auth, (user) => {
  if (user) {
    setCookie("user-is-signed-in", "yes")
    setCookie("user-id", `u-${user.uid}`)
  } else {
    setCookie("user-is-signed-in", "no")
    eraseCookie("user-id")
  }
})
```

Because this redirect happens in the backend on Vercel’s side, there are no sacrifices to speed or reliability — in fact, static data fetching methods (like *getStaticProps* in Next.js) still work.

For security reasons, client-side cookies should not be used for authentication — but only for preserving state client side. Secure auth info should rely on [secure server-set cookies](https://www.appsecmonkey.com/blog/cookie-security).

## Use rewrites instead of redirects

Rewrites can be a better user experience, since the user doesn't have to wait for the redirect to occur, and the URL doesn't change. Instead of *redirects*, use *rewrites* in your config file — everything else should work the same.

```json
"rewrites": [{
  "source": "/",
  "destination": "/dashboard",
  "has": {
    "type": "cookie",
    "key": "user-is-signed-in",
    "value": "yes"
  }
}]
```

After these simple changes to your vercel.json file, users will get an instant redirect or rewrite when they visit your site’s root URL, as they expect to. No more extra clicks.

![Image](https://cdn.sanity.io/images/zep746qw/production/bd22b1eb7b564ac8011e8bf89627d5cf66248359-2184x1593.png)

## One more thing…

As with everything we build, we ensure that our performance and core values of accessibility, best practices, and SEO don't suffer. That's why even our code demo doesn't compromise on speed. And we couldn't have done it without [Vercel](https://vercel.com/).

## Contact Us

[Build what comes next](https://monogram.io/#contact) | Email: [hello+llm@monogram.io](mailto:hello+llm@monogram.io)

Provide your contact details and claim a time to meet. We'll help you do the rest.

Monogram is an Applied AI Studio based in Atlanta that designs and deploys production AI systems — connecting models, data, workflows, and enterprise software to automate real work.

The contact form collects: name, email, company, estimated budget (USD), a project description, and how you heard about Monogram.

Not sure where to start? Tell us what you're trying to automate or build — we'll help you figure out where AI fits.


---

**More content:** [Home](/.md) | [About](/about.md) | [Work](/work.md) | [Engineering](/engineering.md)

Monogram helps companies, organizations, and firms adopt AI by designing and building proof of concepts (POCs), MVPs, intelligent workflows, and production-ready AI applications.

Website designed and developed by [Monogram](https://monogram.io)