feat(frontend): implement verification flow

Author: BarcoMasile

ui/.eslintrc.js

@@ -36,5 +36,9 @@ module.exports = {
     semi: ["error", "always"],
     "object-curly-spacing": ["error", "always"],
     "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-unsafe-assignment": "off",
+    "@typescript-eslint/no-unsafe-member-access": "off",
+    "@typescript-eslint/no-redundant-type-constituents": "off"
   },
 };

ui/components/Flow.tsx

@@ -8,6 +8,7 @@ import {
   UpdateRegistrationFlowBody,
   UpdateSettingsFlowBody,
   UpdateVerificationFlowBody,
+  VerificationFlow,
 } from "@ory/client";
 import { getNodeId, isUiNodeInputAttributes } from "@ory/integrations/ui";
 import React, { Component, FormEvent } from "react";
@@ -25,13 +26,14 @@ export type Methods =
   | "oidc"
   | "password"
   | "code"
+  | "profile"
   | "totp"
   | "webauthn"
   | "lookup_secret";
 
 export interface Props<T> {
   // The flow
-  flow?: LoginFlow | RecoveryFlow | SettingsFlow;
+  flow?: LoginFlow | RecoveryFlow | SettingsFlow | VerificationFlow;
   // Only show certain nodes. We will always render the default nodes for CSRF tokens.
   only?: Methods;
   // Is triggered on submission

ui/components/NodeInputSubmit.tsx

@@ -25,6 +25,7 @@ export const NodeInputSubmit: FC<NodeInputProps> = ({
     return node.group === "password" ||
       node.group === "code" ||
       node.group === "totp" ||
+      node.group === "profile" ||
       node.group === "webauthn" ||
       node.group === "lookup_secret"
       ? "positive"

ui/components/NodeInputText.tsx

@@ -1,6 +1,6 @@
 import { getNodeLabel } from "@ory/integrations/ui";
 import { Input } from "@canonical/react-components";
-import React, { FC } from "react";
+import React, { FC, useEffect, useMemo } from "react";
 import { NodeInputProps } from "./helpers";
 
 export const NodeInputText: FC<NodeInputProps> = ({
@@ -12,7 +12,9 @@ export const NodeInputText: FC<NodeInputProps> = ({
   dispatchSubmit,
   error,
 }) => {
-  const [inputValue, setInputValue] = React.useState(attributes.value as string);
+  const [inputValue, setInputValue] = React.useState(
+    attributes.value as string,
+  );
 
   const urlParams = new URLSearchParams(window.location.search);
   const isWebauthn = urlParams.get("webauthn") === "true";
@@ -27,10 +29,17 @@ export const NodeInputText: FC<NodeInputProps> = ({
   }
   const isDuplicate = deduplicateValues.includes(value as string);
 
-  const message = node.messages.map(({ text }) => text).join(" ");
-  if (message) {
-    setInputValue(message);
-  }
+  const message = useMemo(
+    () => node.messages.map(({ text }) => text).join(" "),
+    [node.messages],
+  );
+
+  useEffect(() => {
+    if (message) {
+      setInputValue(message);
+    }
+  }, [message, setInputValue]);
+
   const getError = () => {
     if (message.startsWith("Invalid login method")) {
       return "Invalid login method";
@@ -63,7 +72,11 @@ export const NodeInputText: FC<NodeInputProps> = ({
       disabled={disabled}
       value={inputValue}
       error={getError()}
-      onChange={(e) => void setValue(e.target.value)}
+      onChange={(e) => {
+        const newValue = e.target.value;
+        setInputValue(newValue);
+        void setValue(newValue);
+      }}
       onKeyDown={(e) => {
         if (e.key === "Enter") {
           e.preventDefault();

ui/pages/verification.tsx

@@ -0,0 +1,129 @@
+import { NextPage } from "next";
+import React, { useCallback, useEffect, useState } from "react";
+import {
+  UiNode,
+  UiNodeInputAttributes,
+  UpdateVerificationFlowBody,
+  UpdateVerificationFlowWithCodeMethod,
+  VerificationFlow,
+} from "@ory/client";
+import { NextRouter, useRouter } from "next/router";
+import { handleFlowError } from "../util/handleFlowError";
+import { kratos } from "../api/kratos";
+import { Flow } from "../components/Flow";
+import PageLayout from "../components/PageLayout";
+import { Spinner } from "@canonical/react-components";
+import { AxiosError } from "axios";
+
+function setFlowIDQueryParam(router: NextRouter, flowId: string) {
+  void router.push(
+    {
+      pathname: router.pathname,
+      query: { ...router.query, flow: flowId },
+    },
+    undefined,
+    { shallow: true },
+  );
+}
+
+const Verification: NextPage = () => {
+  const [flow, setFlow] = useState<VerificationFlow>();
+  const router = useRouter();
+  const {
+    return_to: returnTo,
+    flow: flowId,
+    code: verificationCode,
+  } = router.query;
+
+  const redirectToErrorPage = () => {
+    const idParam = flowId ? `?id=${flowId.toString()}` : "";
+    window.location.href = `./error${idParam}`;
+  };
+
+  useEffect(() => {
+    if (!router.isReady || flow) {
+      return;
+    }
+
+    if (flowId) {
+      kratos
+        .getVerificationFlow({ id: String(flowId) })
+        .then(({ data }) => {
+          if (verificationCode) {
+            const predicate = (node: UiNode) =>
+              node.group === "code" &&
+              node.type === "input" &&
+              (node.attributes as UiNodeInputAttributes).name === "code";
+            const codeUiNode = data.ui.nodes.find(predicate);
+            if (codeUiNode) {
+              (codeUiNode.attributes as UiNodeInputAttributes).value =
+                String(verificationCode);
+            }
+          }
+          setFlowIDQueryParam(router, data.id);
+          setFlow(data);
+        })
+        .catch(handleFlowError("verification", setFlow))
+        .catch(redirectToErrorPage);
+
+      return;
+    }
+
+    kratos
+      .createBrowserVerificationFlow({
+        returnTo: returnTo ? String(returnTo) : undefined,
+      })
+      .then(({ data }) => {
+        setFlow(data);
+        setFlowIDQueryParam(router, String(data.id));
+      })
+      .catch(handleFlowError("verification", setFlow))
+      .catch(redirectToErrorPage);
+  }, [flowId, router, router.isReady, returnTo]);
+
+  const handleSubmit = useCallback(
+    (values: UpdateVerificationFlowBody) => {
+      return kratos
+        .updateVerificationFlow({
+          flow: String(flow?.id),
+          updateVerificationFlowBody: {
+            ...(values as UpdateVerificationFlowWithCodeMethod),
+            method: "code",
+          },
+        })
+        .then(({ data }) => {
+          if ("continue_with" in data) {
+            const continue_with: any = (
+              data as { continue_with: Array<{ action: string } & any> }
+            ).continue_with[0];
+            if (continue_with.action === "redirect_browser_to") {
+              window.location.href = continue_with.redirect_browser_to;
+            }
+            return;
+          }
+          setFlow(data);
+        })
+        .catch(handleFlowError("verification", setFlow))
+        .catch((err: AxiosError<VerificationFlow>) => {
+          if (err.response?.status === 400) {
+            setFlow(err.response.data);
+            return;
+          }
+          return Promise.reject(err);
+        });
+    },
+    [flow],
+  );
+
+  if (!flow) {
+    return null;
+  }
+
+  return (
+    <PageLayout title="Verify your email">
+      {flow ? <Flow onSubmit={handleSubmit} flow={flow} /> : <Spinner />}
+    </PageLayout>
+  );
+};
+
+export default Verification;