fix: catch Authenticate api error

raystack · Jan 15, 2025 · efe6989 · efe6989
1 parent cd6536f
commit efe6989
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/sdks/js/packages/core/react/components/onboarding/magiclink.tsx b/sdks/js/packages/core/react/components/onboarding/magiclink.tsx
@@ -5,6 +5,7 @@ import { Controller, useForm } from 'react-hook-form';
 import * as yup from 'yup';
 import { useFrontier } from '~/react/contexts/FrontierContext';
 import isEmail from 'validator/lib/isEmail';
+import { HttpErrorResponse } from '~/react/utils';
 
 const styles = {
   container: {
@@ -49,6 +50,7 @@ export const MagicLink = ({ open = false, ...props }: MagicLinkProps) => {
     watch,
     control,
     handleSubmit,
+    setError,
     formState: { errors }
   } = useForm({
     resolver: yupResolver(emailSchema)
@@ -73,11 +75,17 @@ export const MagicLink = ({ open = false, ...props }: MagicLinkProps) => {
         window.location = `${
           config.redirectMagicLinkVerify
         }?${searchParams.toString()}`;
+      } catch (err: unknown) {
+        if (err instanceof Response && err?.status === 400) {
+          const message =
+            (err as HttpErrorResponse)?.error?.message || 'Bad Request';
+          setError('email', { message });
+        }
       } finally {
         setLoading(false);
       }
     },
-    [client, config.callbackUrl, config.redirectMagicLinkVerify]
+    [client, config.callbackUrl, config.redirectMagicLinkVerify, setError]
   );
 
   const email = watch('email', '');

diff --git a/sdks/js/packages/core/react/utils/index.ts b/sdks/js/packages/core/react/utils/index.ts
@@ -15,6 +15,7 @@ import {
 import { SUBSCRIPTION_STATES } from './constants';
 import slugify from 'slugify';
 import { NIL as NIL_UUID } from 'uuid';
+import type { RpcStatus } from '~/src';
 
 export const AuthTooltipMessage =
   'You don’t have access to perform this action';
@@ -196,3 +197,8 @@ export const enrichBasePlan = (plan?: BasePlan): V1Beta1Plan | undefined => {
 
 export const defaultFetch = (...fetchParams: Parameters<typeof fetch>) =>
   fetch(...fetchParams);
+
+export interface HttpErrorResponse extends Response {
+  data: unknown;
+  error: RpcStatus;
+}