🚸 ux: handle duplicate email account error flow

features/authCallback/actions/submitProviderCallback.ts

@@ -32,7 +32,12 @@ export const submitProviderCallback = async (
     }>;
 
     if (!responseProvision.success)
-      throw new Error("Failed to submit provider callback");
+      return {
+        success: false,
+        status: responseProvision.status,
+        message: responseProvision.message,
+        error: responseProvision.error,
+      };
 
     (await cookies()).set({
       name: "auth_token",
@@ -48,7 +53,8 @@ export const submitProviderCallback = async (
     return {
       success: false,
       status: 500,
-      message: "Error submitting provider callback",
+      message:
+        "Connection to authentication service failed. Please try again later.",
       error: error,
     };
   }

features/authCallback/index.tsx

@@ -11,10 +11,13 @@ const AuthCallbackIndex = () => {
     "We are processing your authentication.",
   );
 
-  const finishOAuthFlow = (type: string) => {
+  const finishOAuthFlow = (type: string, message?: string) => {
     setTimeout(() => {
       if (!window.opener) window.location.href = "/";
-      window.opener.postMessage({ type: type }, window.location.origin);
+      window.opener.postMessage(
+        { type: type, message: message },
+        window.location.origin,
+      );
       window.close();
     }, 1000);
   };
@@ -24,11 +27,10 @@ const AuthCallbackIndex = () => {
       const response = await submitProviderCallback(name as string, queries);
       if (response.success) {
         setTextDescription("Authentication successful! Redirecting...");
-        finishOAuthFlow("oauth-success");
+        finishOAuthFlow("oauth-success", response.message);
       } else {
-        console.error("Error in authentication callback:", response);
         setTextDescription("Authentication failed. Please try again.");
-        finishOAuthFlow("oauth-failed");
+        finishOAuthFlow("oauth-failed", response.message);
       }
     })();
   }, [name, queries]);

shared/widgets/signin/components/SignInCard.tsx

@@ -18,6 +18,7 @@ import {
 import { Icon } from "@iconify/react";
 import { Spinner } from "@/shared/libs/shadcn/ui/spinner";
 import { getOauthEndpoint } from "../actions/getOauthEndpoint";
+import { toast } from "sonner";
 
 const SignInCard = () => {
   const [isLoading, setIsLoading] = useState(false);
@@ -49,8 +50,21 @@ const SignInCard = () => {
   // Handle the feedback from popup window for OAuth
   const handleMessage = useCallback((event: MessageEvent) => {
     if (event.origin !== window.location.origin) return;
-    if (event.data.type === "oauth-success") window.location.reload();
-    if (event.data.type === "oauth-failed") setIsLoading(false);
+    if (event.data.type === "oauth-success") {
+      toast.success("Authentication successful! Redirecting...", {
+        description: event.data.message,
+        richColors: true,
+      });
+      window.location.reload();
+    }
+    if (event.data.type === "oauth-failed") {
+      toast.error("Authentication failed.", {
+        description: event.data.message || "Please try again.",
+        duration: 5000,
+        richColors: true,
+      });
+      setIsLoading(false);
+    }
   }, []);
 
   useEffect(() => {