---
title: Post Login Redirect
description: Change post-login redirection paths and configure login screen behavior using SuperTokens.
sidebar:
  order: 1
---

## Change redirection path post login

<DependentContent passive group="frontend-prebuilt-ui">
<ContentOption title="Reactjs" value="reactjs">
By default, the user is redirected to the the `/` route on your website post login. To change this, you can use the `getRedirectionURL` function on the frontend as shown below:
</ContentOption>
<ContentOption title="Angular" value="angular">
By default, the user is redirected the the `/` route on your website post login. To change this, you can use the `getRedirectionURL` function on the frontend as shown below:
</ContentOption>
</DependentContent>

<CodeGroup group="frontend-prebuilt-ui">
<Tab title="Reactjs" value="reactjs">
```tsx
import SuperTokens from "supertokens-auth-react";

SuperTokens.init({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  getRedirectionURL: async (context) => {
    if (context.action === "SUCCESS" && context.newSessionCreated) {
      if (context.redirectToPath !== undefined) {
        // we are navigating back to where the user was before they authenticated
        return context.redirectToPath;
      }
      if (context.createdNewUser) {
        // user signed up
      } else {
        // user signed in
      }
      return "/dashboard";
    }
    return undefined;
  },
  recipeList: [
    /* Recipe list */
  ],
});
```
</Tab>
<Tab title="Angular" value="angular">
```tsx check=false reason="Requires SDK globals from surrounding application"
// this goes in the auth route config of your frontend app (once the pre-built UI script has been loaded)

supertokensUIInit({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  getRedirectionURL: async (context) => {
    if (context.action === "SUCCESS" && context.newSessionCreated) {
      if (context.redirectToPath !== undefined) {
        // we are navigating back to where the user was before they authenticated
        return context.redirectToPath;
      }
      if (context.createdNewUser) {
        // user signed up
      } else {
        // user signed in
      }
      return "/dashboard";
    }
    return undefined;
  },
  recipeList: [
    /* Recipe list */
  ],
});
```
</Tab>
</CodeGroup>

The user will be redirected to the provided URL on:
- Successful sign up.
- Successful sign in.
- Successful email verification post sign up.
- If the user is already logged in.

If you want to redirect the user to a different domain, then you can first redirect them to a specific path using the function above, which further redirects them to the final domain.

:::info
Please refer to [this page](/references/frontend-sdks/hooks#redirection-callback-hook) to learn more about the `getRedirectionURL` hook.
:::

## Redirect user to the login page

<DependentContent passive group="frontend-prebuilt-ui">
<ContentOption title="Reactjs" value="reactjs">
Use the `redirectToAuth({show?: "signin" | "signup", redirectBack?: boolean}?)` function to redirect the user to the login screen. For example, you may want to call this function when the user clicks on the login button.
</ContentOption>
<ContentOption title="Angular" value="angular">
Redirect the user to the `/auth` (this is the default path for the pre-built UI)
</ContentOption>
<ContentOption title="Vue" value="vue">
Redirect the user to the `/auth` (this is the default path for the pre-built UI)
</ContentOption>
</DependentContent>

<CodeGroup group="frontend-prebuilt-ui">
<Tab title="Reactjs" value="reactjs">
```tsx
import React from "react";
import { redirectToAuth } from "supertokens-auth-react";

function NavBar() {
  async function onLogin() {
    redirectToAuth();
  }
  return (
    <ul>
      <li>Home</li>
      <li onClick={onLogin}>Login</li>
    </ul>
  );
}
```
</Tab>
<Tab title="Angular" value="angular">
```ts
import { Component } from "@angular/core";

@Component({
  selector: "nav-bar",
  template: `
    <ul>
      <li>Home</li>
      <li (click)="onLogin()">Login</li>
    </ul>
  `,
})
export class NavBarComponent {
  async onLogin() {
    window.location.href = "/auth?show=signin&redirectToPath=" + encodeURIComponent(window.location.pathname);
  }
}
```
</Tab>
<Tab title="Vue" value="vue">
```html
<template>
  <ul>
    <li>Home</li>
    <li @click="onLogin">Login</li>
  </ul>
</template>

<script>
  export default {
    name: "NavBarComponent",
    methods: {
      async onLogin() {
        window.location.href = "/auth?show=signin&redirectToPath=" + encodeURIComponent(window.location.pathname);
      },
    },
  };
</script>
```
</Tab>
</CodeGroup>

<DependentContent passive group="frontend-prebuilt-ui">
<ContentOption title="Reactjs" value="reactjs">
- Call `redirectToAuth({show: "signin"})` to take them to the sign in screen
- Call `redirectToAuth({show: "signup"})` to take them to the sign up screen
- If you do not want the user to be redirected to the current page post sign in, use `redirectToAuth({redirectBack: false})`
</ContentOption>
<ContentOption title="Angular" value="angular">
- Set `show=signin` to take them to the sign in screen
- Set `show=signup` to take them to the sign up screen
- Set `redirectToPath` to redirect the user to a specific page after they have signed in, or you can skip it to take them to the `/` route (which is the default one).
</ContentOption>
<ContentOption title="Vue" value="vue">
- Set `show=signin` to take them to the sign in screen
- Set `show=signup` to take them to the sign up screen
- Set `redirectToPath` to redirect the user to a specific page after they have signed in, or you can skip it to take them to the `/` route (which is the default one).
</ContentOption>
</DependentContent>

## Showing sign up by default

The login screen shows the sign in UI by default, to change that, you can set the following config:

<CodeGroup group="frontend-prebuilt-ui">
<Tab title="Reactjs" value="reactjs">
```tsx
import SuperTokens from "supertokens-auth-react";

SuperTokens.init({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  defaultToSignUp: true,
  recipeList: [
    /* ... */
  ],
});
```
</Tab>
<Tab title="Angular" value="angular">
```tsx check=false reason="Requires SDK globals from surrounding application"
// this goes in the auth route config of your frontend app (once the pre-built UI script has been loaded)

supertokensUIInit({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  defaultToSignUp: true,
  recipeList: [
    /* ... */
  ],
});
```
</Tab>
</CodeGroup>

---

## See also

<CardGroup cols={3}>
  <Card title="Protect Frontend Routes" href="/additional-verification/session-verification/protect-frontend-routes" />
  <Card title="Redirection Callback Hook" href="/references/frontend-sdks/hooks#redirection-callback-hook" />
  <Card title="Session Invalidation" href="/post-authentication/session-management/session-invalidation" />
  <Card title="Customize Sign-in Form" href="/authentication/email-password/customize-the-sign-in-form" />
  <Card title="Customize Sign-up Form" href="/authentication/email-password/customize-the-sign-up-form" />
</CardGroup>