supertokens-auth-react
Version:
ReactJS SDK that provides login functionality with SuperTokens.
610 lines (598 loc) • 433 kB
JavaScript
"use strict";
var genericComponentOverrideContext = require("./genericComponentOverrideContext.js");
var React = require("react");
var jsxRuntime = require("react/jsx-runtime");
var NormalisedURLPath = require("supertokens-web-js/utils/normalisedURLPath");
var uiEntry = require("./index2.js");
var recipe$3 = require("./emailpassword-shared3.js");
require("./multifactorauth.js");
var session = require("./session.js");
var recipe$1 = require("./passwordless-shared.js");
var authCompWrapper = require("./authCompWrapper.js");
var button = require("./emailpassword-shared.js");
var translationContext = require("./translationContext.js");
var STGeneralError = require("supertokens-web-js/utils/error");
var types = require("./multifactorauth-shared.js");
var emailverification = require("./emailverification.js");
var recipe = require("./emailverification-shared.js");
var arrowLeftIcon = require("./arrowLeftIcon.js");
var emailLargeIcon = require("./emailLargeIcon.js");
var windowHandler = require("supertokens-web-js/utils/windowHandler");
var recipe$2 = require("./multifactorauth-shared2.js");
var sessionprebuiltui = require("./sessionprebuiltui.js");
var formBase = require("./emailpassword-shared6.js");
var validators = require("./emailpassword-shared5.js");
var STGeneralError$1 = require("supertokens-web-js/lib/build/error");
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("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("supertokens-web-js/lib/build/normalisedURLPath");
require("supertokens-web-js/recipe/emailpassword");
require("./authRecipe-shared2.js");
require("./emailpassword-shared4.js");
require("./multifactorauth-shared3.js");
require("supertokens-web-js/recipe/session");
require("./session-shared.js");
require("supertokens-web-js/recipe/passwordless");
require("supertokens-web-js/recipe/emailverification");
require("supertokens-web-js/utils/sessionClaimValidatorStore");
require("supertokens-web-js/recipe/multifactorauth");
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 React__namespace = /*#__PURE__*/ _interopNamespace(React);
var NormalisedURLPath__default = /*#__PURE__*/ _interopDefault(NormalisedURLPath);
var STGeneralError__default = /*#__PURE__*/ _interopDefault(STGeneralError);
var STGeneralError__default$1 = /*#__PURE__*/ _interopDefault(STGeneralError$1);
var styles =
'/* 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\n[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/*\n * Default styles.\n */\n\n@keyframes slideTop {\n 0% {\n transform: translateY(-5px);\n }\n 100% {\n transform: translateY(0px);\n }\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\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\n@media (max-width: 440px) {\n [data-supertokens~="container"] {\n width: 95vw;\n }\n}\n\n[data-supertokens~="row"] {\n margin: 0 auto;\n width: 76%;\n padding-top: 30px;\n padding-bottom: 10px;\n}\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\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\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\n[data-supertokens~="headerSubtitle"] {\n font-weight: 400;\n color: rgb(var(--palette-textGray));\n margin-bottom: 21px;\n}\n\n[data-supertokens~="headerSubtitle"][data-supertokens~="secondaryText"] {\n color: rgb(var(--palette-textGray));\n font-weight: 400;\n}\n\n[data-supertokens~="privacyPolicyAndTermsAndConditions"] {\n max-width: 300px;\n margin-top: 10px;\n}\n\n[data-supertokens~="privacyPolicyAndTermsAndConditions"] a {\n line-height: 21px;\n}\n\n/* TODO: split the link style into separate things*/\n\n/* We add this before primary and secondary text, because if they are applied to the same element the other ones take priority */\n\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\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\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\n[data-supertokens~="secondaryText"] strong {\n font-weight: 600;\n}\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\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\n[data-supertokens~="secondaryLinkWithArrow"] {\n margin-top: 10px;\n margin-bottom: 30px;\n cursor: pointer;\n}\n\n[data-supertokens~="secondaryLinkWithArrow"]:hover {\n position: relative;\n left: 2px;\n word-spacing: 4px;\n}\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\n[data-supertokens~="spinner"] {\n width: 80px;\n height: auto;\n padding-top: 20px;\n padding-bottom: 40px;\n margin: 0 auto;\n}\n\n[data-supertokens~="error"] {\n color: rgb(var(--palette-error));\n}\n\n[data-supertokens~="linkButton"] {\n font-family: "Arial", sans-serif;\n background-color: transparent;\n border: 0;\n}\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\n[data-supertokens~="secondaryLinkWithLeftArrow"] svg {\n margin-right: 0.3em;\n}\n\n[data-supertokens~="secondaryLinkWithLeftArrow"]:hover svg {\n position: relative;\n left: -4px;\n}\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\n[data-supertokens~="buttonGreyedOut"] {\n background-color: rgb(var(--palette-buttonGreyedOut));\n border-color: rgb(var(--palette-buttonGreyedOut));\n}\n\n[data-supertokens~="buttonWithIcon"] {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n}\n\n[data-supertokens~="button"]:disabled {\n border: none;\n cursor: no-drop;\n}\n\n[data-supertokens~="button"]:active {\n outline: none;\n transition: all 0s;\n background-size: 100%;\n filter: brightness(0.85);\n}\n\n[data-supertokens~="button"]:focus {\n outline: none;\n}\n\n[data-supertokens~="backButtonCommon"] {\n width: 16px;\n height: 13px;\n}\n\n[data-supertokens~="backButton"] {\n cursor: pointer;\n border: none;\n background-color: transparent;\n padding: 0px;\n}\n\n[data-supertokens~="backButtonPlaceholder"] {\n display: block;\n}\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\n@keyframes animate-fade {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n[data-supertokens~="footerLinkGroupVert"] {\n display: flex;\n flex-direction: column;\n margin-top: 10px;\n gap: 24px;\n}\n\n[data-supertokens~="footerLinkGroupVert"] > div {\n cursor: pointer;\n margin: 0;\n}\n\n[data-supertokens~="footerLinkGroupVert"] [data-supertokens~="secondaryText"] {\n font-weight: 400;\n}\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\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\n[data-supertokens~="footerLinkGroupVert"] div:only-child {\n margin-left: auto;\n margin-right: auto;\n margin-top: 14px;\n}\n\n[data-supertokens~="withBackButton"] {\n position: relative;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\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\n[data-supertokens~="dividerText"] {\n flex: 1 1;\n font-weight: 400;\n font-size: var(--font-size-1);\n}\n\n[data-supertokens~="formLabelWithLinkWrapper"] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\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\n[data-supertokens~="formLabelLinkBtn"]:hover {\n text-decoration: underline;\n}\n\n[data-supertokens~="formLabelLinkBtn"]:disabled {\n color: rgb(var(--palette-textPrimary));\n cursor: default;\n text-decoration: none;\n}\n\n[data-supertokens~="authComponentList"] {\n padding-bottom: 20px;\n}\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\n[data-supertokens~="authPageTitleOAuthClientUrl"] {\n text-decoration: none;\n}\n\n[data-supertokens~="authPageTitleOAuthClientLogo"] {\n width: 44px;\n height: 44px;\n margin-bottom: 10px;\n}\n\n[data-supertokens~="authPageTitleOAuthClient"] [data-supertokens~="authPageTitleOAuthClientName"] {\n color: rgb(var(--palette-textTitle));\n}\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\n[data-supertokens~="buttonWithArrow"]:hover {\n background-color: rgb(var(--palette-inputBackground));\n}\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\n[data-supertokens~="buttonWithArrow"]:hover [data-supertokens~="secondaryLinkWithRightArrow"] ~ svg {\n position: relative;\n left: 2px;\n}\n\n[data-supertokens~="buttonWithArrow"]:hover [data-supertokens~="secondaryLinkWithLeftArrow"] svg {\n position: relative;\n left: -2px;\n}\n\n[data-supertokens~="buttonWithArrow"] [data-supertokens~="secondaryLinkWithLeftArrow"] {\n display: flex;\n align-items: center;\n}\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\n[data-supertokens~="inputContainer"] {\n margin-top: 6px;\n}\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\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\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\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\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\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\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\n[data-supertokens~="input"]:focus {\n border: none;\n outline: none;\n}\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\n[data-supertokens~="inputAdornment"] {\n justify-content: center;\n margin-right: 5px;\n}\n\n[data-supertokens~="showPassword"] {\n cursor: pointer;\n}\n\n[data-supertokens~="enterEmailSuccessMessage"] {\n margin-top: 15px;\n margin-bottom: 15px;\n word-break: break-word;\n}\n\n[data-supertokens~="submitNewPasswordSuccessMessage"] {\n margin-top: 15px;\n margin-bottom: 15px;\n}\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\n@media (max-width: 440px) {\n [data-supertokens~="inputErrorMessage"] {\n max-width: 250px;\n }\n}\n\n[data-supertokens~="inputErrorSymbol"] {\n margin-right: 5px;\n top: 1px;\n position: relative;\n left: 2px;\n}\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\n[data-supertokens~="formRow"] {\n display: flex;\n flex-direction: column;\n padding-top: 0px;\n padding-bottom: 20px;\n}\n\n[data-supertokens~="formRow"][data-supertokens~="hasError"] {\n padding-bottom: 0;\n}\n\n[data-supertokens~="formRow"]:last-child {\n padding-bottom: 0;\n}\n\n[data-supertokens~="sendVerifyEmailIcon"] {\n margin-top: 11px;\n}\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\n[data-supertokens~="secondaryLinkWithArrow"] {\n margin-top: 10px;\n margin-bottom: 30px;\n cursor: pointer;\n font-weight: 700;\n}\n\n[data-supertokens~="sendVerifyEmailResend"] {\n margin-top: 13px;\n font-weight: 400;\n}\n\n[data-supertokens~="sendVerifyEmailResend"]:hover {\n text-decoration: underline;\n}\n\n[data-supertokens~="noFormRow"] {\n padding-bottom: 25px;\n}\n\n[data-supertokens~="emailVerificationButtonWrapper"] {\n padding-top: 25px;\n max-width: 96px;\n margin: 0 auto;\n}\n\n[data-supertokens~="resendEmailLink"] {\n display: inline-block;\n}\n\n[data-supertokens~="resetPasswordEmailForm"] {\n padding-bottom: 20px;\n}\n\n[data-supertokens~="resetPasswordPasswordForm"] {\n padding-bottom: 20px;\n}\n\n[data-supertokens~="generalSuccess"] {\n margin-bottom: 20px;\n animation: swingIn 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) alternate 2 both;\n}\n\n[data-supertokens~="headerSubtitle"] strong {\n max-width: 100%;\n display: inline-block;\n vertical-align: bottom;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n[data-supertokens~="primaryText"][data-supertokens~="sendCodeText"] {\n margin-top: 15px;\n margin-bottom: 20px;\n color: rgb(var(--palette-textPrimary));\n}\n\n[data-supertokens~="sendCodeText"] strong {\n max-width: 100%;\n display: inline-block;\n vertical-align: bottom;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n[data-supertokens~="phoneInputLibRoot"] {\n display: flex;\n align-items: center;\n}\n\n[data-supertokens~="phoneInputWrapper"] {\n display: flex;\n align-items: center;\n}\n\ninput[type="tel"][data-supertokens~="input-phoneNumber"] {\n padding-left: 15px;\n}\n\n[data-supertokens~="phoneInputWrapper"] .iti {\n flex: 1 1;\n min-width: 0;\n width: 100%;\n background: transparent;\n border: none;\n color: inherit;\n outline: none;\n}\n\n[data-supertokens~="continueButtonWrapper"] {\n margin-top: 10px;\n margin-bottom: 30px;\n}\n\n.iti__country-list {\n border: 0;\n top: 40px;\n width: min(72.2vw, 320px);\n border-radius: 6;\n box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.16);\n}\n\n.iti__country {\n display: flex;\n align-items: center;\n height: 34px;\n cursor: pointer;\n\n padding: 0 8px;\n}\n\n.iti__country-name {\n color: var(--palette-textLabel);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n margin: "0 16px";\n}\n\n[data-supertokens~="continueWithPasswordlessButtonWrapper"] {\n margin: 9px 0;\n}\n\n[data-supertokens~="continueWithPasswordlessLink"] {\n margin-top: 9px;\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 ContinueWithPasswordless = function (props) {
return jsxRuntime.jsx(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "continueWithPasswordlessButtonWrapper" },
{
children: jsxRuntime.jsx(button.Button, {
isLoading: false,
onClick: function () {
props.continueWithPasswordlessClicked();
},
type: "button",
label: "PWLESS_COMBO_CONTINUE_WITH_PASSWORDLESS_BUTTON",
}),
}
)
);
};
var ContinueWithPasswordlessWithOverride = uiEntry.withOverride(
"PasswordlessContinueWithPasswordless",
ContinueWithPasswordless
);
var ContinueWithPasswordlessTheme = function (props) {
var rootStyle = genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().rootStyle;
return jsxRuntime.jsx(
ThemeBase,
genericComponentOverrideContext.__assign(
{ userStyles: [rootStyle, props.config.recipeRootStyle] },
{
children: jsxRuntime.jsx(
ContinueWithPasswordlessWithOverride,
genericComponentOverrideContext.__assign({}, props)
),
}
)
);
};
var ContinueWithPasswordlessFeature = function (props) {
var recipeComponentOverrides = props.useComponentOverrides();
return jsxRuntime.jsx(
authCompWrapper.AuthComponentWrapper,
genericComponentOverrideContext.__assign(
{ recipeComponentOverrides: recipeComponentOverrides },
{
children: jsxRuntime.jsx(
ContinueWithPasswordlessTheme,
genericComponentOverrideContext.__assign({}, props, {
continueWithPasswordlessClicked: function () {
return props.setFactorList(props.factorIds);
},
config: props.recipe.config,
})
),
}
)
);
};
var PasswordlessLinkClickedScreen = function (props) {
var t = translationContext.useTranslation();
var _a = React.useState(false),
loading = _a[0],
setLoading = _a[1];
return jsxRuntime.jsx(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "container" },
{
children: jsxRuntime.jsx(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "row" },
{
children:
props.requireUserInteraction === true
? jsxRuntime.jsxs(React__namespace.default.Fragment, {
children: [
jsxRuntime.jsx(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "headerTitle" },
{ children: t("PWLESS_LINK_CLICKED_CONTINUE_HEADER") }
)
),
jsxRuntime.jsx(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "headerSubtitle secondaryText" },
{ children: t("PWLESS_LINK_CLICKED_CONTINUE_DESC") }
)
),
jsxRuntime.jsx(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "continueButtonWrapper" },
{
children: jsxRuntime.jsx(button.Button, {
isLoading: loading,
onClick: function () {
setLoading(true);
props.consumeCode();
},
type: "button",
label: "PWLESS_LINK_CLICKED_CONTINUE_BUTTON",
}),
}
)
),
],
})
: jsxRuntime.jsx(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "spinner" },
{ children: jsxRuntime.jsx(uiEntry.SpinnerIcon, {}) }
)
),
}
)
),
}
)
);
};
var LinkClickedScreenWithOverride = uiEntry.withOverride(
"PasswordlessLinkClickedScreen",
PasswordlessLinkClickedScreen
);
var LinkClickedScreen$1 = function (props) {
var rootStyle = genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().rootStyle;
return jsxRuntime.jsx(
ThemeBase,
genericComponentOverrideContext.__assign(
{ userStyles: [rootStyle, props.config.recipeRootStyle, props.config.linkClickedScreenFeature.style] },
{
children: jsxRuntime.jsx(
LinkClickedScreenWithOverride,
genericComponentOverrideContext.__assign({}, props)
),
}
)
);
};
var defaultTranslationsPasswordless = {
en: genericComponentOverrideContext.__assign(
genericComponentOverrideContext.__assign({}, uiEntry.defaultTranslationsCommon.en),
{
GENERAL_ERROR_EMAIL_UNDEFINED: "Please set your email",
GENERAL_ERROR_EMAIL_NON_STRING: "Email must be of type string",
GENERAL_ERROR_EMAIL_INVALID: "Email is invalid",
GENERAL_ERROR_PHONE_UNDEFINED: "Please set your phone number",
GENERAL_ERROR_PHONE_NON_STRING: "Phone number must be of type string",
GENERAL_ERROR_PHONE_INVALID: "Phone number is invalid",
GENERAL_ERROR_OTP_UNDEFINED: "Please fill your OTP",
GENERAL_ERROR_OTP_INVALID: "Invalid OTP",
GENERAL_ERROR_OTP_EXPIRED: "Expired OTP.",
GENERAL_ERROR_OTP_NON_STRING: "OTP must be of type string",
GENERAL_ERROR_OTP_EMPTY: "OTP cannot be empty",
ERROR_SIGN_IN_UP_LINK: "Invalid magic link. Please try again.",
ERROR_SIGN_IN_UP_RESEND_RESTART_FLOW: "Login timed out. Please try again.",
ERROR_SIGN_IN_UP_CODE_CONSUME_RESTART_FLOW: "Login unsuccessful. Please try again.",
PWLESS_SIGN_IN_UP_EMAIL_LABEL: "Email",
PWLESS_SIGN_IN_UP_PHONE_LABEL: "Phone Number",
PWLESS_SIGN_IN_UP_SWITCH_TO_PHONE: "Use a Phone number",
PWLESS_SIGN_IN_UP_SWITCH_TO_EMAIL: "Use an Email",
PWLESS_SIGN_IN_UP_CONTINUE_BUTTON: "CONTINUE",
PWLESS_COMBO_CONTINUE_WITH_PASSWORDLESS_LINK: "Continue with passwordless",
PWLESS_COMBO_CONTINUE_WITH_PASSWORDLESS_BUTTON: "CONTINUE WITH PASSWORDLESS",
PWLESS_COMBO_PASSWORD_LABEL: "Password",
PWLESS_COMBO_FORGOT_PW_LINK: "Forgot password?",
PWLESS_LINK_SENT_RESEND_SUCCESS: "Link resent",
PWLESS_LINK_SENT_RESEND_TITLE: "Link sent!",
PWLESS_LINK_SENT_RESEND_DESC_START_EMAIL: "We sent a link to ",
PWLESS_LINK_SENT_RESEND_DESC_START_PHONE: "We sent a link to your phone number ",
PWLESS_LINK_SENT_RESEND_DESC_END_EMAIL: ". Click the link to login or sign up",
PWLESS_LINK_SENT_RESEND_DESC_END_PHONE: "",
PWLESS_SIGN_IN_UP_CHANGE_CONTACT_INFO_EMAIL: "Change email",
PWLESS_SIGN_IN_UP_CHANGE_CONTACT_INFO_PHONE: "Change phone number",
PWLESS_LINK_CLICKED_CONTINUE_HEADER: "Sign Up or Log In",
PWLESS_LINK_CLICKED_CONTINUE_DESC: "Click the button below to log in on this device",
PWLESS_LINK_CLICKED_CONTINUE_BUTTON: "CONTINUE",
PWLESS_RESEND_SUCCESS_EMAIL: "Email resent",
PWLESS_RESEND_SUCCESS_PHONE: "SMS resent",
PWLESS_RESEND_BTN_DISABLED_START: "Resend in ",
PWLESS_RESEND_BTN_DISABLED_END: "",
PWLESS_RESEND_BTN_EMAIL: "Resend Email",
PWLESS_RESEND_BTN_PHONE: "Resend SMS",
PWLESS_USER_INPUT_CODE_HEADER_TITLE: "Enter OTP",
PWLESS_USER_INPUT_CODE_HEADER_SUBTITLE: "An OTP was sent to you at",
PWLESS_USER_INPUT_CODE_HEADER_SUBTITLE_LINK: "An OTP and a magic link was sent to you at",
PWLESS_USER_INPUT_CODE_INPUT_LABEL: "OTP",
PWLESS_MFA_HEADER_TITLE_PHONE: "SMS based OTP",
PWLESS_MFA_HEADER_TITLE_EMAIL: "Email based OTP",
PWLESS_MFA_FOOTER_LOGOUT: "Logout",
/*
* The following are error messages from our backend SDK.
* These are returned as full messages to preserver compatibilty, but they work just like the keys above.
* They are shown as is by default (setting the value to undefined will display the raw translation key)
*/
"Failed to generate a one time code. Please try again": undefined,
"Phone number is invalid": undefined,
"Email is invalid": undefined,
"Cannot sign in / up due to security reasons. Please try a different login method or contact support. (ERR_CODE_002)":
undefined,
"Cannot sign in / up due to security reasons. Please try a different login method or contact support. (ERR_CODE_003)":
undefined,
"Cannot sign in / up due to security reasons. Please contact support. (ERR_CODE_017)": undefined,
"Cannot sign in / up due to security reasons. Please contact support. (ERR_CODE_018)": undefined,
"Cannot sign in / up due to security reasons. Please contact support. (ERR_CODE_019)": undefined,
}
),
};
var LinkClickedScreen = function (props) {
var rethrowInRender = genericComponentOverrideContext.useRethrowInRender();
var userContext = uiEntry.useUserContext();
if (props.userContext !== undefined) {
userContext = props.userContext;
}
var _a = React.useState(false),
requireUserInteraction = _a[0],
setRequireUserInteraction = _a[1];
var consumeCodeAtMount = React.useCallback(
function () {
return genericComponentOverrideContext.__awaiter(void 0, void 0, void 0, function () {
var preAuthSessionId, linkCode, loginAttemptInfo, payloadBeforeCall;
var _b;
return genericComponentOverrideContext.__generator(this, function (_c) {
switch (_c.label) {
case 0:
preAuthSessionId = genericComponentOverrideContext.getQueryParams("preAuthSessionId");
linkCode = genericComponentOverrideContext.getURLHash();
if (!(preAuthSessionId === null || preAuthSessionId.length === 0 || linkCode.length === 0))
return [3 /*break*/, 2];
return [
4 /*yield*/,
genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().redirectToAuth({
navigate: props.navigate,
queryParams: {
error: "signin",
},
redirectBack: false,
userContext: userContext,
}),
];
case 1:
_c.sent();
return [2 /*return*/, "REDIRECTING"];
case 2:
return [
4 /*yield*/,
props.recipe.webJSRecipe.getLoginAttemptInfo({ userContext: userContext }),
];
case 3:
loginAttemptInfo = _c.sent();
if (
(loginAttemptInfo === null || loginAttemptInfo === void 0
? void 0
: loginAttemptInfo.preAuthSessionId) !== preAuthSessionId
) {
return [2 /*return*/, "REQUIRES_INTERACTION"];
}
_c.label = 4;
case 4:
_c.trys.push([4, 6, , 7]);
return [
4 /*yield*/,
types.Session.getInstanceOrThrow().getAccessTokenPayloadSecurely({
userContext: userContext,
}),
];
case 5:
payloadBeforeCall = _c.sent();
return [3 /*break*/, 7];
case 6:
_c.sent();
// If getAccessTokenPayloadSecurely threw, that generally means we have no active session
payloadBeforeCall = undefined;
return [3 /*break*/, 7];
case 7:
_b = {
payloadBeforeCall: payloadBeforeCall,
};
return [
4 /*yield*/,
props.recipe.webJSRecipe.consumeCode({
userContext: userContext,
}),
];
case 8:
return [2 /*return*/, ((_b.response = _c.sent()), _b)];
}
});
});
},
[props.recipe, props.navigate, userContext]
);
var handleConsumeResp = React.useCallback(
function (consumeRes) {
return genericComponentOverrideContext.__awaiter(void 0, void 0, void 0, function () {
var response, payloadBeforeCall, payloadAfterCall, loginAttemptInfo;
return genericComponentOverrideContext.__generator(this, function (_b) {
switch (_b.label) {
case 0:
if (consumeRes === "REQUIRES_INTERACTION") {
// We set this here, to make sure it's set after a possible remount
setRequireUserInteraction(true);
}
if (typeof consumeRes === "string") {
// In this case we are already redirecting or showing the continue button
return [2 /*return*/];
}
(response = consumeRes.response), (payloadBeforeCall = consumeRes.payloadBeforeCall);
if (response.status === "RESTART_FLOW_ERROR") {
return [
2 /*return*/,
genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().redirectToAuth({
navigate: props.navigate,
queryParams: {
error: "restart_link",
},
redirectBack: false,
userContext: userContext,
}),
];
}
if (response.status === "SIGN_IN_UP_NOT_ALLOWED") {
return [
2 /*return*/,
genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().redirectToAuth({
navigate: props.navigate,
queryParams: {
error: response.reason,
},
redirectBack: false,
userContext: userContext,
}),
];
}
if (!(response.status === "OK")) return [3 /*break*/, 7];
payloadAfterCall = void 0;
_b.label = 1;
case 1:
_b.trys.push([1, 3, , 4]);
return [
4 /*yield*/,
types.Session.getInstanceOrThrow().getAccessTokenPayloadSecurely({
userContext: userContext,
}),
];
case 2:
payloadAfterCall = _b.sent();
return [3 /*break*/, 4];
case 3:
_b.sent();
payloadAfterCall = undefined;
return [3 /*break*/, 4];
case 4:
return [
4 /*yield*/,
props.recipe.webJSRecipe.getLoginAttemptInfo({
userContext: userContext,
}),
];
case 5:
loginAttemptInfo = _b.sent();
return [
4 /*yield*/,
props.recipe.webJSRecipe.clearLoginAttemptInfo({
userContext: userContext,
}),
];
case 6:
_b.sent();
return [
2 /*return*/,
types.Session.getInstanceOrThrow()
.validateGlobalClaimsAndHandleSuccessRedirection(
{
action: "SUCCESS",
createdNewUser:
response.createdNewRecipeUser &&
response.user.loginMethods.length === 1,
isNewRecipeUser: response.createdNewRecipeUser,
newSessionCreated:
payloadAfterCall !== undefined &&
(payloadBeforeCall === undefined ||
payloadBeforeCall.sessionHandle !== payloadAfterCall.sessionHandle),
recipeId: props.recipe.recipeID,
tenantIdFromQueryParams:
genericComponentOverrideContext.getTenantIdFromQueryParams(),
},
props.recipe.recipeID,
loginAttemptInfo === null || loginAttemptInfo === void 0
? void 0
: loginAttemptInfo.redirectToPath,
userContext,
props.navigate
)
.catch(rethrowInRender),
];
case 7:
return [2 /*return*/];
}
});
});
},
[props.navigate, props.recipe, userContext]
);
var handleConsumeError = React.useCallback(
function (err) {
if (STGeneralError__default.default.isThisError(err)) {
return genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().redirectToAuth({
navigate: props.navigate,
queryParams: {
error: "custom",
message: err.message,
},
redirectBack: false,
userContext: userContext,
});
} else {
return genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().redirectToAuth({
navigate: props.navigate,
queryParams: {
error: "signin",
},
redirectBack: false,
userContext: userContext,
});
}
},
[props.navigate, userContext]
);
genericComponentOverrideContext.useOnMountAPICall(consumeCodeAtMount, handleConsumeResp, handleConsumeError);
var recipeComponentOverrides = props.useComponentOverrides();
var childProps = {
recipeImplementation: props.recipe.webJSRecipe,
config: props.recipe.config,
requireUserInteraction: requireUserInteraction,
consumeCode: function () {
return genericComponentOverrideContext.__awaiter(void 0, void 0, void 0, function () {
var payloadBeforeCall, consumeResp, err_1;
return genericComponentOverrideContext.__generator(this, function (_b) {
switch (_b.label) {
case 0:
_b.trys.push([0, 7, , 8]);
payloadBeforeCall = void 0;
_b.label = 1;
case 1:
_b.trys.push([1, 3, , 4]);
return [
4 /*yield*/,
types.Session.getInstanceOrThrow().getAccessTokenPayloadSecurely({
userContext: userContext,
}),
];
case 2:
payloadBeforeCall = _b.sent();
return [3 /*break*/, 4];
case 3:
_b.sent();
// If getAccessTokenPayloadSecurely threw, that generally means we have no active session
payloadBeforeCall = undefined;
return [3 /*break*/, 4];
case 4:
return [
4 /*yield*/,
props.recipe.webJSRecipe.consumeCode({
userContext: userContext,
}),
];
case 5:
consumeResp = _b.sent();
return [
4 /*yield*/,
handleConsumeResp({ response: consumeResp, payloadBeforeCall: payloadBeforeCall }),
];
case 6:
_b.sent();
return [3 /*break*/, 8];
case 7:
err_1 = _b.sent();
void handleConsumeError(err_1);
return [3 /*break*/, 8];
case 8:
return [2 /*return*/];
}
});
});
},
};
return jsxRuntime.jsx(
uiEntry.ComponentOverrideContext.Provider,
genericComponentOverrideContext.__assign(
{ value: recipeComponentOverrides },
{
children: jsxRuntime.jsx(
uiEntry.FeatureWrapper,
genericComponentOverrideContext.__assign(
{
useShadowDom: genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().useShadowDom,
defaultStore: defaultTranslationsPasswordless,
},
{
children: jsxRuntime.jsxs(React.Fragment, {
children: [
props.children === undefined &&
jsxRuntime.jsx(
LinkClickedScreen$1,
genericComponentOverrideContext.__assign({}, childProps)