Added error page on callback error

Author: Paul Asjes

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

@@ -0,0 +1,33 @@
+"use client";
+
+import { Text, Heading, Flex, Box, Callout, Container } from "@radix-ui/themes";
+
+import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
+
+export default function ErrorPage() {
+  return (
+    <>
+      <Flex direction="column" gap="2" mb="7" align="center">
+        <Box pl="9" pr="9">
+          <Heading size="8" align="left">
+            Error
+          </Heading>
+          <Container pt="4">
+            <Callout.Root color="red" role="alert">
+              <Callout.Icon>
+                <ExclamationTriangleIcon />
+              </Callout.Icon>
+              <Callout.Text>Something went wrong</Callout.Text>
+            </Callout.Root>
+          </Container>
+          <Container pt="4">
+            <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>
+        </Box>
+      </Flex>
+    </>
+  );
+}

src/app/callback/error/page.tsx

@@ -51,7 +51,5 @@ export async function GET(request: NextRequest) {
     }
   }
 
-  return NextResponse.json({
-    error: "No authorization code was received from AuthKit",
-  });
+  return NextResponse.redirect(new URL("/callback/error", request.url));
 }