Users want to get to their content as fast as possible and with the least amount of hurdles. Notice how github.com and 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
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 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. 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, 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. 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. 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.
Redirect if the user is signed in
"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
"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.
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.
"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.
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.