Merged in feat/sas-otp-error-handling (pull request #1272)

Feat/sas otp error handling * Improve error handling for SAS OTP * Remove failing and deprecated test Approved-by: Joakim Jäderberg
2025-02-07 14:18:00 +00:00
parent fbe05eb456
commit 18288cb849
11 changed files with 187 additions and 94 deletions
--- a/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/callback/route.ts
+++ b/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/callback/route.ts
@@ -82,13 +82,23 @@ export async function GET(
    const [data, error] = await safeTry(
      serverClient().partner.sas.requestOtp({})
    )
-    // status: 'SENT' => OK
    if (!data || error) {
-      //TODO: Check what error we get
      console.error("[SAS] Failed to request OTP", error)
      redirect(`/${lang}/sas-x-scandic/error`)
    }

+    switch (data.status) {
+      case "ABUSED":
+        redirect(`/${params.lang}/sas-x-scandic/error?errorCode=tooManyCodes`)
+      case "NOTSENT":
+        redirect(`/${params.lang}/sas-x-scandic/error`)
+      case "NULL":
+      case "RETRY":
+      case "EXPIRED":
+        // These errors should never happen for request, but according to the API spec they can
+        throw new Error(`Unhandled request OTP status ${data.status}`)
+    }
+
    console.log("[SAS] Request OTP response", data)

    const otpUrl = new URL(
--- a/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/TooManyFailedAttemptsError.tsx
+++ b/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/TooManyFailedAttemptsError.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import Button from "@/components/TempDesignSystem/Button"
+import Body from "@/components/TempDesignSystem/Text/Body"
+
+import { GenericError } from "./GenericError"
+
+export function TooManyFailedAttemptsError() {
+  const intl = useIntl()
+
+  return (
+    <GenericError
+      title={intl.formatMessage({ id: "Too many failed attempts." })}
+      variant="info"
+    >
+      <Body textAlign="center">
+        {intl.formatMessage({
+          id: "Please wait 1 hour before trying again.",
+        })}
+      </Body>
+      <Button theme="base" disabled>
+        {intl.formatMessage({ id: "Send new code" })}
+      </Button>
+    </GenericError>
+  )
+}
--- a/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/error/page.tsx
+++ b/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/error/page.tsx
@@ -1,9 +1,12 @@
 import Body from "@/components/TempDesignSystem/Text/Body"
 import { getIntl } from "@/i18n"

+import { AlreadyLinkedError } from "../components/AlreadyLinkedError"
 import { DateOfBirthError } from "../components/DateOfBirthError"
 import { GenericError } from "../components/GenericError"
 import { SASModalContactBlock } from "../components/SASModal"
+import { TooManyCodesError } from "../components/TooManyCodesError"
+import { TooManyFailedAttemptsError } from "../components/TooManyFailedAttemptsError"

 import type { LangParams, PageArgs, SearchParams } from "@/types/params"

@@ -13,10 +16,24 @@ export default async function Page({
 }: PageArgs<LangParams> & SearchParams<{ errorCode?: "dateOfBirthMismatch" }>) {
  const intl = await getIntl()

-  if (searchParams.errorCode === "dateOfBirthMismatch") {
+  const { errorCode } = searchParams
+
+  if (errorCode === "dateOfBirthMismatch") {
    return <DateOfBirthError />
  }

+  if (errorCode === "tooManyFailedAttempts") {
+    return <TooManyFailedAttemptsError />
+  }
+
+  if (errorCode === "tooManyCodes") {
+    return <TooManyCodesError />
+  }
+
+  if (errorCode === "alreadyLinked") {
+    return <AlreadyLinkedError />
+  }
+
  return (
    <GenericError
      title={intl.formatMessage({
--- a/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/page.tsx
+++ b/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/page.tsx
@@ -31,9 +31,11 @@ export default async function SASxScandicLinkPage({
    }
  }

-  return alreadyLinked ? (
-    <AlreadyLinkedError />
-  ) : (
+  if (alreadyLinked) {
+    redirect(`/${params.lang}/sas-x-scandic/error?errorCode=alreadyLinked`)
+  }
+
+  return (
    <SASModal>
      <LinkAccountForm
        initialDateOfBirth={profile?.dateOfBirth ?? null}
--- a/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/OneTimePasswordForm.tsx
+++ b/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/OneTimePasswordForm.tsx
@@ -2,6 +2,7 @@

 import { cx } from "class-variance-authority"
 import { OTPInput, type SlotProps } from "input-otp"
+import { useParams, useRouter } from "next/navigation"
 import { type ReactNode, useState, useTransition } from "react"
 import { useIntl } from "react-intl"

@@ -13,7 +14,6 @@ import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-import { toast } from "@/components/TempDesignSystem/Toasts"

 import { GenericError } from "../components/GenericError"
 import { SASModal, SASModalContactBlock } from "../components/SASModal"
@@ -22,7 +22,7 @@ import Loading from "./loading"
 import styles from "./OneTimePasswordForm.module.css"

 import type { RequestOtpError } from "@/server/routers/partners/sas/otp/request/requestOtpError"
-import type { VerifyOtpError } from "@/server/routers/partners/sas/otp/verify/verifyOtpError"
+import type { OtpError } from "./page"

 export default function OneTimePasswordForm({
  heading,
@@ -37,8 +37,10 @@ export default function OneTimePasswordForm({
  footnote?: string | ReactNode
  otpLength: number
  onSubmit: (args: { otp: string }) => Promise<void>
-  error?: ReactNode
+  error?: OtpError
 }) {
+  const router = useRouter()
+  const params = useParams()
  const [isPending, startTransition] = useTransition()
  const [disableResend, setDisableResend] = useState(false)
  const intl = useIntl()
@@ -64,6 +66,20 @@ export default function OneTimePasswordForm({
    )
  }

+  switch (requestOtp.data?.status) {
+    case "ABUSED":
+      router.push(`/${params.lang}/sas-x-scandic/error?errorCode=tooManyCodes`)
+      return <Loading />
+    case "NOTSENT":
+      router.push(`/${params.lang}/sas-x-scandic/error`)
+      return <Loading />
+    case "NULL":
+    case "RETRY":
+    case "EXPIRED":
+      // These errors should never happen for request, but according to the API spec they can
+      throw new Error(`Unhandled request OTP status ${requestOtp.data?.status}`)
+  }
+
  function handleRequestNewOtp(event: React.MouseEvent) {
    event.preventDefault()
    if (disableResend) return
@@ -84,6 +100,35 @@ export default function OneTimePasswordForm({
    })
  }

+  const getResendOtpLink = (str: ReactNode) => (
+    <Link
+      href="#"
+      onClick={handleRequestNewOtp}
+      color="red"
+      variant="default"
+      size="tiny"
+      className={disableResend ? styles["disabled-link"] : ""}
+    >
+      {str}
+    </Link>
+  )
+
+  const errorMessages: Record<OtpError, ReactNode> = {
+    invalidCode: intl.formatMessage({
+      id: "The code you’ve entered is incorrect.",
+    }),
+    expiredCode: intl.formatMessage<ReactNode>(
+      {
+        id: "The code you’ve entered have expired. <resendOtpLink>Resend code.</resendOtpLink>",
+      },
+      {
+        resendOtpLink: getResendOtpLink,
+      }
+    ),
+  }
+
+  const errorMessage = error ? errorMessages[error] : undefined
+
  return (
    <SASModal>
      <Subtitle textAlign={"center"}>{heading}</Subtitle>
@@ -110,10 +155,10 @@ export default function OneTimePasswordForm({
          </>
        )}
      />
-      {error && (
+      {errorMessage && (
        <div className={styles["error-message"]}>
          <ErrorCircleFilledIcon height={20} width={20} color="red" />
-          <Caption color="red">{error}</Caption>
+          <Caption color="red">{errorMessage}</Caption>
        </div>
      )}
      <div>
@@ -124,18 +169,7 @@ export default function OneTimePasswordForm({
              id: "Didn't receive a code? <resendOtpLink>Resend code</resendOtpLink>",
            },
            {
-              resendOtpLink: (str) => (
-                <Link
-                  href="#"
-                  onClick={handleRequestNewOtp}
-                  color="red"
-                  variant="default"
-                  size="tiny"
-                  className={disableResend ? styles["disabled-link"] : ""}
-                >
-                  {str}
-                </Link>
-              ),
+              resendOtpLink: getResendOtpLink,
            }
          )}
        </Footnote>
@@ -176,23 +210,3 @@ const getRequestErrorBody = (
      })
  }
 }
-
-const getVerifyErrorBody = (
-  intl: ReturnType<typeof useIntl>,
-  errorCode: VerifyOtpError["errorCode"]
-) => {
-  switch (errorCode) {
-    case "WRONG_OTP":
-      return intl.formatMessage({
-        id: "The code you entered is incorrect. Please try again.",
-      })
-    case "OTP_EXPIRED":
-      return intl.formatMessage({
-        id: "OTP has expired. Please try again.",
-      })
-    default:
-      return intl.formatMessage({
-        id: "An error occurred while requesting a new OTP",
-      })
-  }
-}
--- a/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/page.tsx
+++ b/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/page.tsx
@@ -13,12 +13,15 @@ import OneTimePasswordForm from "./OneTimePasswordForm"
 import type { LangParams, PageArgs, SearchParams } from "@/types/params"
 import type { Lang } from "@/constants/languages"

+const otpError = z.enum(["invalidCode", "expiredCode"])
 const searchParamsSchema = z.object({
  intent: z.enum(["link"]),
  to: z.string(),
-  error: z.enum(["invalidCode"]).optional(),
+  error: otpError.optional(),
 })

+export type OtpError = z.infer<typeof otpError>
+
 export default async function SASxScandicOneTimePasswordPage({
  searchParams,
  params,
@@ -37,37 +40,48 @@ export default async function SASxScandicOneTimePasswordPage({
    redirect(`/${params.lang}/sas-x-scandic/login?intent=${intent}`)
  }

-  const errors = {
-    invalidCode: intl.formatMessage({
-      id: "The code you’ve entered is incorrect.",
-    }),
-  }
-
  async function handleOtpVerified({ otp }: { otp: string }) {
    "use server"
-
    const [data, error] = await safeTry(
      serverClient().partner.sas.verifyOtp({ otp })
    )

-    // TODO correct status?
-    // TODO handle all errors
-    // STATUS === VERIFIED => ok
-    // STATUS === ABUSED => otpRetryCount > otpMaxRetryCount
-    if (error || data?.status !== "VERIFIED") {
-      const search = new URLSearchParams({
-        ...searchParams,
-        error: "invalidCode",
-      }).toString()
+    if (error || !data) {
+      throw error || new Error("OTP verification failed")
+    }

-      redirect(`/${params.lang}/sas-x-scandic/otp?${search}`)
+    switch (data.status) {
+      case "ABUSED":
+        redirect(
+          `/${params.lang}/sas-x-scandic/error?errorCode=tooManyFailedAttempts`
+        )
+      case "EXPIRED": {
+        const search = new URLSearchParams({
+          ...searchParams,
+          error: "expiredCode",
+        }).toString()
+
+        redirect(`/${params.lang}/sas-x-scandic/otp?${search}`)
+      }
+      case "RETRY": {
+        const search = new URLSearchParams({
+          ...searchParams,
+          error: "invalidCode",
+        }).toString()
+
+        redirect(`/${params.lang}/sas-x-scandic/otp?${search}`)
+      }
+      case "NOTSENT":
+      case "NULL":
+      case "SENT":
+      case "PENDING":
+        // These errors should never happen for verify, but according to the API spec they can
+        throw new Error("Unhandled OTP status")
    }

    switch (intent) {
      case "link":
        return handleLinkAccount({ lang: params.lang })
-      default:
-        throw new Error("")
    }
  }

@@ -93,7 +107,7 @@ export default async function SASxScandicOneTimePasswordPage({
      })}
      otpLength={6}
      onSubmit={handleOtpVerified}
-      error={error ? errors[error] : undefined}
+      error={error}
    />
  )
 }