feat: expand the missing ui error message to provide more info on common errors

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 -   Added the `OAuth2Provider` recipe
 -   Changed the input types and default implementation of `AuthPageHeader` to show the client information in OAuth2 flows
+-   Expanded an error message in `AuthPage` to help with common errors
 
 ### Breaking changes
 

lib/ts/recipe/authRecipe/components/feature/authPage/authPage.tsx

@@ -569,7 +569,9 @@ async function buildAndSetChildProps(
         throw new Error(
             `Couldn't cover all first factors: ${firstFactors.join(
                 ", "
-            )} (from ${source}), available components: ${Array.from(availableFactors).join(", ")}`
+            )} (from ${source}), available components: ${Array.from(availableFactors).join(", ")}.\n` +
+                "You may have missed adding a recipe into the list of prebuiltUIs passed to list of prebuiltUIs passed to getSuperTokensRoutesForReactRouterDom, canHandleRoute, handleRoute functions or the AuthPage component.\n" +
+                "Another common error is adding a non-existent factor id into the list, e.g.: passwordless instead of otp-email/phone"
         );
     }
 

test/end-to-end/signin-rrdv5.test.js

@@ -191,7 +191,7 @@ describe("SuperTokens SignIn with react router dom v5", function () {
             assert.strictEqual(request.headers().rid, "emailpassword");
             assert.strictEqual(
                 request.postData(),
-                '{"formFields":[{"id":"email","value":"[email protected]"},{"id":"password","value":"********"}]}'
+                '{"formFields":[{"id":"email","value":"[email protected]"},{"id":"password","value":"********"}],"shouldTryLinkingWithSessionUser":false}'
             );
 
             assert.strictEqual(response.status, "WRONG_CREDENTIALS_ERROR");
@@ -272,7 +272,7 @@ describe("SuperTokens SignIn with react router dom v5", function () {
             assert.strictEqual(request.headers().rid, "emailpassword");
             assert.strictEqual(
                 request.postData(),
-                '{"formFields":[{"id":"email","value":"[email protected]"},{"id":"password","value":"Str0ngP@ssw0rd"}]}'
+                '{"formFields":[{"id":"email","value":"[email protected]"},{"id":"password","value":"Str0ngP@ssw0rd"}],"shouldTryLinkingWithSessionUser":false}'
             );
 
             assert.strictEqual(response.status, "OK");