fix: move SignInAndUpHeader inside ThirdPartyEmailPasswordHeader to i…

…mprove overrides

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
 

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 <SignInAndUpHeader />;
+        }
+
         if (isSignUp === true) {
             return <SignUpHeader onClick={() => setIsSignUp(false)} />;
         } else {

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<ThirdPartyEmailPasswordSignInAndUpThemeProps> =
         (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<ThirdPartyEmailPasswordSignInAndUpThemeProps> =
     return (
         <div data-supertokens="container">
             <div data-supertokens="row">
-                {emailPasswordEnabled ? (
-                    <Header
-                        isSignUp={props.epState.isSignUp}
-                        setIsSignUp={(isSignUp) => props.epDispatch({ type: isSignUp ? "setSignUp" : "setSignIn" })}
-                    />
-                ) : (
-                    <SignInAndUpHeader />
-                )}
+                <Header
+                    isSignUp={props.epState.isSignUp}
+                    setIsSignUp={(isSignUp) => props.epDispatch({ type: isSignUp ? "setSignUp" : "setSignIn" })}
+                    emailPasswordEnabled={emailPasswordEnabled}
+                />
                 {props.commonState.error && <GeneralError error={props.commonState.error} />}
                 {props.tpChildProps !== undefined && thirdPartyEnabled && (
                     <ProvidersForm {...props.tpChildProps} featureState={props.tpState} dispatch={props.tpDispatch} />