From dd74e1c06e409cf7d955072bdf94add9c71d94fc Mon Sep 17 00:00:00 2001 From: Mihaly Lengyel Date: Wed, 6 Dec 2023 12:11:24 +0100 Subject: [PATCH] fix: move SignInAndUpHeader inside ThirdPartyEmailPasswordHeader to improve overrides --- CHANGELOG.md | 3 +- .../submitNewPassword.d.ts | 2 +- .../components/themes/signInAndUp/signIn.d.ts | 4 +-- .../components/themes/signInAndUp/signUp.d.ts | 7 ++--- .../components/themes/signInAndUp/header.d.ts | 1 + .../components/themes/translations.d.ts | 6 ++++ .../components/themes/translations.d.ts | 5 +++ .../thirdpartyemailpasswordprebuiltui.js | 31 ++++++++----------- .../components/themes/signInAndUp/header.tsx | 16 +++++----- .../components/themes/signInAndUp/index.tsx | 16 ++++------ 10 files changed, 46 insertions(+), 45 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a482154c5..001fe6133 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [0.35.9] - 2023-12-06 -- Fixes ThirdPartyEmailPassword rendering sign in/up switcher even with disabled email password. Instead it'll now render `SignInAndUpHeader` in this case (overrideable as `ThirdPartySignInAndUpHeader`) +- Fixes ThirdPartyEmailPassword rendering sign in/up switcher even with disabled email password. Instead it'll now render `SignInAndUpHeader_Override` in this case (overrideable as `ThirdPartySignInAndUpHeader`). Overriding `ThirdPartyEmailPasswordHeader_Override` should still cover all cases. +- Added a new prop to `ThirdPartyEmailPasswordHeader_Override` you can use to check if email password is enabled. ## [0.35.8] - 2023-11-26 diff --git a/lib/build/recipe/emailpassword/components/themes/resetPasswordUsingToken/submitNewPassword.d.ts b/lib/build/recipe/emailpassword/components/themes/resetPasswordUsingToken/submitNewPassword.d.ts index b8ec36fd7..9c795dce2 100644 --- a/lib/build/recipe/emailpassword/components/themes/resetPasswordUsingToken/submitNewPassword.d.ts +++ b/lib/build/recipe/emailpassword/components/themes/resetPasswordUsingToken/submitNewPassword.d.ts @@ -1,7 +1,7 @@ /// export declare const SubmitNewPassword: import("react").ComponentType< import("../../../../../types").ThemeBaseProps & { - formFields: import("../../../types").FormFieldThemeProps[]; + formFields: Omit[]; error: string | undefined; } & { recipeImplementation: import("supertokens-web-js/recipe/emailpassword").RecipeInterface; diff --git a/lib/build/recipe/emailpassword/components/themes/signInAndUp/signIn.d.ts b/lib/build/recipe/emailpassword/components/themes/signInAndUp/signIn.d.ts index 46dd93ed6..64639bb96 100644 --- a/lib/build/recipe/emailpassword/components/themes/signInAndUp/signIn.d.ts +++ b/lib/build/recipe/emailpassword/components/themes/signInAndUp/signIn.d.ts @@ -1,7 +1,7 @@ /// export declare const SignIn: import("react").ComponentType< import("../../../../../types").ThemeBaseProps & { - formFields: import("../../../types").FormFieldThemeProps[]; + formFields: Omit[]; error: string | undefined; } & { recipeImplementation: import("supertokens-web-js/recipe/emailpassword").RecipeInterface; @@ -10,6 +10,6 @@ export declare const SignIn: import("react").ComponentType< config: import("../../../types").NormalisedConfig; signUpClicked?: (() => void) | undefined; forgotPasswordClick: () => void; - onSuccess: () => void; + onSuccess: (result: { user: import("supertokens-web-js/types").User }) => void; } >; diff --git a/lib/build/recipe/emailpassword/components/themes/signInAndUp/signUp.d.ts b/lib/build/recipe/emailpassword/components/themes/signInAndUp/signUp.d.ts index 1a0268aa8..32bc386b1 100644 --- a/lib/build/recipe/emailpassword/components/themes/signInAndUp/signUp.d.ts +++ b/lib/build/recipe/emailpassword/components/themes/signInAndUp/signUp.d.ts @@ -1,14 +1,13 @@ /// export declare const SignUp: import("react").ComponentType< import("../../../../../types").ThemeBaseProps & { - formFields: import("../../../types").FormFieldThemeProps[]; - error: string | undefined; - } & { recipeImplementation: import("supertokens-web-js/recipe/emailpassword").RecipeInterface; clearError: () => void; onError: (error: string) => void; config: import("../../../types").NormalisedConfig; signInClicked?: (() => void) | undefined; - onSuccess: () => void; + onSuccess: (result: { user: import("supertokens-web-js/types").User }) => void; + formFields: import("../../../types").FormFieldThemeProps[]; + error: string | undefined; } >; diff --git a/lib/build/recipe/thirdpartyemailpassword/components/themes/signInAndUp/header.d.ts b/lib/build/recipe/thirdpartyemailpassword/components/themes/signInAndUp/header.d.ts index d6afb97cf..a27422f48 100644 --- a/lib/build/recipe/thirdpartyemailpassword/components/themes/signInAndUp/header.d.ts +++ b/lib/build/recipe/thirdpartyemailpassword/components/themes/signInAndUp/header.d.ts @@ -1,5 +1,6 @@ /// export declare const Header: import("react").ComponentType<{ + emailPasswordEnabled: boolean; isSignUp: boolean; setIsSignUp: (isSignUp: boolean) => void; }>; diff --git a/lib/build/recipe/thirdpartyemailpassword/components/themes/translations.d.ts b/lib/build/recipe/thirdpartyemailpassword/components/themes/translations.d.ts index bb256d116..454ff978e 100644 --- a/lib/build/recipe/thirdpartyemailpassword/components/themes/translations.d.ts +++ b/lib/build/recipe/thirdpartyemailpassword/components/themes/translations.d.ts @@ -58,6 +58,9 @@ export declare const defaultTranslationsThirdPartyEmailPassword: { "Password must contain at least one alphabet": undefined; "Password must contain at least one number": undefined; "Email is invalid": undefined; + "Reset password link was not created because of account take over risk. Please contact support. (ERR_CODE_001)": undefined; + "Cannot sign up due to security reasons. Please try logging in, use a different login method or contact support. (ERR_CODE_007)": undefined; + "Cannot sign in due to security reasons. Please try resetting your password, use a different login method or contact support. (ERR_CODE_008)": undefined; EMAIL_VERIFICATION_RESEND_SUCCESS: string; EMAIL_VERIFICATION_SEND_TITLE: string; EMAIL_VERIFICATION_SEND_DESC_START: string; @@ -86,5 +89,8 @@ export declare const defaultTranslationsThirdPartyEmailPassword: { THIRD_PARTY_PROVIDER_DEFAULT_BTN_START: string; THIRD_PARTY_PROVIDER_DEFAULT_BTN_END: string; THIRD_PARTY_ERROR_NO_EMAIL: string; + "Cannot sign in / up due to security reasons. Please try a different login method or contact support. (ERR_CODE_004)": undefined; + "Cannot sign in / up because new email cannot be applied to existing account. Please contact support. (ERR_CODE_005)": undefined; + "Cannot sign in / up due to security reasons. Please try a different login method or contact support. (ERR_CODE_006)": undefined; }; }; diff --git a/lib/build/recipe/thirdpartypasswordless/components/themes/translations.d.ts b/lib/build/recipe/thirdpartypasswordless/components/themes/translations.d.ts index dbe4e941e..b24b59e60 100644 --- a/lib/build/recipe/thirdpartypasswordless/components/themes/translations.d.ts +++ b/lib/build/recipe/thirdpartypasswordless/components/themes/translations.d.ts @@ -57,6 +57,8 @@ export declare const defaultTranslationsThirdPartyPasswordless: { "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; BRANDING_POWERED_BY_START: string; BRANDING_POWERED_BY_END: string; SOMETHING_WENT_WRONG_ERROR: string; @@ -69,5 +71,8 @@ export declare const defaultTranslationsThirdPartyPasswordless: { THIRD_PARTY_PROVIDER_DEFAULT_BTN_START: string; THIRD_PARTY_PROVIDER_DEFAULT_BTN_END: string; THIRD_PARTY_ERROR_NO_EMAIL: string; + "Cannot sign in / up due to security reasons. Please try a different login method or contact support. (ERR_CODE_004)": undefined; + "Cannot sign in / up because new email cannot be applied to existing account. Please contact support. (ERR_CODE_005)": undefined; + "Cannot sign in / up due to security reasons. Please try a different login method or contact support. (ERR_CODE_006)": undefined; }; }; diff --git a/lib/build/thirdpartyemailpasswordprebuiltui.js b/lib/build/thirdpartyemailpasswordprebuiltui.js index c71672a5e..05e8fa3f2 100644 --- a/lib/build/thirdpartyemailpasswordprebuiltui.js +++ b/lib/build/thirdpartyemailpasswordprebuiltui.js @@ -96,15 +96,13 @@ var ThemeBase = function (_a) { }); }; -/* - * Component. - */ var Header = uiEntry.withOverride("ThirdPartyEmailPasswordHeader", function ThirdPartyEmailPasswordHeader(_a) { var isSignUp = _a.isSignUp, - setIsSignUp = _a.setIsSignUp; - /* - * Render. - */ + setIsSignUp = _a.setIsSignUp, + emailPasswordEnabled = _a.emailPasswordEnabled; + if (emailPasswordEnabled !== true) { + return jsxRuntime.jsx(thirdpartyprebuiltui.SignInAndUpHeader, {}); + } if (isSignUp === true) { return jsxRuntime.jsx(emailpasswordprebuiltui.SignUpHeader, { onClick: function () { @@ -141,7 +139,7 @@ var SignInAndUpTheme = function (props) { ((loginMethods === null || loginMethods === void 0 ? void 0 : loginMethods.thirdparty.enabled) && hasProviders); var emailPasswordEnabled = (props.emailPasswordRecipe !== undefined && usesDynamicLoginMethods === false) || - (loginMethods === null || loginMethods === void 0 ? void 0 : loginMethods.emailpassword.enabled); + (loginMethods === null || loginMethods === void 0 ? void 0 : loginMethods.emailpassword.enabled) === true; if (thirdPartyEnabled === false && emailPasswordEnabled === false) { return null; } @@ -157,16 +155,13 @@ var SignInAndUpTheme = function (props) { { "data-supertokens": "row" }, { children: [ - emailPasswordEnabled - ? jsxRuntime.jsx(Header, { - isSignUp: props.epState.isSignUp, - setIsSignUp: function (isSignUp) { - return props.epDispatch({ - type: isSignUp ? "setSignUp" : "setSignIn", - }); - }, - }) - : jsxRuntime.jsx(thirdpartyprebuiltui.SignInAndUpHeader, {}), + jsxRuntime.jsx(Header, { + isSignUp: props.epState.isSignUp, + setIsSignUp: function (isSignUp) { + return props.epDispatch({ type: isSignUp ? "setSignUp" : "setSignIn" }); + }, + emailPasswordEnabled: emailPasswordEnabled, + }), props.commonState.error && jsxRuntime.jsx(generalError.GeneralError, { error: props.commonState.error }), props.tpChildProps !== undefined && diff --git a/lib/ts/recipe/thirdpartyemailpassword/components/themes/signInAndUp/header.tsx b/lib/ts/recipe/thirdpartyemailpassword/components/themes/signInAndUp/header.tsx index 9de60a0f1..81a089f66 100644 --- a/lib/ts/recipe/thirdpartyemailpassword/components/themes/signInAndUp/header.tsx +++ b/lib/ts/recipe/thirdpartyemailpassword/components/themes/signInAndUp/header.tsx @@ -12,28 +12,26 @@ * License for the specific language governing permissions and limitations * under the License. */ -/* - * Imports. - */ import { withOverride } from "../../../../../components/componentOverride/withOverride"; import { SignInHeader } from "../../../../emailpassword/components/themes/signInAndUp/signInHeader"; import { SignUpHeader } from "../../../../emailpassword/components/themes/signInAndUp/signUpHeader"; +import { SignInAndUpHeader } from "../../../../thirdparty/components/themes/signInAndUp/signInAndUpHeader"; -/* - * Component. - */ export const Header = withOverride( "ThirdPartyEmailPasswordHeader", function ThirdPartyEmailPasswordHeader({ isSignUp, setIsSignUp, + emailPasswordEnabled, }: { + emailPasswordEnabled: boolean; isSignUp: boolean; setIsSignUp: (isSignUp: boolean) => void; }): JSX.Element { - /* - * Render. - */ + if (emailPasswordEnabled !== true) { + return ; + } + if (isSignUp === true) { return setIsSignUp(false)} />; } else { diff --git a/lib/ts/recipe/thirdpartyemailpassword/components/themes/signInAndUp/index.tsx b/lib/ts/recipe/thirdpartyemailpassword/components/themes/signInAndUp/index.tsx index 9a11fce80..b4aff5152 100644 --- a/lib/ts/recipe/thirdpartyemailpassword/components/themes/signInAndUp/index.tsx +++ b/lib/ts/recipe/thirdpartyemailpassword/components/themes/signInAndUp/index.tsx @@ -30,7 +30,6 @@ import { SignUpFooter } from "../../../../emailpassword/components/themes/signIn import { SignUpForm } from "../../../../emailpassword/components/themes/signInAndUp/signUpForm"; import { useDynamicLoginMethods } from "../../../../multitenancy/dynamicLoginMethodsContext"; import { ProvidersForm } from "../../../../thirdparty/components/themes/signInAndUp/providersForm"; -import { SignInAndUpHeader } from "../../../../thirdparty/components/themes/signInAndUp/signInAndUpHeader"; import { ThemeBase } from "../themeBase"; import { Header } from "./header"; @@ -54,7 +53,7 @@ const SignInAndUpTheme: React.FC = (usesDynamicLoginMethods === false && hasProviders) || (loginMethods?.thirdparty.enabled && hasProviders); const emailPasswordEnabled = (props.emailPasswordRecipe !== undefined && usesDynamicLoginMethods === false) || - loginMethods?.emailpassword.enabled; + loginMethods?.emailpassword.enabled === true; if (thirdPartyEnabled === false && emailPasswordEnabled === false) { return null; @@ -63,14 +62,11 @@ const SignInAndUpTheme: React.FC = return (
- {emailPasswordEnabled ? ( -
props.epDispatch({ type: isSignUp ? "setSignUp" : "setSignIn" })} - /> - ) : ( - - )} +
props.epDispatch({ type: isSignUp ? "setSignUp" : "setSignIn" })} + emailPasswordEnabled={emailPasswordEnabled} + /> {props.commonState.error && } {props.tpChildProps !== undefined && thirdPartyEnabled && (