---
title: Embed the authentication form in a page
description: Embed authentication forms in your page using SuperTokens with redirection and popup options.
sidebar:
  icon: panels-top-left
  order: 40
---

## Before you start

:::warning
This example is relevant only if you use the React SDK with prebuilt UI components. 
:::


---

## Render the form in a page

The following example shows the scenario where you have a dedicated route, such as `/auth`, for rendering the Auth Widget. Upon a successful login, the user automatically redirects to the return value of `getRedirectionURL` (defaulting to `/`).

<CodeGroup group="react-router">
<Tab title="With React Router" value="yes">
<DependentContent group="version" label="Version">
<ContentOption title="V6" value="v6">
```tsx check=false reason="component excerpt imports application-local header and footer components"
import React from "react";
import SuperTokens from "supertokens-auth-react";
import EmailPassword from "supertokens-auth-react/recipe/emailpassword";
import { EmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/emailpassword/prebuiltui";
import { AuthPage } from "supertokens-auth-react/ui";
import Header from "./header";
import Footer from "./footer";
import { useNavigate } from "react-router-dom";

SuperTokens.init({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  getRedirectionURL: async (context) => {
    if (context.action === "TO_AUTH") {
      return "/auth"; // return the path where you are rendering the Auth UI
    } else if (context.action === "SUCCESS" && context.newSessionCreated) {
      return "/dashboard"; // defaults to "/"
    }
  },
  disableAuthRoute: true,
  recipeList: [
    /* ... */
  ],
});

function MyAuthPage() {
  const navigate = useNavigate();
  return (
    <div>
      <Header />
      <AuthPage preBuiltUIList={[EmailPasswordPreBuiltUI]} navigate={navigate} />
      <Footer />
    </div>
  );
}
```
</ContentOption>
<ContentOption title="V5" value="v5">
```tsx check=false reason="component excerpt imports application-local header and footer components"
import React from "react";
import SuperTokens from "supertokens-auth-react";
import EmailPassword from "supertokens-auth-react/recipe/emailpassword";
import { EmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/emailpassword/prebuiltui";
import { AuthPage } from "supertokens-auth-react/ui";
import Header from "./header";
import Footer from "./footer";
import { useHistory } from "react-router-dom5";

SuperTokens.init({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  getRedirectionURL: async (context) => {
    if (context.action === "TO_AUTH") {
      return "/auth"; // return the path where you are rendering the Auth UI
    } else if (context.action === "SUCCESS" && context.newSessionCreated) {
      return "/dashboard"; // defaults to "/"
    }
  },
  disableAuthRoute: true,
  recipeList: [
    /* ... */
  ],
});

function MyAuthPage() {
  const history = useHistory();
  return (
    <div>
      <Header />
      <AuthPage preBuiltUIList={[EmailPasswordPreBuiltUI]} navigate={history} />
      <Footer />
    </div>
  );
}
```
</ContentOption>
</DependentContent>
</Tab>
<Tab title="Without React Router" value="no">
```tsx check=false reason="component excerpt imports application-local header and footer components"
import React from "react";
import SuperTokens from "supertokens-auth-react";
import EmailPassword from "supertokens-auth-react/recipe/emailpassword";
import { EmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/emailpassword/prebuiltui";
import { AuthPage } from "supertokens-auth-react/ui";
import Header from "./header";
import Footer from "./footer";

SuperTokens.init({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  getRedirectionURL: async (context) => {
    if (context.action === "TO_AUTH") {
      return "/auth"; // return the path where you are rendering the Auth UI
    } else if (context.action === "SUCCESS" && context.newSessionCreated) {
      return "/dashboard"; // defaults to "/"
    }
  },
  disableAuthRoute: true,
  recipeList: [
    /* ... */
  ],
});

function MyAuthPage() {
  return (
    <div>
      <Header />
      <AuthPage preBuiltUIList={[EmailPasswordPreBuiltUI]} />
      <Footer />
    </div>
  );
}
```
</Tab>
</CodeGroup>

In the above code snippet:

