Embed the pre-built UI component
Overview
Before you start
These instructions only apply to interfaces that use the pre-built UI components. If you are using a custom UI, the embed instructions depend on your implementation details.
Render the TOTP Widget in a page
The following example shows the scenario where you have a dedicated route, such as /totp
, for rendering the TOTP Widget. Upon a successful login, the user will be automatically redirected to the return value of getRedirectionURL
(defaulting to /
).
Do you use react-router-dom?
import SuperTokens from "supertokens-auth-react";
import TOTP from "supertokens-auth-react/recipe/totp";
import MultiFactorAuth from "supertokens-auth-react/recipe/multifactorauth";
import { MFATOTP } from 'supertokens-auth-react/recipe/totp/prebuiltui';
import Header from "./header";
import Footer from "./footer";
import { useNavigate } from "react-router-dom";
SuperTokens.init({
appInfo: {
apiDomain: "...",
appName: "...",
websiteDomain: "..."
},
recipeList: [
TOTP.init({
totpMFAScreen: {
disableDefaultUI: true,
}
}),
MultiFactorAuth.init({
getRedirectionURL: async (context) => {
if (context.action === "GO_TO_FACTOR") {
if (context.factorId === "totp") {
return "/totp"
}
}
}
})
// ...
],
});
function TOTPPage() {
const navigate = useNavigate();
return (
<div>
<Header />
<MFATOTP navigate={navigate} />
<Footer />
</div>
);
}
In the above code snippet, we:
- Disabled the default TOTP UI by setting
disableDefaultUI
totrue
inside the TOTP recipe config. - Overrode the
getRedirectionURL
function inside the MFA recipe config to redirect to/totp
whenever we want to show the TOTP factor.
Feel free to customize the redirection URLs as needed.
Render the TOTP Widget in a popup
The following example shows the scenario where you embed the TOTP Widget in a popup, and upon successful login, you aim to close the popup. This is especially useful for step up auth.
Do you use react-router-dom?
import React, { useState, useEffect } from "react";
import Modal from "react-modal";
import SuperTokens from "supertokens-auth-react";
import TOTP from "supertokens-auth-react/recipe/totp";
import MultiFactorAuth from "supertokens-auth-react/recipe/multifactorauth";
import { MFATOTP } from 'supertokens-auth-react/recipe/totp/prebuiltui';
import Session from "supertokens-auth-react/recipe/session";
import { useNavigate } from "react-router-dom";
SuperTokens.init({
appInfo: {
apiDomain: "...",
appName: "...",
websiteDomain: "..."
},
recipeList: [
TOTP.init(/* ... */),
MultiFactorAuth.init(/* ... */)
// ...
],
});
function TOTPPopup() {
let sessionContext = Session.useSessionContext();
const navigate = useNavigate();
const [isModalOpen, setIsModalOpen] = useState(false);
const openModal = () => setIsModalOpen(true);
const closeModal = () => setIsModalOpen(false);
if (sessionContext.loading) {
return null;
}
return (
<div style={{ textAlign: "center" }}>
{
<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="TOTP Modal"
>
<MFATOTP navigate={navigate} />
</Modal>
</div>
);
}