Merge pull request #10 from workos/paulasjes/auth-error-page

Added error page on callback error

Author: PaulAsjes

package-lock.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/themes": "^2.0.1",
     "@workos-inc/node": "^5.0.0",
     "jose": "^5.1.1",

package.json

@@ -47,11 +47,9 @@ export async function GET(request: NextRequest) {
         error: error instanceof Error ? error.message : String(error),
       };
       console.error(errorRes);
-      return NextResponse.json(errorRes);
+      return NextResponse.redirect(new URL("/error", request.url));
     }
   }
 
-  return NextResponse.json({
-    error: "No authorization code was received from AuthKit",
-  });
+  return NextResponse.redirect(new URL("/error", request.url));
 }

src/app/callback/route.ts

@@ -0,0 +1,32 @@
+import {
+  Text,
+  Heading,
+  Flex,
+  CalloutRoot,
+  CalloutIcon,
+  CalloutText,
+  Container,
+} from "@radix-ui/themes";
+import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
+
+export default function ErrorPage() {
+  return (
+    <Flex gap="4" direction="column" style={{ maxWidth: "430px" }}>
+      <Heading size="8">Error</Heading>
+      <Container>
+        <CalloutRoot color="red" role="alert">
+          <CalloutIcon>
+            <ExclamationTriangleIcon />
+          </CalloutIcon>
+          <CalloutText>Something went wrong</CalloutText>
+        </CalloutRoot>
+      </Container>
+      <Container>
+        <Text size="3" align="center" color="gray">
+          Couldn’t sign in. If you are not sure what happened, please contact
+          your organization admin.
+        </Text>
+      </Container>
+    </Flex>
+  );
+}