[DEV-878] Handle disabled state for no first factors (#96)

* fix(DEV-878): handle disabled state for no first factors

* Update to v1.0.6-alpha.1

---------

Co-authored-by: Userfront Robot <41898282+github-actions[bot]@users.noreply.github.com>

Author: isanchez-userfront

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@userfront/toolkit",
-  "version": "1.0.6-alpha.0",
+  "version": "1.0.6-alpha.1",
   "description": "Bindings and components for authentication with Userfront with React, Vue, other frameworks, and plain JS + HTML",
   "type": "module",
   "directories": {

package/package-lock.json

@@ -154,10 +154,11 @@ const strings = {
     },
   },
   general: {
+    disabled: "Authentication is disabled",
     redirecting: "Redirecting...",
+    unhandledError: "Oops, something went wrong",
     verified: "Verified",
     welcome: "Welcome",
-    unhandledError: "Oops, something went wrong",
   },
 };
 
@@ -206,7 +207,14 @@ const componentForStep = (state) => {
           Component: Placeholder,
         };
       }
-
+    case "disabled":
+      return {
+        title: strings.general.disabled,
+        Component: GeneralErrorMessage,
+        props: {
+          message: "Please contact an administrator for assistance",
+        },
+      };
     case "selectFirstFactor.showForm":
       return {
         title: strings[type].title,
@@ -491,7 +499,7 @@ const componentForStep = (state) => {
     case "missingFlowInDevModeError":
     case "missingFlowInLocalModeError":
     case "missingFlowFromServerError":
-    case "UnhandledError":
+    case "unhandledError":
       return {
         title: strings.general.unhandledError,
         Component: GeneralErrorMessage,

package/package.json

@@ -14,20 +14,20 @@ import { getUserfrontPropertySync } from "../../services/userfront";
 
 // GUARDS / PREDICATES
 
+const ssoStrategies = [
+  "apple",
+  "azure",
+  "google",
+  "github",
+  "twitter",
+  "facebook",
+  "linkedin",
+  "okta",
+];
+
 // Is this factor an SSO provider?
-export const isSsoProvider = (factor: Factor) => {
-  return (
-    factor.channel === "email" &&
-    (factor.strategy === "apple" ||
-      factor.strategy === "azure" ||
-      factor.strategy === "google" ||
-      factor.strategy === "github" ||
-      factor.strategy === "twitter" ||
-      factor.strategy === "facebook" ||
-      factor.strategy === "linkedin" ||
-      factor.strategy === "okta")
-  );
-};
+export const isSsoProvider = (factor: Factor) =>
+  factor.channel === "email" && ssoStrategies.includes(factor.strategy);
 
 // Is a second factor required to complete the signup or login?
 export const secondFactorRequired = (

package/src/forms/UniversalForm.jsx

@@ -30,22 +30,22 @@ import emailCodeConfig from "../views/emailCode";
 import emailLinkConfig from "../views/emailLink";
 import setNewPasswordConfig from "../views/setNewPassword";
 import {
-  isSsoProvider,
+  hasLinkQueryParams,
   hasNoActiveFactor,
   isLocalMode,
+  isLocalModeWithoutFlow,
+  isLoggedIn,
+  isLoggedInOrHasLinkCredentials,
   isMissingFlow,
   isMissingFlowFromServer,
-  isLocalModeWithoutFlow,
   isMissingTenantId,
+  isPasswordReset,
+  isSecondFactor,
+  isSetup,
+  isSsoProvider,
   passwordsMatch,
-  hasLinkQueryParams,
   secondFactorRequired,
   secondFactorRequiredFromView,
-  isLoggedIn,
-  isSecondFactor,
-  isPasswordReset,
-  isLoggedInOrHasLinkCredentials,
-  isSetup,
 } from "../config/guards";
 import {
   setActiveFactor,
@@ -92,7 +92,12 @@ export const defaultOptions = {
     // Predicates for first factors:
     // Does the flow have multiple first factors?
     hasMultipleFirstFactors: (context: AuthContext<any>, event: any) => {
-      return (context.config.flow?.firstFactors?.length ?? 0) > 1;
+      const firstFactors = context.config.flow?.firstFactors ?? [];
+      return firstFactors.length > 1;
+    },
+    hasNoFirstFactors: (context: AuthContext<any>) => {
+      const firstFactors = context.config.flow?.firstFactors ?? [];
+      return firstFactors.length === 0;
     },
     // Is the flow only one factor? One predicate per factor type.
     // If there's only one allowed factor, allows us to skip the select screen
@@ -186,54 +191,54 @@ export const defaultOptions = {
       return isSsoProvider(event.factor);
     },
 
+    hasLinkQueryParams,
     hasNoActiveFactor,
     isLocalMode,
+    isLocalModeWithoutFlow,
+    isLoggedIn,
+    isLoggedInOrHasLinkCredentials,
     isMissingFlow,
     isMissingFlowFromServer,
-    isLocalModeWithoutFlow,
     isMissingTenantId,
+    isPasswordReset,
+    isSecondFactor,
+    isSetup,
     passwordsMatch,
-    hasLinkQueryParams,
     secondFactorRequired,
     secondFactorRequiredFromView,
-    isLoggedIn,
-    isSecondFactor,
-    isPasswordReset,
-    isLoggedInOrHasLinkCredentials,
-    isSetup,
   },
   actions: {
-    setActiveFactor,
+    clearError,
+    clearResentMessage,
+    disableBack,
+    enableBack,
+    markAsSecondFactor,
+    markQueryParamsInvalid,
+    readQueryParams,
+    redirectIfLoggedIn,
+    redirectOnLoad,
     resumeIfNeeded,
-    setFlowFromUserfrontApi,
+    setActiveFactor,
+    setAllowedSecondFactors,
+    setAllowedSecondFactorsFromView,
+    setCode,
     setEmail,
+    setErrorForPasswordMismatch,
+    setErrorFromApiError,
+    setFirstFactorAction,
+    setFlowFromUserfrontApi,
     setPassword,
+    setPasswordForReset,
     setPhoneNumber,
+    setQrCode,
+    setResentMessage,
+    setSecondFactorAction,
+    setShowEmailOrUsernameIfFirstFactor,
     setTenantIdIfPresent,
     setTotpCode,
+    setupView,
     setUseBackupCode,
-    setQrCode,
-    redirectIfLoggedIn,
-    redirectOnLoad,
-    setCode,
-    setErrorFromApiError,
-    clearError,
-    setErrorForPasswordMismatch,
-    setShowEmailOrUsernameIfFirstFactor,
-    markAsSecondFactor,
-    setAllowedSecondFactors,
-    setAllowedSecondFactorsFromView,
     storeFactorResponse,
-    disableBack,
-    enableBack,
-    setupView,
-    readQueryParams,
-    markQueryParamsInvalid,
-    setResentMessage,
-    clearResentMessage,
-    setFirstFactorAction,
-    setSecondFactorAction,
-    setPasswordForReset,
   },
 };
 
@@ -526,6 +531,11 @@ const universalMachineConfig: AuthMachineConfig = {
           target: "handleLoginWithLink",
           cond: "hasLinkQueryParams",
         },
+        // Handle no first factors
+        {
+          target: "noFirstFactors",
+          cond: "hasNoFirstFactors",
+        },
         // If there are multiple first factors, then show the factor selection view
         {
           actions: "enableBack",
@@ -584,6 +594,22 @@ const universalMachineConfig: AuthMachineConfig = {
       ],
     },
 
+    // Show the disabled view if there are no first factors
+    noFirstFactors: {
+      id: "noFirstFactors",
+      always: [
+        {
+          target: "disabled",
+        },
+      ],
+    },
+
+    // Show the disabled error view
+    disabled: {
+      id: "disabled",
+      type: "final",
+    },
+
     // Show the first factor selection view, non-compact
     // Parallel states for the Password view and the rest of the form
     selectFirstFactor: selectFactorConfig,

package/src/models/config/guards.ts

@@ -8,11 +8,14 @@ import ErrorMessage from "../components/ErrorMessage";
  * @param {object} props
  * @param {object} error - a Userfront error to display
  */
-const GeneralErrorMessage = ({ error }) => {
+const GeneralErrorMessage = ({
+  error,
+  message = "An unhandled error occurred. Please try again later.",
+}) => {
   return (
     <div>
-      <p>An unhandled error occurred. Please try again later.</p>
-      <ErrorMessage error={error} />
+      {message && <p>{message}</p>}
+      {error && <ErrorMessage error={error} />}
     </div>
   );
 };

package/src/models/forms/universal.ts

@@ -11,7 +11,7 @@
   "dependencies": {
     "@xstate/inspect": "^0.7.0",
     "@xstate/react": "^3.0.1",
-    "@userfront/toolkit": "^1.0.0-alpha.17",
+    "@userfront/toolkit": "file:../package",
     "lodash.get": "^4.4.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",