fix: propagate overrides into sub-recipe only components (#652)

* fix: propagate overrides into sub-recipe only components

* test: fix exmple tests + changelog

* test: example test fixing

Author: porcellus

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixes
 
 -   Fixed all buttons to have pointer cursor on hover.
+-   Fixed component override propagation into sub-recipe only feature components (i.e., ThirdPartySignInAndUpCallbackTheme_Override in thirdpartyemailpassword)
 
 ## [0.31.0] - 2023-02-01
 

examples/with-emailverification-then-password-thirdpartyemailpassword/package.json

@@ -22,6 +22,8 @@
         "@testing-library/jest-dom": "^5.14.1",
         "@testing-library/react": "^11.2.7",
         "@testing-library/user-event": "^12.1.10",
+        "@types/react": "^18.0.10",
+        "@types/react-dom": "^18.0.5",
         "nodemon": "^2.0.6"
     },
     "scripts": {

examples/with-emailverification-then-password-thirdpartyemailpassword/src/CustomSignUp/index.js

@@ -13,7 +13,7 @@ export default function CustomSignUp({ DefaultComponent, ...props }) {
     // we use useLayoutEffect instead of useEffect because that prevent the UI glitch that
     // happens cause of the JS manipulation
     React.useLayoutEffect(() => {
-        if (window.location.pathname === "/auth") {
+        if (window.location.pathname.startsWith("/auth")) {
             // here we hide the password field..
             document
                 .querySelector("#supertokens-root")

examples/with-jwt-localstorage/package.json

@@ -27,6 +27,8 @@
         "@testing-library/jest-dom": "^5.12.0",
         "@testing-library/react": "^11.1.0",
         "@testing-library/user-event": "^12.6.2",
+        "@types/react": "^18.0.10",
+        "@types/react-dom": "^18.0.5",
         "nodemon": "^2.0.12"
     },
     "scripts": {

examples/with-multiple-email-sign-in/package.json

@@ -25,6 +25,8 @@
         "@testing-library/jest-dom": "^5.14.1",
         "@testing-library/react": "^11.2.7",
         "@testing-library/user-event": "^12.1.10",
+        "@types/react": "^18.0.10",
+        "@types/react-dom": "^18.0.5",
         "nodemon": "^2.0.6"
     },
     "scripts": {

examples/with-one-login-per-subdomain/test/basic.test.js

@@ -77,7 +77,7 @@ describe("SuperTokens Example Basic tests", function () {
         it("Successful signup with credentials", async function () {
             await Promise.all([page.goto(websiteDomain), page.waitForNavigation({ waitUntil: "networkidle0" })]);
 
-            assert.strictEqual(page.url(), "http://a.example.com:3000/auth?redirectToPath=");
+            assert.strictEqual(page.url(), "http://a.example.com:3000/auth/?redirectToPath=");
             // redirected to /auth
             await toggleSignInSignUp(page);
             await setInputValues(page, [

examples/with-sign-in-up-split-emailpassword/test/basic.test.js

@@ -75,7 +75,7 @@ describe("SuperTokens Example Basic tests", function () {
 
             // redirected to /auth
             await waitForSTElement(page);
-            assert.strictEqual(page.url(), websiteDomain + "/auth?redirectToPath=");
+            assert.strictEqual(page.url(), websiteDomain + "/auth/?redirectToPath=");
 
             // Go to separate sign up page
             const link = await waitForSTElement(page, "#signupLink");

examples/with-supabase/test/basic.test.js

@@ -31,6 +31,7 @@ const {
 const SuperTokensNode = require("supertokens-node");
 const Session = require("supertokens-node/recipe/session");
 const Passwordless = require("supertokens-node/recipe/passwordless");
+const EmailVerification = require("supertokens-node/recipe/emailverification");
 const ThirdPartyEmailPassword = require("supertokens-node/recipe/thirdpartyemailpassword");
 
 // Run the tests in a DOM environment.
@@ -54,6 +55,9 @@ SuperTokensNode.init({
             contactMethod: "EMAIL_OR_PHONE",
             flowType: "USER_INPUT_CODE_AND_MAGIC_LINK",
         }),
+        EmailVerification.init({
+            mode: "OPTIONAL",
+        }),
         ThirdPartyEmailPassword.init(),
         Session.init(),
     ],
@@ -125,10 +129,21 @@ describe("SuperTokens Example Basic tests", function () {
             await setInputValues(page, [{ name: "userInputCode", value: testOTP }]);
             await submitForm(page);
 
-            const callApiBtn = await page.waitForSelector(".sessionButton");
-
             const [user] = await ThirdPartyEmailPassword.getUsersByEmail(email);
 
+            // We get to the email verification screen
+            await waitForSTElement(page, "[data-supertokens~='sendVerifyEmailIcon']");
+            // Attempt reloading Home
+            await Promise.all([page.goto(websiteDomain), page.waitForNavigation({ waitUntil: "networkidle0" })]);
+            await waitForSTElement(page, "[data-supertokens~='sendVerifyEmailIcon']");
+
+            // Create a new token and use it (we don't have access to the originally sent one)
+            const tokenInfo = await EmailVerification.createEmailVerificationToken(user.id, user.email);
+            await page.goto(`${websiteDomain}/auth/verify-email?token=${tokenInfo.token}`);
+            await submitForm(page);
+
+            const callApiBtn = await page.waitForSelector(".sessionButton");
+
             let setAlertContent;
             let alertContent = new Promise((res) => (setAlertContent = res));
             page.on("dialog", async (dialog) => {