1. Disabled the default Auth UI by setting `disableAuthRoute` to `true`.
2. Override the `getRedirectionURL` function inside the SuperTokens configuration to redirect to `/auth` when login becomes necessary and to redirect to `/dashboard` upon successful login.

Feel free to customize the redirection URLs as needed.

:::note[When the user visits the `/auth` page, they see the SignIn UI by default. To render the SignUp UI, append `show=signup` as a query parameter to the URL, like`/auth?show=signup`.]
:::

--- 

## Render the form in a page with no redirection

The following example shows the scenario where you have a dedicated route, such as `/auth`, for rendering the Auth Widget. However, upon a successful login, the user sees a logged in UI instead of getting redirected.

<CodeGroup group="react-router">
<Tab title="With React Router" value="yes">
<DependentContent group="version" label="Version">
<ContentOption title="V6" value="v6">
```tsx check=false reason="component excerpt imports application-local header and footer components"
import React from "react";
import SuperTokens from "supertokens-auth-react";
import EmailPassword from "supertokens-auth-react/recipe/emailpassword";
import { EmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/emailpassword/prebuiltui";
import { AuthPage } from "supertokens-auth-react/ui";
import Session from "supertokens-auth-react/recipe/session";
import Header from "./header";
import Footer from "./footer";
import { useNavigate } from "react-router-dom";

SuperTokens.init({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  disableAuthRoute: true,
  recipeList: [
    /* ... */
  ],
  getRedirectionURL: async (context) => {
    if (context.action === "SUCCESS") {
      return null; // this will not navigate the user away after successful login
    }
  },
});

function LandingPage() {
  let sessionContext = Session.useSessionContext();
  const navigate = useNavigate();
  if (sessionContext.loading) {
    return null;
  }
  if (sessionContext.doesSessionExist) {
    // We wrap this with <SessionAuth /> so that
    // all claims are validated before showing the logged in UI.
    // For example, if email verification is switched on, and
    // the user's email is not verified, then <SessionAuth />
    // will redirect to the email verification page.
    return (
      <Session.SessionAuth>
        <Header />
        You are logged in!
        <Footer />
      </Session.SessionAuth>
    );
  } else {
    return (
      <div>
        <Header />
        <AuthPage preBuiltUIList={[EmailPasswordPreBuiltUI]} navigate={navigate} />
        <Footer />
      </div>
    );
  }
}
```
</ContentOption>
<ContentOption title="V5" value="v5">
```tsx check=false reason="component excerpt imports application-local header and footer components"
import React from "react";
import SuperTokens from "supertokens-auth-react";
import EmailPassword from "supertokens-auth-react/recipe/emailpassword";
import { EmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/emailpassword/prebuiltui";
import { AuthPage } from "supertokens-auth-react/ui";
import Session from "supertokens-auth-react/recipe/session";
import Header from "./header";
import Footer from "./footer";
import { useHistory } from "react-router-dom5";

SuperTokens.init({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  disableAuthRoute: true,
  recipeList: [
    /* ... */
  ],
  getRedirectionURL: async (context) => {
    if (context.action === "SUCCESS") {
      return null; // this will not navigate the user away after successful login
    }
  },
});

function LandingPage() {
  let sessionContext = Session.useSessionContext();
  const history = useHistory();
  if (sessionContext.loading) {
    return null;
  }
  if (sessionContext.doesSessionExist) {
    // We wrap this with <SessionAuth /> so that
    // all claims are validated before showing the logged in UI.
    // For example, if email verification is switched on, and
    // the user's email is not verified, then <SessionAuth />
    // will redirect to the email verification page.
    return (
      <Session.SessionAuth>
        <Header />
        You are logged in!
        <Footer />
      </Session.SessionAuth>
    );
  } else {
    return (
      <div>
        <Header />
        <AuthPage preBuiltUIList={[EmailPasswordPreBuiltUI]} navigate={history} />
        <Footer />
      </div>
    );
  }
}
```
</ContentOption>
</DependentContent>
</Tab>
<Tab title="Without React Router" value="no">
```tsx check=false reason="component excerpt imports application-local header and footer components"
import React from "react";
import SuperTokens from "supertokens-auth-react";
import EmailPassword from "supertokens-auth-react/recipe/emailpassword";
import { EmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/emailpassword/prebuiltui";
import { AuthPage } from "supertokens-auth-react/ui";
import Session from "supertokens-auth-react/recipe/session";
import Header from "./header";
import Footer from "./footer";

SuperTokens.init({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  disableAuthRoute: true,
  recipeList: [
    /* ... */
  ],
  getRedirectionURL: async (context) => {
    if (context.action === "SUCCESS") {
      return null; // this will not navigate the user away after successful login
    }
  },
});

function LandingPage() {
  let sessionContext = Session.useSessionContext();
  if (sessionContext.loading) {
    return null;
  }
  if (sessionContext.doesSessionExist) {
    // We wrap this with <SessionAuth /> so that
    // all claims are validated before showing the logged in UI.
    // For example, if email verification is switched on, and
    // the user's email is not verified, then <SessionAuth />
    // will redirect to the email verification page.
    return (
      <Session.SessionAuth>
        <Header />
        You are logged in!
        <Footer />
      </Session.SessionAuth>
    );
  } else {
    return (
      <div>
        <Header />
        <AuthPage preBuiltUIList={[EmailPasswordPreBuiltUI]} />
        <Footer />
      </div>
    );
  }
}
```
</Tab>
</CodeGroup>

