add validate callback loading state and encryption

src/app/auth/idp/[idpId]/oidc/callback/ValidateOidcToken.tsx

@@ -6,6 +6,15 @@ import { ValidateOidcUrlCallbackResponse } from "@server/routers/idp";
 import { AxiosResponse } from "axios";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
+import {
+    Card,
+    CardHeader,
+    CardTitle,
+    CardContent,
+    CardDescription
+} from "@/components/ui/card";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Loader2, CheckCircle2, AlertCircle } from "lucide-react";
 
 type ValidateOidcTokenParams = {
     orgId: string;
@@ -13,6 +22,7 @@ type ValidateOidcTokenParams = {
     code: string | undefined;
     expectedState: string | undefined;
     stateCookie: string | undefined;
+    idp: {name: string};
 };
 
 export default function ValidateOidcToken(props: ValidateOidcTokenParams) {
@@ -50,6 +60,9 @@ export default function ValidateOidcToken(props: ValidateOidcTokenParams) {
                     router.push("/");
                 }
 
+                setLoading(false);
+                await new Promise((resolve) => setTimeout(resolve, 100));
+
                 if (redirectUrl.startsWith("http")) {
                     window.location.href = res.data.data.redirectUrl; // TODO: validate this to make sure it's safe
                 } else {
@@ -67,11 +80,36 @@ export default function ValidateOidcToken(props: ValidateOidcTokenParams) {
     }, []);
 
     return (
-        <>
-            <h1>Validating OIDC Token...</h1>
-            {loading && <p>Loading...</p>}
-            {!loading && <p>Token validated successfully!</p>}
-            {error && <p>Error: {error}</p>}
-        </>
+        <div className="flex items-center justify-center min-h-screen">
+            <Card className="w-full max-w-md">
+                <CardHeader>
+                    <CardTitle>Connecting to {props.idp.name}</CardTitle>
+                    <CardDescription>Validating your identity</CardDescription>
+                </CardHeader>
+                <CardContent className="flex flex-col items-center space-y-4">
+                    {loading && (
+                        <div className="flex items-center space-x-2">
+                            <Loader2 className="h-5 w-5 animate-spin" />
+                            <span>Connecting...</span>
+                        </div>
+                    )}
+                    {!loading && !error && (
+                        <div className="flex items-center space-x-2 text-green-600">
+                            <CheckCircle2 className="h-5 w-5" />
+                            <span>Connected</span>
+                        </div>
+                    )}
+                    {error && (
+                        <Alert variant="destructive" className="w-full">
+                            <AlertCircle className="h-5 w-5" />
+                            <AlertDescription className="flex flex-col space-y-2">
+                                <span>There was a problem connecting to {props.idp.name}. Please contact your administrator.</span>
+                                <span className="text-xs text-muted-foreground">{error}</span>
+                            </AlertDescription>
+                        </Alert>
+                    )}
+                </CardContent>
+            </Card>
+        </div>
     );
 }

src/app/auth/idp/[idpId]/oidc/callback/page.tsx

@@ -1,5 +1,8 @@
 import { cookies } from "next/headers";
 import ValidateOidcToken from "./ValidateOidcToken";
+import { idp } from "@server/db/schemas";
+import db from "@server/db";
+import { eq } from "drizzle-orm";
 
 export default async function Page(props: {
     params: Promise<{ orgId: string; idpId: string }>;
@@ -14,6 +17,16 @@ export default async function Page(props: {
     const allCookies = await cookies();
     const stateCookie = allCookies.get("p_oidc_state")?.value;
 
+    // query db directly in server component because just need the name
+    const [idpRes] = await db
+        .select({ name: idp.name })
+        .from(idp)
+        .where(eq(idp.idpId, parseInt(params.idpId!)));
+
+    if (!idpRes) {
+        return <div>IdP not found</div>;
+    }
+
     return (
         <>
             <ValidateOidcToken
@@ -22,6 +35,7 @@ export default async function Page(props: {
                 code={searchParams.code}
                 expectedState={searchParams.state}
                 stateCookie={stateCookie}
+                idp={{ name: idpRes.name }}
             />
         </>
     );

src/app/auth/resource/[resourceId]/ResourceAuthPortal.tsx

@@ -490,7 +490,7 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
                                         className={`${numMethods <= 1 ? "mt-0" : ""}`}
                                     >
                                         <LoginForm
-                                            redirect={`/auth/resource/${props.resource.id}`}
+                                            redirect={props.redirect}
                                             onLogin={async () =>
                                                 await handleSSOAuth()
                                             }

src/app/globals.css

@@ -23,7 +23,7 @@
   --border: hsl(20 5.9% 90%);
   --input: hsl(20 5.9% 75%);
   --ring: hsl(24.6 95% 53.1%);
-  --radius: 0.50rem;
+  --radius: 0.75rem;
   --chart-1: hsl(12 76% 61%);
   --chart-2: hsl(173 58% 39%);
   --chart-3: hsl(197 37% 24%);

src/components/LoginForm.tsx

@@ -24,7 +24,7 @@ import {
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { LoginResponse } from "@server/routers/auth";
 import { useRouter } from "next/navigation";
-import { AxiosResponse, AxiosResponse } from "axios";
+import { AxiosResponse } from "axios";
 import { formatAxiosError } from "@app/lib/api";
 import { LockIcon } from "lucide-react";
 import { createApiClient } from "@app/lib/api";
@@ -136,7 +136,7 @@ export default function LoginForm({ redirect, onLogin }: LoginFormProps) {
             const res = await api.post<AxiosResponse<GenerateOidcUrlResponse>>(
                 `/auth/idp/${idpId}/oidc/generate-url`,
                 {
-                    redirectUrl: redirect || "/" // this is the post auth redirect url
+                    redirectUrl: redirect || "/"
                 }
             );
 

src/lib/cleanRedirect.ts

@@ -9,10 +9,10 @@ const patterns: PatternConfig[] = [
     { name: "Resource Auth Portal", regex: /^\/auth\/resource\/\d+$/ }
 ];
 
-export function cleanRedirect(input: string): string {
+export function cleanRedirect(input: string, fallback?: string): string {
     if (!input || typeof input !== "string") {
         return "/";
     }
     const isAccepted = patterns.some((pattern) => pattern.regex.test(input));
-    return isAccepted ? input : "/";
+    return isAccepted ? input : fallback || "/";
 }