supertokens-auth-react
Version:
ReactJS SDK that provides login functionality with SuperTokens.
670 lines (642 loc) • 153 kB
JavaScript
"use strict";
var genericComponentOverrideContext = require("./genericComponentOverrideContext.js");
var jsxRuntime = require("react/jsx-runtime");
var React = require("react");
var NormalisedURLPath = require("supertokens-web-js/utils/normalisedURLPath");
var translationContext = require("./translationContext.js");
var windowHandler = require("supertokens-web-js/utils/windowHandler");
var reactDom = require("react-dom");
var componentOverrideContext = require("./multitenancy-shared.js");
var recipe$1 = require("./multifactorauth-shared2.js");
var types = require("./multifactorauth-shared.js");
var recipe = require("./oauth2provider-shared.js");
var utils = require("./authRecipe-shared.js");
var NormalisedURLPath$1 = require("supertokens-web-js/lib/build/normalisedURLPath");
function _interopDefault(e) {
return e && e.__esModule ? e : { default: e };
}
var React__default = /*#__PURE__*/ _interopDefault(React);
var NormalisedURLPath__default = /*#__PURE__*/ _interopDefault(NormalisedURLPath);
var NormalisedURLPath__default$1 = /*#__PURE__*/ _interopDefault(NormalisedURLPath$1);
var ComponentOverrideContext = React__default.default.createContext("IS_DEFAULT");
/* Copyright (c) 2021, 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.
*/
/*
* Imports.
*/
/*
* Component.
*/
function SpinnerIcon() {
return jsxRuntime.jsx(
"svg",
genericComponentOverrideContext.__assign(
{ version: "1.1", viewBox: "25 25 50 50", "data-supertokens": "spinnerIcon" },
{
children: jsxRuntime.jsxs(
"circle",
genericComponentOverrideContext.__assign(
{
cx: "50",
cy: "50",
r: "20",
fill: "none",
stroke: "rgb(var(--palette-primary))",
strokeWidth: "5",
strokeLinecap: "round",
strokeDashoffset: "0",
strokeDasharray: "100, 200",
},
{
children: [
jsxRuntime.jsx("animateTransform", {
attributeName: "transform",
attributeType: "XML",
type: "rotate",
from: "0 50 50",
to: "360 50 50",
dur: "4s",
repeatCount: "indefinite",
}),
jsxRuntime.jsx("animate", {
attributeName: "stroke-dashoffset",
values: "0;-30;-124",
dur: "2s",
repeatCount: "indefinite",
}),
jsxRuntime.jsx("animate", {
attributeName: "stroke-dasharray",
values: "0,200;110,200;110,200",
dur: "2s",
repeatCount: "indefinite",
}),
],
}
)
),
}
)
);
}
var useComponentOverride = function (overrideKey) {
var ctx = React.useContext(ComponentOverrideContext);
if (ctx === "IS_DEFAULT") {
throw new Error("Cannot use component override outside ComponentOverrideContext provider.");
}
var OverrideComponent = ctx[overrideKey];
return OverrideComponent === undefined ? null : OverrideComponent;
};
var withOverride = function (overrideKey, DefaultComponent) {
var finalKey = overrideKey + "_Override";
DefaultComponent.displayName = finalKey;
return function (props) {
var OverrideComponent = useComponentOverride(finalKey);
if (OverrideComponent !== null) {
return jsxRuntime.jsx(
OverrideComponent,
genericComponentOverrideContext.__assign({ DefaultComponent: DefaultComponent }, props)
);
}
return jsxRuntime.jsx(DefaultComponent, genericComponentOverrideContext.__assign({}, props));
};
};
var styles$1 =
'[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';
var ThemeBase$1 = function (_a) {
var children = _a.children,
userStyles = _a.userStyles;
return jsxRuntime.jsxs(React.Fragment, {
children: [children, jsxRuntime.jsxs("style", { children: [styles$1, userStyles.join("\n")] })],
});
};
var MultitenancyDynamicLoginMethodsSpinnerTheme = function () {
return jsxRuntime.jsx(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "container delayedRender" },
{
children: jsxRuntime.jsx(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "row" },
{
children: jsxRuntime.jsx(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "spinner delayedRender" },
{ children: jsxRuntime.jsx(SpinnerIcon, {}) }
)
),
}
)
),
}
)
);
};
var DynamicLoginMethodsSpinnerThemeWithOverride = withOverride(
"MultitenancyDynamicLoginMethodsSpinnerTheme",
MultitenancyDynamicLoginMethodsSpinnerTheme
);
var DynamicLoginMethodsSpinnerTheme = function (props) {
var rootStyle = genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().rootStyle;
return jsxRuntime.jsx(
ThemeBase$1,
genericComponentOverrideContext.__assign(
{ userStyles: [rootStyle, props.config.recipeRootStyle] },
{ children: jsxRuntime.jsx(DynamicLoginMethodsSpinnerThemeWithOverride, {}) }
)
);
};
// TODO: move this to the root components dir and rename (incl. the override)
// This is a special "feature" component:
// - it's used inside FeatureWrapper & RoutingComponent (meaning it can't use FeatureWrapper)
// - it's not used in any specific route (multitenancy doesn't have a pre-built UI)
var DynamicLoginMethodsSpinner = function () {
var recipe = genericComponentOverrideContext.Multitenancy.getInstanceOrThrow();
var recipeComponentOverrides = componentOverrideContext.useContext();
return jsxRuntime.jsx(
ComponentOverrideContext.Provider,
genericComponentOverrideContext.__assign(
{ value: recipeComponentOverrides },
{
children: jsxRuntime.jsx(
WithOrWithoutShadowDom,
genericComponentOverrideContext.__assign(
{ useShadowDom: genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().useShadowDom },
{ children: jsxRuntime.jsx(DynamicLoginMethodsSpinnerTheme, { config: recipe.config }) }
)
),
}
)
);
};
var dynamicLoginMethodsContext = React__default.default.createContext(undefined);
var useDynamicLoginMethods = function () {
var value = React__default.default.useContext(dynamicLoginMethodsContext);
if (value === undefined) {
throw new Error("useDynamicLoginMethods used outside of a valid provider (FeatureWrapper)");
}
return value;
};
var DynamicLoginMethodsProvider = function (_a) {
var value = _a.value,
children = _a.children;
var contextValue = value === undefined ? { loaded: false } : { loaded: true, loginMethods: value };
return jsxRuntime.jsx(
dynamicLoginMethodsContext.Provider,
genericComponentOverrideContext.__assign({ value: contextValue }, { children: children })
);
};
var UserContextContext = React__default.default.createContext(undefined);
var useUserContext = function () {
return React__default.default.useContext(UserContextContext);
};
var UserContextProvider = function (_a) {
var children = _a.children,
userContext = _a.userContext;
var currentUserContext = React.useState(genericComponentOverrideContext.getNormalisedUserContext(userContext))[0];
return jsxRuntime.jsx(
UserContextContext.Provider,
genericComponentOverrideContext.__assign({ value: currentUserContext }, { children: children })
);
};
function FeatureWrapper(_a) {
var children = _a.children,
useShadowDom = _a.useShadowDom,
defaultStore = _a.defaultStore;
var userContext = useUserContext();
var rethrowInRender = genericComponentOverrideContext.useRethrowInRender();
var _b = React.useState(undefined),
loadedDynamicLoginMethods = _b[0],
setLoadedDynamicLoginMethods = _b[1];
var st = genericComponentOverrideContext.SuperTokens.getInstanceOrThrow();
React.useEffect(
function () {
if (loadedDynamicLoginMethods) {
return;
}
genericComponentOverrideContext.Multitenancy.getInstanceOrThrow()
.getCurrentDynamicLoginMethods({ userContext: userContext })
.then(
function (loginMethods) {
return setLoadedDynamicLoginMethods(loginMethods);
},
function (err) {
return rethrowInRender(err);
}
);
},
[loadedDynamicLoginMethods, setLoadedDynamicLoginMethods]
);
if (genericComponentOverrideContext.SuperTokens.usesDynamicLoginMethods && !loadedDynamicLoginMethods) {
return jsxRuntime.jsx(DynamicLoginMethodsSpinner, {});
}
return jsxRuntime.jsx(
DynamicLoginMethodsProvider,
genericComponentOverrideContext.__assign(
{ value: loadedDynamicLoginMethods },
{
children: jsxRuntime.jsx(
translationContext.TranslationContextProvider,
genericComponentOverrideContext.__assign(
{
defaultLanguage: st.languageTranslations.defaultLanguage,
defaultStore: genericComponentOverrideContext.mergeObjects(
defaultStore,
st.languageTranslations.userTranslationStore
),
translationControlEventSource: st.languageTranslations.translationEventSource,
userTranslationFunc: st.languageTranslations.userTranslationFunc,
},
{
children: jsxRuntime.jsx(
WithOrWithoutShadowDom,
genericComponentOverrideContext.__assign(
{ useShadowDom: useShadowDom },
{ children: children }
)
),
}
)
),
}
)
);
}
function WithShadowDom(_a) {
var children = _a.children;
var rootDiv = React.useRef(null);
var _b = React.useState(),
shadowRoot = _b[0],
setShadowRoot = _b[1];
React.useEffect(
function () {
if (rootDiv.current) {
// defaults from react-shadow
setShadowRoot(function (os) {
return (
os ||
rootDiv.current.shadowRoot ||
rootDiv.current.attachShadow({ mode: "open", delegatesFocus: false })
);
});
}
},
[rootDiv]
);
// Otherwise, use shadow dom.
return jsxRuntime.jsx(
"div",
genericComponentOverrideContext.__assign(
{ id: genericComponentOverrideContext.ST_ROOT_ID, ref: rootDiv },
{ children: shadowRoot && reactDom.createPortal(children, shadowRoot) }
)
);
}
function WithOrWithoutShadowDom(_a) {
var children = _a.children,
useShadowDom = _a.useShadowDom;
// If explicitely specified to not use shadow dom.
if (useShadowDom === false) {
return jsxRuntime.jsxs(
"div",
genericComponentOverrideContext.__assign(
{ id: genericComponentOverrideContext.ST_ROOT_ID },
{ children: [children, jsxRuntime.jsx(DisableAutoFillInput, {})] }
)
);
}
return jsxRuntime.jsxs(WithShadowDom, { children: [children, jsxRuntime.jsx(DisableAutoFillInput, {})] });
}
function DisableAutoFillInput() {
/* eslint-disable react/jsx-no-literals */
return jsxRuntime.jsx(
"style",
genericComponentOverrideContext.__assign(
{ type: "text/css" },
{
children:
"input.supertokens-input:-webkit-autofill,input.supertokens-input:-webkit-autofill:focus,input.supertokens-input:-webkit-autofill:hover,select:-webkit-autofill,select:-webkit-autofill:focus,select:-webkit-autofill:hover,textarea:-webkit-autofill,textarea:-webkit-autofill:focus,textarea:-webkit-autofill:hover{transition:background-color 5000s ease-in-out 0s}",
}
)
);
/* eslint-enable react/jsx-no-literals */
}
var defaultTranslationsCommon = {
en: {
AUTH_PAGE_HEADER_TITLE_SIGN_IN_AND_UP: "Sign Up / Sign In",
AUTH_PAGE_HEADER_TITLE_SIGN_IN: "Sign In",
AUTH_PAGE_HEADER_TITLE_SIGN_UP: "Sign Up",
AUTH_PAGE_HEADER_TITLE_SIGN_IN_UP_TO_APP: " to continue to ",
AUTH_PAGE_HEADER_SUBTITLE_SIGN_IN_START: "Not registered yet?",
AUTH_PAGE_HEADER_SUBTITLE_SIGN_IN_SIGN_UP_LINK: "Sign Up",
AUTH_PAGE_HEADER_SUBTITLE_SIGN_IN_END: "",
AUTH_PAGE_HEADER_SUBTITLE_SIGN_UP_START: "Already have an account?",
AUTH_PAGE_HEADER_SUBTITLE_SIGN_UP_SIGN_IN_LINK: "Sign In",
AUTH_PAGE_HEADER_SUBTITLE_SIGN_UP_END: "",
AUTH_PAGE_FOOTER_START: "By continuing, you agree to our ",
AUTH_PAGE_FOOTER_TOS: "Terms of Service",
AUTH_PAGE_FOOTER_AND: " and ",
AUTH_PAGE_FOOTER_PP: "Privacy Policy",
AUTH_PAGE_FOOTER_END: "",
DIVIDER_OR: "or",
BRANDING_POWERED_BY_START: "Powered by ",
BRANDING_POWERED_BY_END: "",
SOMETHING_WENT_WRONG_ERROR: "Something went wrong. Please try again.",
SOMETHING_WENT_WRONG_ERROR_RELOAD: "Something went wrong. Please try again later or reload the page.",
},
};
var SessionContext = React__default.default.createContext({
loading: true,
isDefault: true,
});
var useSessionContext = function () {
var ctx = React__default.default.useContext(SessionContext);
if (ctx.isDefault === true) {
throw new Error("Cannot use useSessionContext outside auth wrapper components.");
}
return ctx;
};
var _a = genericComponentOverrideContext.createGenericComponentsOverrideContext(),
useContext = _a[0],
Provider = _a[1];
function SuperTokensBranding() {
var t = translationContext.useTranslation();
return jsxRuntime.jsxs(
"a",
genericComponentOverrideContext.__assign(
{
"data-supertokens": "superTokensBranding",
href: "https://supertokens.com?utm_campaign=poweredby",
target: "_blank",
},
{
children: [
t("BRANDING_POWERED_BY_START"),
jsxRuntime.jsx("strong", { children: "SuperTokens" }),
t("BRANDING_POWERED_BY_END"),
],
}
)
);
}
function UserContextWrapper(props) {
/**
* If we receive a userContext as a props we should assume that the user
* is either trying to use a theme component as standalone or that they
* want to override an existing value for userContext.
*
* In this case we should always return a Provider with the value of userContext
*/
if (props.userContext !== undefined) {
return jsxRuntime.jsx(
UserContextProvider,
genericComponentOverrideContext.__assign({ userContext: props.userContext }, { children: props.children })
);
}
return jsxRuntime.jsx(UserContextContext.Consumer, {
children: function (value) {
/**
* value is undefined only if there is no Provider in the tree. In this case it is safe to
* assume that the theme component is not being rendered by the SDK and that the user is not
* using this as a child of one of the pre-built feature components.
*
* In this case we return a provider so that the userContext hook can be used by the children
* of this theme component
*/
if (value === undefined) {
return jsxRuntime.jsx(UserContextProvider, { children: props.children });
}
/**
* If value is not undefined then a provider exists in the tree. This means that this component
* is either being rendered by the SDK or the user has added it as a child of the pre-built
* feature components. In either case the userContext hook will be available so simply
* return the theme component.
*/
return props.children;
},
});
}
function GeneralError(_a) {
var error = _a.error;
var t = translationContext.useTranslation();
return jsxRuntime.jsx(
"div",
genericComponentOverrideContext.__assign({ "data-supertokens": "generalError" }, { children: t(error) })
);
}
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';
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 AuthPageComponentList = withOverride("AuthPageComponentList", function AuthPageComponentList(props) {
var t = translationContext.useTranslation();
var list = [props.authComponents[0]];
var _loop_1 = function (i) {
list.push(function () {
return jsxRuntime.jsxs(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "dividerWithOr" },
{
children: [
jsxRuntime.jsx("div", { "data-supertokens": "divider" }),
jsxRuntime.jsx(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "dividerText" },
{ children: t("DIVIDER_OR") }
)
),
jsxRuntime.jsx("div", { "data-supertokens": "divider" }),
],
}
),
"divider-".concat(i)
);
});
list.push(props.authComponents[i]);
};
for (var i = 1; i < props.authComponents.length; ++i) {
_loop_1(i);
}
return jsxRuntime.jsx(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "authComponentList" },
{
children: list.map(function (i) {
return i(genericComponentOverrideContext.__assign({}, props));
}),
}
)
);
});
var AuthPageFooter = withOverride("AuthPageFooter", function AuthPageFooter(_a) {
var hasSeparateSignUpView = _a.hasSeparateSignUpView,
isSignUp = _a.isSignUp,
termsOfServiceLink = _a.termsOfServiceLink,
privacyPolicyLink = _a.privacyPolicyLink;
var t = translationContext.useTranslation();
if (termsOfServiceLink === undefined && privacyPolicyLink === undefined) {
return null;
}
if (hasSeparateSignUpView && !isSignUp) {
return null;
}
return jsxRuntime.jsxs(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "secondaryText privacyPolicyAndTermsAndConditions" },
{
children: [
t("AUTH_PAGE_FOOTER_START"),
termsOfServiceLink !== undefined &&
jsxRuntime.jsx(
"a",
genericComponentOverrideContext.__assign(
{
"data-supertokens": "link",
href: termsOfServiceLink,
target: "_blank",
rel: "noopener noreferer",
},
{ children: t("AUTH_PAGE_FOOTER_TOS") }
)
),
termsOfServiceLink !== undefined && privacyPolicyLink !== undefined && t("AUTH_PAGE_FOOTER_AND"),
privacyPolicyLink !== undefined &&
jsxRuntime.jsx(
"a",
genericComponentOverrideContext.__assign(
{
"data-supertokens": "link",
href: privacyPolicyLink,
target: "_blank",
rel: "noopener noreferer",
},
{ children: t("AUTH_PAGE_FOOTER_PP") }
)
),
t("AUTH_PAGE_FOOTER_END"),
],
}
)
);
});
/* Copyright (c) 2021, 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.
*/
/*
* Imports.
*/
/*
* Component.
*/
function HeavyArrowLeftIcon(_a) {
var color = _a.color;
return jsxRuntime.jsx(
"svg",
genericComponentOverrideContext.__assign(
{
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "13",
viewBox: "0 0 16 13",
"data-supertokens": "heavyArrowLeftIcon",
},
{
children: jsxRuntime.jsx("path", {
fill: color,
d: "M13 6.8h.022H3.8l2.9 2.9a.761.761 0 0 1 0 1.07l-.451.451a.754.754 0 0 1-1.064 0L.22 6.254a.759.759 0 0 1 0-1.068L5.186.22a.755.755 0 0 1 1.064 0l.45.451a.746.746 0 0 1 .22.532.724.724 0 0 1-.22.522l-2.93 2.92h9.24a.781.781 0 0 1 .764.773v.638A.766.766 0 0 1 13 6.8z",
transform: "translate(1.182 .708)",
}),
}
)
);
}
/*
* Component.
*/
function BackButton(_a) {
var onClick = _a.onClick;
return jsxRuntime.jsx(
"button",
genericComponentOverrideContext.__assign(
{ onClick: onClick, "data-supertokens": "backButton backButtonCommon" },
{ children: jsxRuntime.jsx(HeavyArrowLeftIcon, { color: "rgb(var(--palette-textTitle))" }) }
)
);
}
var AuthPageHeader = withOverride("AuthPageHeader", function AuthPageHeader(_a) {
var onSignInUpSwitcherClick = _a.onSignInUpSwitcherClick,
hasSeparateSignUpView = _a.hasSeparateSignUpView,
isSignUp = _a.isSignUp,
showBackButton = _a.showBackButton,
resetFactorList = _a.resetFactorList,
oauth2ClientInfo = _a.oauth2ClientInfo,
headerLabel = _a.headerLabel,
_b = _a.hideSignInSwitcher,
hideSignInSwitcher = _b === void 0 ? false : _b;
var t = translationContext.useTranslation();
return jsxRuntime.jsxs(React.Fragment, {
children: [
(oauth2ClientInfo === null || oauth2ClientInfo === void 0 ? void 0 : oauth2ClientInfo.logoUri) &&
jsxRuntime.jsx("img", {
src: oauth2ClientInfo.logoUri,
alt: oauth2ClientInfo.clientName,
"data-supertokens": "authPageTitleOAuthClientLogo",
}),
jsxRuntime.jsxs(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "headerTitle withBackButton" },
{
children: [
showBackButton
? jsxRuntime.jsx(BackButton, { onClick: resetFactorList })
: jsxRuntime.jsx("span", {
"data-supertokens": "backButtonPlaceholder backButtonCommon",
}),
headerLabel !== undefined
? t(headerLabel)
: !hasSeparateSignUpView
? t("AUTH_PAGE_HEADER_TITLE_SIGN_IN_AND_UP")
: isSignUp
? t("AUTH_PAGE_HEADER_TITLE_SIGN_UP")
: t("AUTH_PAGE_HEADER_TITLE_SIGN_IN"),
jsxRuntime.jsx("span", { "data-supertokens": "backButtonPlaceholder backButtonCommon" }),
],
}
)
),
oauth2ClientInf