In the above code snippet, `Session.SessionAuth` wraps the logged-in component to validate all claims before displaying the logged-in UI. For instance, with email verification enabled, if a user's email remains unverified, `Session.SessionAuth` redirects to the email verification page.

:::note
In the above case, redirection may occur if a claim fails. For instance, in the case of an Email Verification claim, if the user's email is not verified, they redirect to the email verification page. To prevent redirection for failed claims, please contact [Discord](https://supertokens.com/discord) for assistance.
:::

--- 

## Render the form in a popup

The following example shows the scenario where you embed the Auth Widget in a popup, and upon successful login, you aim to close the popup.

<CodeGroup group="react-router">
<Tab title="With React Router" value="yes">
<DependentContent group="version" label="Version">
<ContentOption title="V6" value="v6">
```tsx
import React, { useState, useEffect } from "react";
import Modal from "react-modal";
import SuperTokens from "supertokens-auth-react";
import EmailPassword from "supertokens-auth-react/recipe/emailpassword";
import { EmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/emailpassword/prebuiltui";
import { AuthPage } from "supertokens-auth-react/ui";
import Session from "supertokens-auth-react/recipe/session";
import { useNavigate } from "react-router-dom";

SuperTokens.init({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  disableAuthRoute: true,
  recipeList: [
    /* ... */
  ],
  getRedirectionURL: async (context) => {
    if (context.action === "SUCCESS") {
      return null; // this will not navigate the user away after successful login
    }
  },
});

function AuthPopup() {
  let sessionContext = Session.useSessionContext();
  const navigate = useNavigate();
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => setIsModalOpen(true);
  const closeModal = () => setIsModalOpen(false);

  useEffect(() => {
    if (sessionContext.loading) {
      return;
    }
    if (sessionContext.doesSessionExist) {
      closeModal();
    } else {
      openModal();
    }
  }, [sessionContext]);

  if (sessionContext.loading) {
    return null;
  }

  return (
    <div style={{ textAlign: "center" }}>
      {sessionContext.doesSessionExist && (
        // We wrap this with <SessionAuth /> so that
        // all claims are validated before showing the logged in UI.
        // For example, if email verification is switched on, and
        // the user's email is not verified, then <SessionAuth />
        // will redirect to the email verification page.
        <Session.SessionAuth>
          <h2>You are logged In! </h2>
          <h3>UserId: {sessionContext.userId}</h3>
          <button onClick={() => Session.signOut()}>Sign Out</button>
        </Session.SessionAuth>
      )}

      <Modal isOpen={isModalOpen} contentLabel="Auth Modal">
        <AuthPage preBuiltUIList={[EmailPasswordPreBuiltUI]} navigate={navigate} />
      </Modal>
    </div>
  );
}
```
</ContentOption>
<ContentOption title="V5" value="v5">
```tsx
import React, { useState, useEffect } from "react";
import Modal from "react-modal";
import SuperTokens from "supertokens-auth-react";
import EmailPassword from "supertokens-auth-react/recipe/emailpassword";
import { EmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/emailpassword/prebuiltui";
import { AuthPage } from "supertokens-auth-react/ui";
import Session from "supertokens-auth-react/recipe/session";
import { useHistory } from "react-router-dom5";

SuperTokens.init({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  disableAuthRoute: true,
  recipeList: [
    /* ... */
  ],
  getRedirectionURL: async (context) => {
    if (context.action === "SUCCESS") {
      return null; // this will not navigate the user away after successful login
    }
  },
});

function AuthPopup() {
  let sessionContext = Session.useSessionContext();
  const history = useHistory();
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => setIsModalOpen(true);
  const closeModal = () => setIsModalOpen(false);

  useEffect(() => {
    if (sessionContext.loading) {
      return;
    }
    if (sessionContext.doesSessionExist) {
      closeModal();
    } else {
      openModal();
    }
  }, [sessionContext]);

  if (sessionContext.loading) {
    return null;
  }

  return (
    <div style={{ textAlign: "center" }}>
      {sessionContext.doesSessionExist && (
        // We wrap this with <SessionAuth /> so that
        // all claims are validated before showing the logged in UI.
        // For example, if email verification is switched on, and
        // the user's email is not verified, then <SessionAuth />
        // will redirect to the email verification page.
        <Session.SessionAuth>
          <h2>You are logged In! </h2>
          <h3>UserId: {sessionContext.userId}</h3>
          <button onClick={() => Session.signOut()}>Sign Out</button>
        </Session.SessionAuth>
      )}

      <Modal isOpen={isModalOpen} contentLabel="Auth Modal">
        <AuthPage preBuiltUIList={[EmailPasswordPreBuiltUI]} navigate={history} />
      </Modal>
    </div>
  );
}
```
</ContentOption>
</DependentContent>
</Tab>
<Tab title="Without React Router" value="no">
```tsx
import React, { useState, useEffect } from "react";
import Modal from "react-modal";
import SuperTokens from "supertokens-auth-react";
import EmailPassword from "supertokens-auth-react/recipe/emailpassword";
import { EmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/emailpassword/prebuiltui";
import { AuthPage } from "supertokens-auth-react/ui";
import Session from "supertokens-auth-react/recipe/session";

SuperTokens.init({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  disableAuthRoute: true,
  recipeList: [
    /* ... */
  ],
  getRedirectionURL: async (context) => {
    if (context.action === "SUCCESS") {
      return null; // this will not navigate the user away after successful login
    }
  },
});

function AuthPopup() {
  let sessionContext = Session.useSessionContext();
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => setIsModalOpen(true);
  const closeModal = () => setIsModalOpen(false);

  useEffect(() => {
    if (sessionContext.loading) {
      return;
    }
    if (sessionContext.doesSessionExist) {
      closeModal();
    } else {
      openModal();
    }
  }, [sessionContext]);

  if (sessionContext.loading) {
    return null;
  }

  return (
    <div style={{ textAlign: "center" }}>
      {sessionContext.doesSessionExist && (
        // We wrap this with <SessionAuth /> so that
        // all claims are validated before showing the logged in UI.
        // For example, if email verification is switched on, and
        // the user's email is not verified, then <SessionAuth />
        // will redirect to the email verification page.
        <Session.SessionAuth>
          <h2>You are logged In! </h2>
          <h3>UserId: {sessionContext.userId}</h3>
          <button onClick={() => Session.signOut()}>Sign Out</button>
        </Session.SessionAuth>
      )}

      <Modal isOpen={isModalOpen} contentLabel="Auth Modal">
        <AuthPage preBuiltUIList={[EmailPasswordPreBuiltUI]} />
      </Modal>
    </div>
  );
}
```
</Tab>
</CodeGroup>

:::note
In the above case, redirection may occur if a claim fails. For instance, in the case of an Email Verification claim, if the user's email is not verified, they redirect to the email verification page. To prevent redirection for failed claims, please contact [Discord](https://supertokens.com/discord) for assistance.
:::