fix: tpep header with disabled emailpassword (#770)

CHANGELOG.md

@@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html)
 
+## [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`)
+
 ## [0.35.8] - 2023-11-26
 
 -   Fixes `inputComponent` props to make them non optional. This is in the context of customizing the sign up form to add custom react components.

lib/ts/recipe/thirdpartyemailpassword/components/themes/signInAndUp/index.tsx

@@ -30,6 +30,7 @@ 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";
@@ -62,10 +63,14 @@ const SignInAndUpTheme: React.FC<ThirdPartyEmailPasswordSignInAndUpThemeProps> =
     return (
         <div data-supertokens="container">
             <div data-supertokens="row">
-                <Header
-                    isSignUp={props.epState.isSignUp}
-                    setIsSignUp={(isSignUp) => props.epDispatch({ type: isSignUp ? "setSignUp" : "setSignIn" })}
-                />
+                {emailPasswordEnabled ? (
+                    <Header
+                        isSignUp={props.epState.isSignUp}
+                        setIsSignUp={(isSignUp) => props.epDispatch({ type: isSignUp ? "setSignUp" : "setSignIn" })}
+                    />
+                ) : (
+                    <SignInAndUpHeader />
+                )}
                 {props.commonState.error && <GeneralError error={props.commonState.error} />}
                 {props.tpChildProps !== undefined && thirdPartyEnabled && (
                     <ProvidersForm {...props.tpChildProps} featureState={props.tpState} dispatch={props.tpDispatch} />

lib/ts/version.ts

@@ -12,4 +12,4 @@
  * License for the specific language governing permissions and limitations
  * under the License.
  */
-export const package_version = "0.35.8";
+export const package_version = "0.35.9";

package.json

@@ -1,6 +1,6 @@
 {
     "name": "supertokens-auth-react",
-    "version": "0.35.8",
+    "version": "0.35.9",
     "description": "ReactJS SDK that provides login functionality with SuperTokens.",
     "main": "./index.js",
     "engines": {

test/end-to-end/multitenancy.dynamic_login_methods.test.js

@@ -39,6 +39,7 @@ import {
     isMultitenancyManagementEndpointsSupported,
     setupTenant,
     backendBeforeEach,
+    getTextByDataSupertokens,
 } from "../helpers";
 import {
     TEST_CLIENT_BASE_URL,
@@ -530,6 +531,7 @@ describe("SuperTokens Multitenancy dynamic login methods", function () {
         // Emailpassword
         const inputNames = await getInputNames(page);
         assert.deepStrictEqual(inputNames, []);
+        assert.strictEqual(await getTextByDataSupertokens(page, "headerTitle"), "Sign Up / Sign In");
     });
 
     it("should show thirdpartyemailpassword if FE has tpep and both emailpassword and thirdparty is enabled", async function () {