supertokens-auth-react
Version:
ReactJS SDK that provides login functionality with SuperTokens.
437 lines (425 loc) • 234 kB
JavaScript
"use strict";
var genericComponentOverrideContext = require("./genericComponentOverrideContext.js");
var jsxRuntime = require("react/jsx-runtime");
var NormalisedURLPath = require("supertokens-web-js/lib/build/normalisedURLPath");
var uiEntry = require("./index2.js");
require("./multifactorauth.js");
var componentOverrideContext = require("./webauthn-shared.js");
var React = require("react");
var windowHandler = require("supertokens-web-js/utils/windowHandler");
var recipe = require("./multifactorauth-shared2.js");
var types = require("./multifactorauth-shared.js");
var translationContext = require("./translationContext.js");
var sessionprebuiltui = require("./sessionprebuiltui.js");
var arrowLeftIcon = require("./arrowLeftIcon.js");
var button = require("./emailpassword-shared.js");
var STGeneralError = require("supertokens-web-js/utils/error");
var formBase = require("./emailpassword-shared6.js");
var validators = require("./emailpassword-shared5.js");
var STGeneralError$1 = require("supertokens-web-js/lib/build/error");
var authCompWrapper = require("./authCompWrapper.js");
var session = require("./session.js");
require("supertokens-web-js");
require("supertokens-web-js/utils/cookieHandler");
require("supertokens-web-js/utils/postSuperTokensInitCallbacks");
require("supertokens-web-js/recipe/multitenancy");
require("supertokens-web-js/utils");
require("supertokens-web-js/utils/normalisedURLDomain");
require("supertokens-web-js/utils/normalisedURLPath");
require("react-dom");
require("./multitenancy-shared.js");
require("./oauth2provider-shared.js");
require("supertokens-web-js/recipe/oauth2provider");
require("./recipeModule-shared.js");
require("./authRecipe-shared.js");
require("./multifactorauth-shared3.js");
require("supertokens-web-js/lib/build/recipe/webauthn");
require("./authRecipe-shared2.js");
require("supertokens-web-js/recipe/multifactorauth");
require("supertokens-web-js/utils/sessionClaimValidatorStore");
require("supertokens-web-js/recipe/session");
require("./session-shared.js");
require("./emailpassword-shared4.js");
function _interopDefault(e) {
return e && e.__esModule ? e : { default: e };
}
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== "default") {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(
n,
k,
d.get
? d
: {
enumerable: true,
get: function () {
return e[k];
},
}
);
}
});
}
n.default = e;
return Object.freeze(n);
}
var NormalisedURLPath__default = /*#__PURE__*/ _interopDefault(NormalisedURLPath);
var React__namespace = /*#__PURE__*/ _interopNamespace(React);
var STGeneralError__default = /*#__PURE__*/ _interopDefault(STGeneralError);
var STGeneralError__default$1 = /*#__PURE__*/ _interopDefault(STGeneralError$1);
var styles =
'[data-supertokens~="container"] {\n --palette-background: 255, 255, 255;\n --palette-inputBackground: 250, 250, 250;\n --palette-inputBorder: 224, 224, 224;\n --palette-primary: 28, 34, 42;\n --palette-primaryBorder: 45, 54, 68;\n --palette-success: 65, 167, 0;\n --palette-successBackground: 217, 255, 191;\n --palette-error: 255, 23, 23;\n --palette-errorBackground: 255, 241, 235;\n --palette-textTitle: 0, 0, 0;\n --palette-textLabel: 0, 0, 0;\n --palette-textInput: 0, 0, 0;\n --palette-textPrimary: 128, 128, 128;\n --palette-textLink: 0, 122, 255;\n --palette-buttonText: 255, 255, 255;\n --palette-textGray: 54, 54, 54;\n --palette-superTokensBrandingBackground: 242, 245, 246;\n --palette-superTokensBrandingText: 173, 189, 196;\n --palette-buttonGreyedOut: 221, 221, 221;\n --palette-caution: 124, 96, 62;\n --palette-errorDark: 207, 54, 68;\n\n --font-size-0: 12px;\n --font-size-1: 14px;\n --font-size-2: 16px;\n --font-size-3: 19px;\n --font-size-4: 24px;\n --font-size-5: 28px;\n}\n/*\n * Default styles.\n */\n@keyframes slideTop {\n 0% {\n transform: translateY(-5px);\n }\n 100% {\n transform: translateY(0px);\n }\n}\n@keyframes swing-in-top-fwd {\n 0% {\n transform: rotateX(-100deg);\n transform-origin: top;\n opacity: 0;\n }\n 100% {\n transform: rotateX(0deg);\n transform-origin: top;\n opacity: 1;\n }\n}\n[data-supertokens~="container"] {\n font-family: "Arial", sans-serif;\n margin: 12px auto;\n margin-top: 26px;\n margin-bottom: 26px;\n width: 420px;\n text-align: center;\n border-radius: 8px;\n box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.16);\n background-color: rgb(var(--palette-background));\n}\n@media (max-width: 440px) {\n [data-supertokens~="container"] {\n width: 95vw;\n }\n}\n[data-supertokens~="row"] {\n margin: 0 auto;\n width: 76%;\n padding-top: 30px;\n padding-bottom: 10px;\n}\n[data-supertokens~="superTokensBranding"] {\n display: block;\n margin: 10px auto 0;\n background: rgb(var(--palette-superTokensBrandingBackground));\n color: rgb(var(--palette-superTokensBrandingText));\n text-decoration: none;\n width: -webkit-fit-content;\n width: fit-content;\n border-radius: 6px 6px 0 0;\n padding: 4px 9px;\n font-weight: 400;\n font-size: var(--font-size-0);\n letter-spacing: 0.4px;\n}\n[data-supertokens~="generalError"] {\n background: rgb(var(--palette-errorBackground));\n padding-top: 10px;\n padding-bottom: 10px;\n margin-bottom: 10px;\n margin-top: 24px;\n padding-left: 18px;\n padding-right: 18px;\n letter-spacing: 0.2px;\n font-size: var(--font-size-1);\n border-radius: 8px;\n color: rgb(var(--palette-error));\n animation: swing-in-top-fwd 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;\n word-wrap: break-word;\n}\n[data-supertokens~="headerTitle"] {\n font-size: var(--font-size-4);\n line-height: 27.6px;\n letter-spacing: 0.58px;\n font-weight: 700;\n margin-bottom: 20px;\n color: rgb(var(--palette-textTitle));\n}\n[data-supertokens~="headerSubtitle"] {\n font-weight: 400;\n color: rgb(var(--palette-textGray));\n margin-bottom: 21px;\n}\n[data-supertokens~="headerSubtitle"][data-supertokens~="secondaryText"] {\n color: rgb(var(--palette-textGray));\n font-weight: 400;\n}\n[data-supertokens~="privacyPolicyAndTermsAndConditions"] {\n max-width: 300px;\n margin-top: 10px;\n}\n[data-supertokens~="privacyPolicyAndTermsAndConditions"] a {\n line-height: 21px;\n}\n/* TODO: split the link style into separate things*/\n/* We add this before primary and secondary text, because if they are applied to the same element the other ones take priority */\n[data-supertokens~="link"] {\n padding-left: 3px;\n padding-right: 3px;\n color: rgb(var(--palette-textLink));\n font-size: var(--font-size-1);\n cursor: pointer;\n letter-spacing: 0.16px;\n line-height: 26px;\n}\n[data-supertokens~="primaryText"] {\n font-size: var(--font-size-2);\n font-weight: 400;\n letter-spacing: 0.4px;\n line-height: 21px;\n color: rgb(var(--palette-textLabel));\n}\n[data-supertokens~="secondaryText"] {\n font-size: var(--font-size-1);\n font-weight: 400;\n letter-spacing: 0.4px;\n color: rgb(var(--palette-textPrimary));\n}\n[data-supertokens~="secondaryText"] strong {\n font-weight: 600;\n}\n[data-supertokens~="divider"] {\n margin-top: 1.5em;\n margin-bottom: 1.5em;\n border-bottom: 0.3px solid #dddddd;\n align-items: center;\n padding-bottom: 5px;\n flex: 3 3;\n}\n[data-supertokens~="headerTinyTitle"] {\n margin-top: 24px;\n font-size: var(--font-size-5);\n letter-spacing: 1.1px;\n font-weight: 700;\n line-height: 28px;\n}\n[data-supertokens~="secondaryLinkWithArrow"] {\n margin-top: 10px;\n margin-bottom: 30px;\n cursor: pointer;\n}\n[data-supertokens~="secondaryLinkWithArrow"]:hover {\n position: relative;\n left: 2px;\n word-spacing: 4px;\n}\n[data-supertokens~="generalSuccess"] {\n color: rgb(var(--palette-success));\n font-size: var(--font-size-1);\n background: rgb(var(--palette-successBackground));\n animation: swing-in-top-fwd 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;\n padding: 9px 15px 9px 15px;\n border-radius: 6px;\n display: inline-block;\n}\n[data-supertokens~="spinner"] {\n width: 80px;\n height: auto;\n padding-top: 20px;\n padding-bottom: 40px;\n margin: 0 auto;\n}\n[data-supertokens~="error"] {\n color: rgb(var(--palette-error));\n}\n[data-supertokens~="linkButton"] {\n font-family: "Arial", sans-serif;\n background-color: transparent;\n border: 0;\n}\n[data-supertokens~="secondaryLinkWithLeftArrow"] {\n color: rgb(var(--palette-textGray));\n font-weight: 400;\n margin-top: 10px;\n margin-bottom: 40px;\n cursor: pointer;\n}\n[data-supertokens~="secondaryLinkWithLeftArrow"] svg {\n margin-right: 0.3em;\n}\n[data-supertokens~="secondaryLinkWithLeftArrow"]:hover svg {\n position: relative;\n left: -4px;\n}\n[data-supertokens~="button"] {\n font-family: "Arial", sans-serif;\n background-color: rgb(var(--palette-primary));\n color: rgb(var(--palette-buttonText));\n width: 100%;\n height: 34px;\n font-weight: 600;\n border-width: 1px;\n border-style: solid;\n border-radius: 6px;\n border-color: rgb(var(--palette-primaryBorder));\n background-position: center;\n transition: all 0.4s;\n background-size: 12000%;\n cursor: pointer;\n}\n[data-supertokens~="buttonGreyedOut"] {\n background-color: rgb(var(--palette-buttonGreyedOut));\n border-color: rgb(var(--palette-buttonGreyedOut));\n}\n[data-supertokens~="buttonWithIcon"] {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n}\n[data-supertokens~="button"]:disabled {\n border: none;\n cursor: no-drop;\n}\n[data-supertokens~="button"]:active {\n outline: none;\n transition: all 0s;\n background-size: 100%;\n filter: brightness(0.85);\n}\n[data-supertokens~="button"]:focus {\n outline: none;\n}\n[data-supertokens~="backButtonCommon"] {\n width: 16px;\n height: 13px;\n}\n[data-supertokens~="backButton"] {\n cursor: pointer;\n border: none;\n background-color: transparent;\n padding: 0px;\n}\n[data-supertokens~="backButtonPlaceholder"] {\n display: block;\n}\n[data-supertokens~="delayedRender"] {\n animation-duration: 0.1s;\n animation-name: animate-fade;\n animation-delay: 0.2s;\n animation-fill-mode: backwards;\n}\n@keyframes animate-fade {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n[data-supertokens~="footerLinkGroupVert"] {\n display: flex;\n flex-direction: column;\n margin-top: 10px;\n gap: 24px;\n}\n[data-supertokens~="footerLinkGroupVert"] > div {\n cursor: pointer;\n margin: 0;\n}\n[data-supertokens~="footerLinkGroupVert"] [data-supertokens~="secondaryText"] {\n font-weight: 400;\n}\n[data-supertokens~="footerLinkGroupVert"] [data-supertokens~="secondaryLinkWithLeftArrow"] {\n font-weight: 400;\n position: relative;\n left: -6px; /* half the width of the left arrow */\n}\n@media (max-width: 360px) {\n [data-supertokens~="footerLinkGroupVert"] {\n flex-direction: column;\n }\n [data-supertokens~="footerLinkGroupVert"] > div {\n margin: 0 auto;\n }\n}\n[data-supertokens~="footerLinkGroupVert"] div:only-child {\n margin-left: auto;\n margin-right: auto;\n margin-top: 14px;\n}\n[data-supertokens~="withBackButton"] {\n position: relative;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n[data-supertokens~="dividerWithOr"] {\n padding-top: 5px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n color: rgb(var(--palette-textPrimary));\n}\n[data-supertokens~="dividerText"] {\n flex: 1 1;\n font-weight: 400;\n font-size: var(--font-size-1);\n}\n[data-supertokens~="formLabelWithLinkWrapper"] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n[data-supertokens~="formLabelLinkBtn"] {\n width: auto;\n margin-top: 0;\n line-height: 24px;\n font-size: var(--font-size-0);\n}\n[data-supertokens~="formLabelLinkBtn"]:hover {\n text-decoration: underline;\n}\n[data-supertokens~="formLabelLinkBtn"]:disabled {\n color: rgb(var(--palette-textPrimary));\n cursor: default;\n text-decoration: none;\n}\n[data-supertokens~="authComponentList"] {\n padding-bottom: 20px;\n}\n[data-supertokens~="authPageTitleOAuthClient"] {\n color: rgb(var(--palette-textGray));\n font-size: var(--font-size-1);\n font-weight: 400;\n margin: 10px 0 25px;\n}\n[data-supertokens~="authPageTitleOAuthClientUrl"] {\n text-decoration: none;\n}\n[data-supertokens~="authPageTitleOAuthClientLogo"] {\n width: 44px;\n height: 44px;\n margin-bottom: 10px;\n}\n[data-supertokens~="authPageTitleOAuthClient"] [data-supertokens~="authPageTitleOAuthClientName"] {\n color: rgb(var(--palette-textTitle));\n}\n[data-supertokens~="buttonWithArrow"] {\n border-radius: 6px;\n border: 1px solid #d0d5dd;\n width: 100%;\n color: rgb(var(--palette-textGray));\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 5px;\n margin: 24px 0;\n min-height: 48px;\n cursor: pointer;\n}\n[data-supertokens~="buttonWithArrow"]:hover {\n background-color: rgb(var(--palette-inputBackground));\n}\n[data-supertokens~="buttonWithArrow"] [data-supertokens~="secondaryText"] {\n font-weight: 700;\n font-size: var(--font-size-2);\n color: rgb(var(--palette-textGray));\n margin: 0;\n}\n[data-supertokens~="buttonWithArrow"]:hover [data-supertokens~="secondaryLinkWithRightArrow"] ~ svg {\n position: relative;\n left: 2px;\n}\n[data-supertokens~="buttonWithArrow"]:hover [data-supertokens~="secondaryLinkWithLeftArrow"] svg {\n position: relative;\n left: -2px;\n}\n[data-supertokens~="buttonWithArrow"] [data-supertokens~="secondaryLinkWithLeftArrow"] {\n display: flex;\n align-items: center;\n}\n/* Copyright (c) 2021, VRAI Labs and/or its affiliates. All rights reserved.\n *\n * This software is licensed under the Apache License, Version 2.0 (the\n * "License") as published by the Apache Software Foundation.\n *\n * You may not use this file except in compliance with the License. You may\n * obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the\n * License for the specific language governing permissions and limitations\n * under the License.\n */\n[data-supertokens~="inputContainer"] {\n margin-top: 6px;\n}\n[data-supertokens~="inputWrapper"] {\n box-sizing: border-box;\n width: 100%;\n display: flex;\n align-items: center;\n background-color: rgb(var(--palette-inputBackground));\n height: 34px;\n border-radius: 6px;\n border: 1px solid rgb(var(--palette-inputBorder));\n}\n[data-supertokens~="inputWrapper"][focus-within] {\n background-color: rgba(var(--palette-inputBackground), 0.25);\n border: 1px solid rgb(var(--palette-primary));\n box-shadow: 0 0 0 0.2rem rgba(var(--palette-primary), 0.25);\n outline: none;\n}\n[data-supertokens~="inputWrapper"]:focus-within {\n background-color: rgba(var(--palette-inputBackground), 0.25);\n border: 1px solid rgb(var(--palette-primary));\n box-shadow: 0 0 0 0.2rem rgba(var(--palette-primary), 0.25);\n outline: none;\n}\n[data-supertokens~="inputError"] {\n border: 1px solid rgb(var(--palette-error));\n box-shadow: 0 0 0 0.2rem rgba(var(--palette-error), 0.25);\n outline: none;\n}\n[data-supertokens~="inputError"][focus-within] {\n border: 1px solid rgb(var(--palette-error));\n box-shadow: 0 0 0 0.2rem rgba(var(--palette-error), 0.25);\n outline: none;\n}\n[data-supertokens~="inputError"]:focus-within {\n border: 1px solid rgb(var(--palette-error));\n box-shadow: 0 0 0 0.2rem rgba(var(--palette-error), 0.25);\n outline: none;\n}\n[data-supertokens~="input"] {\n box-sizing: border-box;\n padding-left: 15px;\n filter: none;\n color: rgb(var(--palette-textInput));\n background-color: transparent;\n border-radius: 6px;\n font-size: var(--font-size-1);\n border: none;\n padding-right: 25px;\n letter-spacing: 1.2px;\n flex: 9 1 75%;\n width: 75%;\n height: 32px;\n}\n[data-supertokens~="input"]:focus {\n border: none;\n outline: none;\n}\n[data-supertokens~="input"]:-webkit-autofill,\n[data-supertokens~="input"]:-webkit-autofill:hover,\n[data-supertokens~="input"]:-webkit-autofill:focus,\n[data-supertokens~="input"]:-webkit-autofill:active {\n -webkit-text-fill-color: rgb(var(--palette-textInput));\n box-shadow: 0 0 0 30px rgb(var(--palette-inputBackground)) inset;\n}\n[data-supertokens~="inputAdornment"] {\n justify-content: center;\n margin-right: 5px;\n}\n[data-supertokens~="showPassword"] {\n cursor: pointer;\n}\n[data-supertokens~="enterEmailSuccessMessage"] {\n margin-top: 15px;\n margin-bottom: 15px;\n word-break: break-word;\n}\n[data-supertokens~="submitNewPasswordSuccessMessage"] {\n margin-top: 15px;\n margin-bottom: 15px;\n}\n[data-supertokens~="inputErrorMessage"] {\n padding-top: 5px;\n padding-bottom: 5px;\n color: rgb(var(--palette-error));\n line-height: 24px;\n font-weight: 400;\n font-size: var(--font-size-1);\n text-align: left;\n animation: slideTop 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n max-width: 330px;\n}\n@media (max-width: 440px) {\n [data-supertokens~="inputErrorMessage"] {\n max-width: 250px;\n }\n}\n[data-supertokens~="inputErrorSymbol"] {\n margin-right: 5px;\n top: 1px;\n position: relative;\n left: 2px;\n}\n[data-supertokens~="label"] {\n text-align: left;\n font-weight: 700;\n font-size: var(--font-size-0);\n line-height: 24px;\n color: rgb(var(--palette-textLabel));\n}\n[data-supertokens~="formRow"] {\n display: flex;\n flex-direction: column;\n padding-top: 0px;\n padding-bottom: 20px;\n}\n[data-supertokens~="formRow"][data-supertokens~="hasError"] {\n padding-bottom: 0;\n}\n[data-supertokens~="formRow"]:last-child {\n padding-bottom: 0;\n}\n[data-supertokens~="sendVerifyEmailIcon"] {\n margin-top: 11px;\n}\n[data-supertokens~="primaryText"][data-supertokens~="sendVerifyEmailText"] {\n text-align: center;\n letter-spacing: 0.8px;\n color: rgb(var(--palette-textPrimary));\n}\n[data-supertokens~="secondaryLinkWithArrow"] {\n margin-top: 10px;\n margin-bottom: 30px;\n cursor: pointer;\n font-weight: 700;\n}\n[data-supertokens~="sendVerifyEmailResend"] {\n margin-top: 13px;\n font-weight: 400;\n}\n[data-supertokens~="sendVerifyEmailResend"]:hover {\n text-decoration: underline;\n}\n[data-supertokens~="noFormRow"] {\n padding-bottom: 25px;\n}\n[data-supertokens~="emailVerificationButtonWrapper"] {\n padding-top: 25px;\n max-width: 96px;\n margin: 0 auto;\n}\n[data-supertokens~="resendEmailLink"] {\n display: inline-block;\n}\n[data-supertokens~="resetPasswordEmailForm"] {\n padding-bottom: 20px;\n}\n[data-supertokens~="resetPasswordPasswordForm"] {\n padding-bottom: 20px;\n}\n[data-supertokens~="webauthn"] [data-supertokens~="container"] {\n padding-top: 24px;\n}\n[data-supertokens~="continueWithPasskeyButtonWrapper"] {\n margin: 9px 0;\n}\n[data-supertokens~="continueWithPasskeyButtonNotSupported"] {\n margin-top: 10px;\n padding: 10px;\n border-radius: 6px;\n background-color: rgba(0,122,255,0.10196);\n color: rgb(var(--palette-textLink));\n text-align: center;\n font-weight: 400;\n font-size: var(--font-size-1);\n line-height: 16.1px;\n letter-spacing: 0%;\n text-align: center;\n}\n[data-supertokens~="continueWithoutPasskey"] {\n margin-top: 15px;\n}\n[data-supertokens~="continueWithoutPasskey"] [data-supertokens~="continueWithoutPasskeyLabel"] {\n font-size: var(--font-size-1);\n font-weight: 700;\n line-height: 21px;\n text-align: center;\n text-underline-position: from-font;\n -webkit-text-decoration-skip-ink: none;\n text-decoration-skip-ink: none;\n color: rgb(var(--palette-textLink));\n cursor: pointer;\n}\n[data-supertokens~="signUpFormInnerContainer"] [data-supertokens~="cautionMessage"] {\n padding: 14px;\n background: rgba(255,149,0,0.10196);\n color: rgb(var(--palette-caution));\n font-size: var(--font-size-1);\n font-weight: 400;\n line-height: 20px;\n text-align: center;\n text-underline-position: from-font;\n -webkit-text-decoration-skip-ink: none;\n text-decoration-skip-ink: none;\n border-radius: 6px;\n margin-bottom: 14px;\n}\n[data-supertokens~="passkeyConfirmationContainer"] [data-supertokens~="passkeyConfirmationEmailContainer"] {\n padding-bottom: 5px;\n}\n[data-supertokens~="passkeyConfirmationContainer"]\n [data-supertokens~="passkeyConfirmationEmailContainer"]\n [data-supertokens~="continueWithLabel"] {\n font-size: var(--font-size-0);\n font-weight: 400;\n line-height: 13.8px;\n text-align: center;\n text-underline-position: from-font;\n -webkit-text-decoration-skip-ink: none;\n text-decoration-skip-ink: none;\n color: rgb(var(--palette-textGray));\n}\n[data-supertokens~="passkeyConfirmationContainer"]\n [data-supertokens~="passkeyConfirmationEmailContainer"]\n [data-supertokens~="enteredEmailId"] {\n font-size: var(--font-size-1);\n font-weight: 700;\n line-height: 16.1px;\n text-align: center;\n text-underline-position: from-font;\n -webkit-text-decoration-skip-ink: none;\n text-decoration-skip-ink: none;\n}\n[data-supertokens~="passkeyConfirmationContainer"]\n [data-supertokens~="passkeyFeatureBlocksContainer"]\n [data-supertokens~="passkeyFeatureBlock"] {\n margin-top: 10px;\n padding: 18px;\n border-radius: 6px;\n border: 1px solid #dddddd;\n display: flex;\n}\n[data-supertokens~="passkeyConfirmationContainer"]\n [data-supertokens~="passkeyFeatureBlocksContainer"]\n [data-supertokens~="passkeyFeatureBlock"]\n [data-supertokens~="passkeyFeatureBlockDetails"] {\n margin-left: 18px;\n}\n[data-supertokens~="passkeyConfirmationContainer"]\n [data-supertokens~="passkeyFeatureBlocksContainer"]\n [data-supertokens~="passkeyFeatureBlock"]\n [data-supertokens~="passkeyFeatureBlockDetails"]\n [data-supertokens~="passkeyFeatureBlockTitle"] {\n font-size: var(--font-size-1);\n font-weight: 700;\n line-height: 16.1px;\n text-align: left;\n text-underline-position: from-font;\n -webkit-text-decoration-skip-ink: none;\n text-decoration-skip-ink: none;\n color: rgb(var(--palette-textTitle));\n}\n[data-supertokens~="passkeyConfirmationContainer"]\n [data-supertokens~="passkeyFeatureBlocksContainer"]\n [data-supertokens~="passkeyFeatureBlock"]\n [data-supertokens~="passkeyFeatureBlockDetails"]\n [data-supertokens~="passkeyFeatureBlockSubText"] {\n font-size: var(--font-size-0);\n font-weight: 400;\n line-height: 13.8px;\n text-align: left;\n text-underline-position: from-font;\n -webkit-text-decoration-skip-ink: none;\n text-decoration-skip-ink: none;\n color: rgb(var(--palette-textGray));\n margin-top: 9px;\n}\n[data-supertokens~="passkeyConfirmationContainer"] [data-supertokens~="passkeyConfirmationFooter"] {\n margin-top: 25px;\n}\n[data-supertokens~="somethingWentWrongContainer"]\n [data-supertokens~="somethingWentWrongErrorDetailsContainer"]\n [data-supertokens~="label"] {\n margin-top: 4px;\n font-size: var(--font-size-4);\n font-weight: 500;\n line-height: 40px;\n letter-spacing: 0.58px;\n text-align: center;\n text-underline-position: from-font;\n -webkit-text-decoration-skip-ink: none;\n text-decoration-skip-ink: none;\n color: #222222;\n}\n[data-supertokens~="somethingWentWrongContainer"]\n [data-supertokens~="somethingWentWrongErrorDetailsContainer"]\n [data-supertokens~="errorDetails"] {\n font-size: var(--font-size-1);\n font-weight: 400;\n line-height: 21px;\n letter-spacing: 0.4px;\n text-align: center;\n text-underline-position: from-font;\n -webkit-text-decoration-skip-ink: none;\n text-decoration-skip-ink: none;\n color: #656565;\n}\n[data-supertokens~="somethingWentWrongContainer"] [data-supertokens~="goBackButtonContainer"] {\n margin-top: 22px;\n}\n[data-supertokens~="somethingWentWrongContainer"]\n [data-supertokens~="goBackButtonContainer"]\n [data-supertokens~="errorGoBackLabel"] {\n font-size: var(--font-size-1);\n font-weight: 500;\n line-height: 21px;\n text-align: center;\n text-underline-position: from-font;\n -webkit-text-decoration-skip-ink: none;\n text-decoration-skip-ink: none;\n color: #0076ff;\n}\n[data-supertokens~="passkeySignInContainer"] {\n margin-bottom: 6px;\n}\n[data-supertokens~="passkeyRecoverAccountFormContainer"]\n [data-supertokens~="passkeyRecoverAccountFormHeaderWrapper"]\n [data-supertokens~="passkeyRecoverAccountFormHeader"] {\n padding-top: 10px;\n}\n[data-supertokens~="passkeyRecoverAccountFormContainer"]\n [data-supertokens~="passkeyRecoverAccountFormHeaderWrapper"]\n [data-supertokens~="passkeyRecoverAccountFormSubHeader"] {\n width: 75%;\n margin: 0 auto;\n font-size: var(--font-size-1);\n font-weight: 400;\n line-height: 16.1px;\n text-align: center;\n text-underline-position: from-font;\n -webkit-text-decoration-skip-ink: none;\n text-decoration-skip-ink: none;\n color: rgb(var(--palette-textGray));\n margin-bottom: 20px;\n}\n[data-supertokens~="passkeyRecoverAccountFormContainer"] [data-supertokens~="errorContainer"] {\n margin-bottom: 15px;\n}\n[data-supertokens~="passkeyEmailSentContainer"] [data-supertokens~="emailSentDescription"] {\n margin: 0 auto;\n font-size: var(--font-size-1);\n font-weight: 400;\n line-height: 16.1px;\n text-align: center;\n text-underline-position: from-font;\n -webkit-text-decoration-skip-ink: none;\n text-decoration-skip-ink: none;\n color: rgb(var(--palette-textGray));\n}\n[data-supertokens~="passkeyEmailSentContainer"]\n [data-supertokens~="emailSentDescription"]\n [data-supertokens~="changeEmailBtn"] {\n line-height: 16.1px;\n}\n[data-supertokens~="passkeyRecoverAccountSuccessContainer"]\n [data-supertokens~="header"]\n [data-supertokens~="headerText"] {\n margin-top: 20px;\n font-size: 20px;\n font-weight: 700;\n line-height: 30px;\n text-align: center;\n text-underline-position: from-font;\n -webkit-text-decoration-skip-ink: none;\n text-decoration-skip-ink: none;\n color: rgb(var(--palette-textTitle));\n}\n[data-supertokens~="passkeyMfaSignInDivider"] {\n color: rgb(var(--palette-textPrimary));\n font-size: var(--font-size-2);\n display: flex;\n align-items: center;\n gap: 15px;\n}\n';
var ThemeBase = function (_a) {
var children = _a.children,
userStyles = _a.userStyles;
return jsxRuntime.jsxs(React.Fragment, {
children: [children, jsxRuntime.jsxs("style", { children: [styles, userStyles.join("\n")] })],
});
};
var WebauthnMFAFooter = uiEntry.withOverride("WebauthnMFAFooter", function PasswordlessMFAFooter(props) {
var t = translationContext.useTranslation();
return jsxRuntime.jsx(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "footerLinkGroupVert webauthn-mfa footer" },
{
children: jsxRuntime.jsxs(
"div",
genericComponentOverrideContext.__assign(
{
"data-supertokens": "secondaryText secondaryLinkWithLeftArrow",
onClick: props.onSignOutClicked,
},
{
children: [
jsxRuntime.jsx(arrowLeftIcon.ArrowLeftIcon, {
color: "rgb(var(--palette-textPrimary))",
}),
t("WEBAUTHN_MFA_FOOTER_LOGOUT"),
],
}
)
),
}
)
);
});
var WebauthnMFALoadingScreen = uiEntry.withOverride("WebauthnMFALoadingScreen", function WebauthnMFALoadingScreen() {
return jsxRuntime.jsx(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "container delayedRender pwless-mfa loadingScreen" },
{
children: jsxRuntime.jsx(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "row" },
{
children: jsxRuntime.jsx(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "spinner delayedRender" },
{ children: jsxRuntime.jsx(uiEntry.SpinnerIcon, {}) }
)
),
}
)
),
}
)
);
});
var PasskeyNotSupportedError = uiEntry.withOverride("WebauthnPasskeyNotSupportedError", function () {
var t = translationContext.useTranslation();
return jsxRuntime.jsx(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "continueWithPasskeyButtonNotSupported" },
{ children: t("WEBAUTHN_PASSKEY_NOT_SUPPORTED_BY_BROWSER") }
)
);
});
var WebauthnMFASignIn = uiEntry.withOverride("WebauthnMFASignIn", function WebauthnMFASignIn(props) {
var _this = this;
var t = translationContext.useTranslation();
var _a = React__namespace.useState(false),
isLoading = _a[0],
setIsLoading = _a[1];
var onClick = React__namespace.useCallback(
function () {
return genericComponentOverrideContext.__awaiter(_this, void 0, void 0, function () {
return genericComponentOverrideContext.__generator(this, function (_a) {
switch (_a.label) {
case 0:
setIsLoading(true);
return [4 /*yield*/, props.onSignIn()];
case 1:
_a.sent();
setIsLoading(false);
return [2 /*return*/];
}
});
});
},
[props]
);
return jsxRuntime.jsxs(React.Fragment, {
children: [
props.onBackButtonClicked
? jsxRuntime.jsxs(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "headerTitle withBackButton webauthn-mfa" },
{
children: [
jsxRuntime.jsx(uiEntry.BackButton, { onClick: props.onBackButtonClicked }),
t("WEBAUTHN_MFA_SIGN_IN_HEADER_TITLE"),
jsxRuntime.jsx("span", {
"data-supertokens": "backButtonPlaceholder backButtonCommon",
}),
],
}
)
)
: jsxRuntime.jsx(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "headerTitle webauthn-mfa" },
{ children: t("WEBAUTHN_MFA_SIGN_IN_HEADER_TITLE") }
)
),
jsxRuntime.jsx(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "headerSubtitle secondaryText" },
{ children: t("WEBAUTHN_MFA_SIGN_IN_HEADER_SUBTITLE") }
)
),
jsxRuntime.jsx(button.Button, {
disabled: !props.deviceSupported || isLoading,
isLoading: isLoading,
type: "button",
onClick: onClick,
label: "WEBAUTHN_EMAIL_CONTINUE_BUTTON",
isGreyedOut: !props.deviceSupported,
icon: componentOverrideContext.PasskeyIcon,
}),
props.error !== undefined && jsxRuntime.jsx(uiEntry.GeneralError, { error: props.error }),
props.canRegisterPasskey &&
jsxRuntime.jsxs(jsxRuntime.Fragment, {
children: [
jsxRuntime.jsxs(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "passkeyMfaSignInDivider" },
{
children: [
jsxRuntime.jsx("div", { "data-supertokens": "divider" }),
jsxRuntime.jsx("span", { children: t("WEBAUTHN_MFA_DIVIDER") }),
jsxRuntime.jsx("div", { "data-supertokens": "divider" }),
],
}
)
),
jsxRuntime.jsxs(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "headerSubtitle secondaryText" },
{
children: [
jsxRuntime.jsx(
"span",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "link", onClick: props.onRegisterPasskeyClick },
{ children: t("WEBAUTHN_MFA_REGISTER_PASSKEY_TITLE") }
)
),
t("WEBAUTHN_MFA_REGISTER_PASSKEY_SUBTITLE"),
],
}
)
),
],
}),
!props.deviceSupported && jsxRuntime.jsx(PasskeyNotSupportedError, {}),
jsxRuntime.jsx(WebauthnMFAFooter, genericComponentOverrideContext.__assign({}, props)),
],
});
});
var WebauthnMFASignUp = uiEntry.withOverride("WebauthnMFASignUp", function WebauthnMFASignUp(props) {
var _this = this;
var t = translationContext.useTranslation();
var onSuccess = React__namespace.useCallback(
function (_a) {
var email = _a.email;
props.onContinueClick(email);
},
[props.onContinueClick]
);
return jsxRuntime.jsxs(React.Fragment, {
children: [
props.onBackButtonClicked
? jsxRuntime.jsxs(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "headerTitle withBackButton webauthn-mfa" },
{
children: [
jsxRuntime.jsx(uiEntry.BackButton, { onClick: props.onBackButtonClicked }),
t("WEBAUTHN_MFA_REGISTER_PASSKEY_TITLE"),
jsxRuntime.jsx("span", {
"data-supertokens": "backButtonPlaceholder backButtonCommon",
}),
],
}
)
)
: jsxRuntime.jsx(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "headerTitle webauthn-mfa" },
{ children: t("WEBAUTHN_MFA_REGISTER_PASSKEY_TITLE") }
)
),
props.error !== undefined && jsxRuntime.jsx(uiEntry.GeneralError, { error: props.error }),
jsxRuntime.jsxs(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "signUpFormInnerContainer" },
{
children: [
jsxRuntime.jsx(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "cautionMessage" },
{ children: t("WEBAUTHN_SIGN_UP_CAUTION_MESSAGE_LABEL") }
)
),
jsxRuntime.jsx(formBase.FormBase, {
clearError: props.clearError,
onFetchError: props.onFetchError,
onError: props.onError,
formFields: [
{
id: "email",
label: "",
labelComponent: jsxRuntime.jsxs(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "formLabelWithLinkWrapper" },
{
children: [
jsxRuntime.jsx(formBase.Label, {
value: "WEBAUTHN_SIGN_UP_LABEL",
"data-supertokens": "emailInputLabel",
}),
jsxRuntime.jsx(
"a",
genericComponentOverrideContext.__assign(
{
onClick: props.onRecoverAccountClick,
"data-supertokens":
"link linkButton formLabelLinkBtn recoverAccountTrigger",
},
{ children: t("WEBAUTHN_RECOVER_ACCOUNT_LABEL") }
)
),
],
}
)
),
optional: false,
autofocus: true,
placeholder: "",
getDefaultValue: function () {
return props.email;
},
autoComplete: "email",
// We are using the default validator that allows any string
validate: validators.defaultEmailValidator,
},
],
buttonLabel: "WEBAUTHN_EMAIL_CONTINUE_BUTTON",
onSuccess: onSuccess,
callAPI: function (formFields) {
return genericComponentOverrideContext.__awaiter(
_this,
void 0,
void 0,
function () {
var email;
var _a;
return genericComponentOverrideContext.__generator(this, function (_b) {
email =
(_a = formFields.find(function (field) {
return field.id === "email";
})) === null || _a === void 0
? void 0
: _a.value;
if (email === undefined) {
throw new STGeneralError__default.default(
"GENERAL_ERROR_EMAIL_UNDEFINED"
);
}
if (email === "") {
throw new STGeneralError__default.default(
"EMAIL_INPUT_NOT_POPULATED_ERROR"
);
}
// We do not want the form to make the API call since we have
// an intermediary step here so we will just mock an OK status
// to render the next step.
return [
2 /*return*/,
{
status: "OK",
email: email,
},
];
});
}
);
},
validateOnBlur: false,
showLabels: true,
footer: jsxRuntime.jsx(
WebauthnMFAFooter,
genericComponentOverrideContext.__assign({}, props)
),
}),
],
}
)
),
],
});
});
/* Copyright (c) 2025, VRAI Labs and/or its affiliates. All rights reserved.
*
* This software is licensed under the Apache License, Version 2.0 (the
* "License") as published by the Apache Software Foundation.
*
* You may not use this file except in compliance with the License. You may
* obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*/
function FingerPrintIcon() {
return jsxRuntime.jsx(
"svg",
genericComponentOverrideContext.__assign(
{ width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
{
children: jsxRuntime.jsx("path", {
"fill-rule": "evenodd",
"clip-rule": "evenodd",
d: "M0.364853 0.0364227C0.244304 0.0845041 0.138369 0.193473 0.0615589 0.348417C-0.00354731 0.479822 -0.00518591 0.539239 0.00411019 2.42023C0.0116006 3.93286 0.0228697 4.35981 0.0555064 4.37068C0.0785125 4.37833 0.0973054 4.40311 0.0973054 4.42571C0.0973054 4.54943 0.445408 4.74684 0.663565 4.74684C0.815145 4.74684 1.04812 4.6382 1.15322 4.51847C1.32697 4.32059 1.33456 4.24526 1.33456 2.71799V1.30289H2.79384C4.22377 1.30289 4.25607 1.30142 4.39826 1.23044C4.47855 1.19034 4.58478 1.09823 4.63601 1.0243C4.71774 0.90637 4.72864 0.860194 4.72864 0.631757C4.72864 0.392955 4.72068 0.362895 4.62595 0.244397C4.42043 -0.0127287 4.52666 -0.00126008 2.37117 0.00104703C1.17689 0.00231761 0.41675 0.0157255 0.364853 0.0364227ZM17.6195 0.0364227C17.1685 0.216243 17.1268 0.918675 17.55 1.20519L17.6696 1.28617L19.1827 1.2955L20.6959 1.30486V2.77289C20.6959 3.72883 20.7083 4.27378 20.7314 4.33507C20.8144 4.55461 21.1022 4.74684 21.3479 4.74684C21.5937 4.74684 21.8815 4.55461 21.9644 4.33507C21.988 4.27261 22 3.60559 22 2.35289C22 0.824083 21.9912 0.44438 21.9539 0.357245C21.8983 0.22711 21.7497 0.0828324 21.6216 0.03445C21.4968 -0.0127287 17.7381 -0.0108564 17.6195 0.0364227ZM10.2127 2.19293C9.93596 2.23323 9.20123 2.37988 9.14262 2.40653C9.10583 2.42324 9.00802 2.45367 8.92526 2.4741C8.41785 2.59945 7.37308 3.10718 6.91891 3.44914C6.20143 3.9893 5.75459 4.4316 5.21922 5.13135C5.00227 5.41496 4.58729 6.17002 4.42909 6.56912C4.37803 6.69785 4.32279 6.83327 4.3063 6.87005C4.25551 6.98346 4.14021 7.39306 4.08981 7.63908C4.06346 7.76781 4.02762 7.91828 4.01016 7.97345C3.99274 8.02862 3.96305 8.20917 3.94419 8.37468C3.90052 8.7583 3.89727 13.2703 3.94058 13.3843C4.05093 13.6744 4.40026 13.8494 4.71737 13.7734C4.91162 13.7267 5.10159 13.5766 5.16833 13.4168C5.20458 13.33 5.21357 12.9045 5.21381 11.2596C5.21401 9.67225 5.22514 9.11643 5.26316 8.79264C5.33255 8.20165 5.38321 7.87852 5.4126 7.8397C5.42655 7.82131 5.45597 7.73103 5.47804 7.63908C5.52951 7.42462 5.64989 7.11557 5.82972 6.73623C6.41846 5.49434 7.57077 4.42103 8.84166 3.93082C8.9704 3.88117 9.10583 3.82677 9.14262 3.80992C9.37639 3.70292 9.94348 3.59027 10.5506 3.53019C11.1559 3.47034 11.8709 3.53393 12.52 3.70543C12.7764 3.77314 13.233 3.93293 13.2879 3.97409C13.3069 3.98833 13.3752 4.02077 13.4396 4.04608C13.5756 4.09958 13.9651 4.31317 14.1585 4.44029C14.5925 4.72554 15.264 5.34224 15.53 5.69977C15.5847 5.77333 15.6378 5.84104 15.648 5.85024C15.751 5.94306 16.3488 7.00566 16.3488 7.09591C16.3488 7.11323 16.3702 7.17485 16.3965 7.2328C16.4697 7.39466 16.6076 7.8817 16.6487 8.12391C16.669 8.24344 16.7008 8.41648 16.7192 8.50843C16.7377 8.60038 16.7639 8.96433 16.7774 9.31719L16.8019 9.95876L16.9045 10.0862C17.1294 10.3654 17.4433 10.4388 17.746 10.2829C17.8347 10.2372 17.9403 10.1469 17.9873 10.0765C18.0678 9.95599 18.0713 9.9283 18.0816 9.33019C18.0993 8.3055 17.9766 7.58943 17.6285 6.68615C17.5432 6.4647 17.2533 5.85375 17.1768 5.73405C16.5906 4.81705 16.2187 4.37325 15.5796 3.82787C14.959 3.29831 14.1667 2.8429 13.4061 2.57849C12.9518 2.42057 12.7982 2.3775 12.3623 2.28605C11.9982 2.20965 11.8585 2.19862 11.1322 2.18909C10.6817 2.18317 10.2678 2.18488 10.2127 2.19293ZM10.3631 4.7681C9.30132 4.96611 8.50038 5.37333 7.80565 6.06838C7.22685 6.64746 6.79909 7.3864 6.61578 8.12391C6.49068 8.62726 6.48691 8.70781 6.48309 10.966C6.48102 12.1889 6.46677 13.2647 6.45146 13.3567C6.40063 13.6617 6.31339 13.9172 6.19913 14.0959C5.8421 14.6539 5.32008 14.9738 4.67848 15.0277C4.31744 15.058 4.14208 15.1405 4.00592 15.3443C3.91229 15.4844 3.90506 15.5157 3.9155 15.7338C3.92499 15.932 3.94228 15.9911 4.02066 16.0939C4.22678 16.3641 4.42882 16.4168 4.97181 16.3417C5.39311 16.2835 5.67657 16.2001 5.99933 16.0394C6.79518 15.6431 7.36171 14.9813 7.66621 14.0923L7.76927 13.7914L7.78876 11.4007C7.80538 9.36584 7.81662 8.96487 7.8643 8.70701C7.94653 8.26224 8.08968 7.9052 8.35278 7.48862C8.46788 7.30636 8.93155 6.81825 9.09246 6.70995C9.34997 6.53665 9.42986 6.48964 9.62748 6.39515C10.1741 6.13381 10.7703 6.03457 11.358 6.1071C12.4125 6.23723 13.2488 6.79933 13.8115 7.75611C13.9013 7.90881 14.0394 8.2716 14.0873 8.48078C14.1134 8.59429 14.1445 8.70313 14.1566 8.72265C14.1686 8.74218 14.1908 9.10821 14.2057 9.53606C14.2305 10.2421 14.2413 10.341 14.3232 10.6068C14.4025 10.8641 14.6483 11.3941 14.7421 11.51C14.7604 11.5326 14.8486 11.6416 14.9381 11.7522C15.2381 12.1229 15.6327 12.4339 16.0451 12.6243C16.1478 12.6717 16.2576 12.7241 16.2893 12.7408C16.4343 12.8169 17.0726 12.9387 17