Embed the authentication form in a page

Before you start

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 /).

Do you use react-router-dom?

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>
    );
}

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.

Do you use react-router-dom?

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>
        )
    }
}

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 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.

Do you use react-router-dom?

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>
  );
}

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 for assistance.