Better handle login error. (#4222)

front/pages/api/auth/[auth0].ts

@@ -1,5 +1,12 @@
-import { handleAuth, handleLogin } from "@auth0/nextjs-auth0";
+import {
+  CallbackHandlerError,
+  handleAuth,
+  handleCallback,
+  handleLogin,
+  IdentityProviderError,
+} from "@auth0/nextjs-auth0";
 import type { AuthorizationParameters } from "@auth0/nextjs-auth0/dist/auth0-session";
+import type { NextApiRequest, NextApiResponse } from "next";
 
 export default handleAuth({
   login: handleLogin((req) => {
@@ -18,4 +25,21 @@ export default handleAuth({
       authorizationParams: defaultAuthorizationParams,
     };
   }),
+  callback: async (req: NextApiRequest, res: NextApiResponse) => {
+    try {
+      await handleCallback(req, res);
+    } catch (error) {
+      let reason: string | null = null;
+
+      if (error instanceof CallbackHandlerError) {
+        if (error.cause instanceof IdentityProviderError) {
+          reason = error.cause.error ?? null;
+        }
+
+        return res.redirect(`/login-error?reason=${reason}`);
+      }
+
+      return res.redirect("/login-error");
+    }
+  },
 });

front/pages/login-error.tsx

@@ -4,27 +4,58 @@ import Link from "next/link";
 
 import { makeGetServerSidePropsRequirementsWrapper } from "@app/lib/iam/session";
 
-const { URL = "", GA_TRACKING_ID = "" } = process.env;
+const { GA_TRACKING_ID = "" } = process.env;
 
 export const getServerSideProps = makeGetServerSidePropsRequirementsWrapper({
   requireAuth: false,
 })<{
-  domain?: string;
+  domain: string | null;
   gaTrackingId: string;
-  baseUrl: string;
+  reason: string | null;
 }>(async (context) => {
   return {
     props: {
-      domain: context.query.domain as string,
-      baseUrl: URL,
+      domain: (context.query.domain as string) ?? null,
       gaTrackingId: GA_TRACKING_ID,
+      reason: (context.query.reason as string) ?? null,
     },
   };
 });
 
+function getErrorMessage(domain: string | null, reason: string | null) {
+  if (domain) {
+    return (
+      <>
+        The domain @{domain} attached to your email address is not authorized to
+        join this workspace.
+        <br />
+        Please contact your workspace admin to get access or contact us at
+        [email protected] for assistance.
+      </>
+    );
+  }
+
+  switch (reason) {
+    case "unauthorized":
+      return (
+        <>
+          Oops! Looks like you're not authorized to access this application yet.
+          To gain access, please ask your workspace administrator to add you or
+          your domain. Need more help? Email us at [email protected].
+        </>
+      );
+
+    default:
+      return <>Please contact us at [email protected] for assistance.</>;
+  }
+}
+
 export default function LoginError({
   domain,
+  reason,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
+  const errorMessage = getErrorMessage(domain, reason);
+
   return (
     <>
       <div className="fixed bottom-0 left-0 right-0 top-0 -z-50 bg-slate-800" />
@@ -49,19 +80,7 @@ export default function LoginError({
             <p className="font-regular mb-8 text-slate-400">
               We could not process your sign up request!
             </p>
-            <p className="font-regular mb-8 text-slate-400">
-              {domain ? (
-                <>
-                  The domain @{domain} attached to your email address is not
-                  authorized to join this workspace.
-                  <br />
-                  Please contact your workspace admin to get access or contact
-                  us at [email protected] for assistance.
-                </>
-              ) : (
-                <>Please contact us at [email protected] for assistance.</>
-              )}
-            </p>
+            <p className="font-regular mb-8 text-slate-400">{errorMessage}</p>
             <Link href="/">
               <Button variant="primary" label="Back to homepage" size="md" />
             </Link>