Embed the authentication form in a page

Embed authentication forms in your page using SuperTokens with redirection and popup options.

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

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

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

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

In the above code snippet:

Disabled the default Auth UI by setting disableAuthRoute to true.
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.

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.

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

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

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

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.

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.

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

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

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

Embed the authentication form in a page

Before you start

Render the form in a page

Render the form in a page with no redirection

API schema and response details

Embed the authentication form in a page

Before you start

Render the form in a page

Render the form in a page with no redirection

Render the form in a popup