Add settings page and enforce 2FA flows

package.json

@@ -32,6 +32,7 @@
     "input-otp": "^1.4.2",
     "lucide-react": "^1.23.0",
     "next-themes": "^0.4.6",
+    "qrcode.react": "^4.2.0",
     "react": "^19.2.7",
     "react-day-picker": "^10.0.1",
     "react-dom": "^19.2.7",

src/lib/ory.ts

@@ -2,12 +2,14 @@ import axios from "axios";
 
 /// Types and Interfaces
 
+type SubmitBody = Partial<Flow> & { error?: { id?: string }; redirect_browser_to?: string };
 export type FlowType = "login" | "registration" | "recovery" | "verification" | "settings";
 
 export type SubmitResponse =
-  | { kind: "success" }
+  | { flow?: Flow; kind: "success" }
   | { flow: Flow; kind: "validation" }
   | { kind: "redirect"; url: string }
+  | { kind: "refresh"; url: string }
   | { kind: "expired" };
 
 export interface Message {
@@ -23,7 +25,7 @@ export interface OryNode {
     id?: string;
     name?: string;
     src?: string;
-    text?: { text?: string };
+    text?: { context?: { secrets?: { text?: string }[] }; text?: string };
     value?: unknown;
   };
   messages: Message[];
@@ -42,6 +44,13 @@ export const ORY_URL =
 
 const ACCEPT_JSON = { headers: { Accept: "application/json" } };
 
+/// Helper functions
+
+function toFlow(body: SubmitBody): Flow | undefined {
+  const { id, return_to, ui } = body;
+  return id === undefined || ui === undefined ? undefined : { id, return_to, ui };
+}
+
 /// Exported functions
 
 export function csrfToken(flow: Flow): string {
@@ -73,12 +82,18 @@ export async function orySubmit(
   action: string,
   body: Record<string, unknown>,
 ): Promise<SubmitResponse> {
-  const { status, data } = await axios.post<Flow & { redirect_browser_to?: string }>(action, body, {
+  const { status, data } = await axios.post<SubmitBody>(action, body, {
     ...ACCEPT_JSON,
     validateStatus: () => true,
   });
+  const flow = toFlow(data);
 
-  if (status < 300) return { kind: "success" };
-  if (data.redirect_browser_to) return { kind: "redirect", url: data.redirect_browser_to };
-  return status === 400 ? { flow: data, kind: "validation" } : { kind: "expired" };
+  if (status < 300) return { flow, kind: "success" };
+  if (data.redirect_browser_to) {
+    const reason = data.error?.id;
+    return reason === "session_refresh_required" || reason === "session_aal2_required"
+      ? { kind: "refresh", url: data.redirect_browser_to }
+      : { kind: "redirect", url: data.redirect_browser_to };
+  }
+  return status === 400 && flow ? { flow, kind: "validation" } : { kind: "expired" };
 }