fix(security-key) improve ux when email does not have a security key …

…set up. fixes canonical#383 Signed-off-by: David Edler <david.edler@canonical.com>
edlerd · Dec 18, 2024 · db631fb · db631fb
1 parent e2aaea7
commit db631fb
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 15 deletions.
diff --git a/ui/components/NodeInputText.tsx b/ui/components/NodeInputText.tsx
@@ -25,6 +25,33 @@ export const NodeInputText: FC<NodeInputProps> = ({
   }
   const isDuplicate = deduplicateValues.includes(value as string);
 
+  const message = node.messages.map(({ text }) => text).join(" ");
+  const defaultValue = message.includes("Invalid login method")
+    ? (value as string)
+    : message;
+
+  const getError = () => {
+    if (message.startsWith("Invalid login method")) {
+      return "Invalid login method";
+    }
+
+    if (isDuplicate) {
+      return "This value is already in use";
+    }
+
+    if (
+      attributes.name === "code" ||
+      attributes.name === "totp" ||
+      attributes.name === "totp_code" ||
+      attributes.name === "lookup_secret" ||
+      (isWebauthn && attributes.name === "identifier")
+    ) {
+      return ucFirst(error);
+    }
+
+    return undefined;
+  };
+
   return (
     <Input
       type="text"
@@ -33,18 +60,8 @@ export const NodeInputText: FC<NodeInputProps> = ({
       name={attributes.name}
       label={getNodeLabel(node)}
       disabled={disabled}
-      defaultValue={node.messages.map(({ text }) => text).join(" ")}
-      error={
-        attributes.name === "code" ||
-        attributes.name === "totp" ||
-        attributes.name === "totp_code" ||
-        attributes.name === "lookup_secret" ||
-        (isWebauthn && attributes.name === "identifier")
-          ? ucFirst(error)
-          : isDuplicate
-            ? "This value is already in use"
-            : undefined
-      }
+      defaultValue={defaultValue}
+      error={getError()}
       onChange={(e) => void setValue(e.target.value)}
       onKeyDown={(e) => {
         if (e.key === "Enter") {

diff --git a/ui/pages/login.tsx b/ui/pages/login.tsx
@@ -16,7 +16,10 @@ import { kratos } from "../api/kratos";
 import { FlowResponse } from "./consent";
 import PageLayout from "../components/PageLayout";
 import { replaceAuthLabel } from "../util/replaceAuthLabel";
-import { UpdateLoginFlowWithOidcMethod } from "@ory/client/api";
+import {
+  UpdateLoginFlowWithOidcMethod,
+  UpdateLoginFlowWithPasswordMethod,
+} from "@ory/client/api";
 import { isSignInEmailInput, isSignInWithPassword } from "../util/constants";
 
 const Login: NextPage = () => {
@@ -36,6 +39,8 @@ const Login: NextPage = () => {
     aal,
     login_challenge,
     use_backup_code: useBackupCode,
+    email,
+    invalid_method,
   } = router.query;
 
   const redirectToErrorPage = () => {
@@ -129,6 +134,20 @@ const Login: NextPage = () => {
             return;
           }
 
+          if (
+            err.response?.data.toString().trim() ===
+            "choose a different login method"
+          ) {
+            const url = new URL(window.location.href);
+            url.searchParams.set(
+              "email",
+              (values as UpdateLoginFlowWithPasswordMethod).identifier,
+            );
+            url.searchParams.set("invalid_method", "1");
+            window.location.href = url.toString();
+            return;
+          }
+
           return Promise.reject(err);
         });
     },
@@ -178,12 +197,15 @@ const Login: NextPage = () => {
 
   if (renderFlow?.ui) {
     const urlParams = new URLSearchParams(window.location.search);
-    isWebauthn =
-      urlParams.get("webauthn") === "true" ||
+    const hasWebauthnInUrlParam = urlParams.get("webauthn") === "true";
+    const hasOnlyWebauthnNodes =
       renderFlow.ui.nodes.filter(
         (node) => node.group !== "webauthn" && node.group !== "default",
       ).length === 0;
 
+    isWebauthn =
+      (hasWebauthnInUrlParam || hasOnlyWebauthnNodes) && !invalid_method;
+
     renderFlow.ui.nodes = renderFlow?.ui.nodes.filter((node) => {
       // show webauthn elements in dedicated step after it is selected
       if (isWebauthn) {
@@ -256,6 +278,15 @@ const Login: NextPage = () => {
     if (isSignInEmailInput(node)) {
       node.meta.label.text = "Email";
     }
+    if (isSignInEmailInput(node) && email && invalid_method) {
+      (node.attributes as unknown as { value: string }).value =
+        typeof email === "string" ? email : email[email.length - 1];
+      node.messages.push({
+        id: 1,
+        type: "error",
+        text: "Invalid login method",
+      });
+    }
     return node;
   });