OIDC Client implementation

Author: dvoytenko

.gitignore

@@ -34,3 +34,8 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+.vscode/launch.json
+/test*.sh
+/test*.json
+/test*.mjs

app/login/vercel/actions.ts

@@ -0,0 +1,46 @@
+"use server";
+
+import { cookies as getCookies, headers as getHeaders } from "next/headers";
+import { redirect } from "next/navigation";
+import { createAuthorizationUrl } from "./issuer";
+
+export async function startAuthorization(formData: FormData) {
+  console.log("startAuthorization:", Object.fromEntries(formData));
+  const headers = getHeaders();
+  const cookies = getCookies();
+
+  const host = headers.get("host");
+
+  const protocol = host?.startsWith("localhost") ? "http" : "https";
+  const callbackUrl = `${protocol}://${host}/login/vercel/callback`;
+  const { redirectTo, state } = await createAuthorizationUrl({
+    callbackUrl,
+  });
+  console.log("Redirecting to authorization URL:", {
+    redirectTo,
+    state,
+  });
+  cookies.set("vercel-oidc-state", state, { httpOnly: true });
+  redirect(redirectTo);
+}
+
+export async function startImplicitAuthorization(formData: FormData) {
+  console.log("startImplicitAuthorization:", Object.fromEntries(formData));
+  const headers = getHeaders();
+  const cookies = getCookies();
+
+  const host = headers.get("host");
+
+  const protocol = host?.startsWith("localhost") ? "http" : "https";
+  const callbackUrl = `${protocol}://${host}/login/vercel/callback-implicit`;
+  const { redirectTo, state } = await createAuthorizationUrl({
+    callbackUrl,
+    explicit: false,
+  });
+  console.log("Redirecting to authorization URL:", {
+    redirectTo,
+    state,
+  });
+  cookies.set("vercel-oidc-state", state, { httpOnly: true });
+  redirect(redirectTo);
+}

app/login/vercel/callback-implicit/actions.ts

@@ -0,0 +1,21 @@
+"use server";
+
+import { cookies as getCookies } from "next/headers";
+import { validateImplicitAuthorization } from "../issuer";
+
+export async function validateImplicitAuthorizationAction(
+  oidcParams: Record<string, string>
+) {
+  const { id_token, state } = oidcParams;
+
+  const cookies = await getCookies();
+  const expectedState = cookies.get("vercel-oidc-state")?.value || undefined;
+
+  const claims = await validateImplicitAuthorization({
+    id_token,
+    state,
+    expectedState,
+  });
+
+  return { claims };
+}

app/login/vercel/callback-implicit/page.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { useEffect, useState, useTransition } from "react";
+import { validateImplicitAuthorizationAction } from "./actions";
+import { set } from "lodash";
+
+export default function ImplicitOidcCallbackPage() {
+  const [oidcParams, setOidcParams] = useState<Record<string, string>>({});
+
+  useEffect(() => {
+    const hash = window.location.hash;
+    if (hash) {
+      const params = new URLSearchParams(hash.replace("#", "?"));
+      setOidcParams(Object.fromEntries(params));
+    }
+  }, []);
+
+  const [isPending, startTransition] = useTransition();
+  const [error, setError] = useState<string | null>(null);
+  const [claims, setClaims] = useState<Record<string, any> | null>(null);
+
+  const handleValidate = () => {
+    setError(null);
+    startTransition(async () => {
+      try {
+        const response = await validateImplicitAuthorizationAction(oidcParams);
+        setClaims(response.claims);
+      } catch {
+        setError("Failed to validate OIDC authorization");
+      }
+    });
+  };
+
+  return (
+    <div className="bg-gray-100 h-screen flex items-center justify-center">
+      <div className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 w-full max-w-sm flex flex-col gap-4">
+        <h1 className="block text-gray-700 text-xl font-bold mb-6 text-center">
+          Implicit OIDC Callback
+        </h1>
+        <pre>{JSON.stringify(oidcParams, null, 2)}</pre>
+        <form method="POST" action={handleValidate}>
+          <button
+            type="submit"
+            disabled={isPending || !oidcParams.id_token}
+            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+          >
+            Validate response
+          </button>
+        </form>
+        <div>
+          {isPending ? (
+            <p>Validating...</p>
+          ) : claims ? (
+            <pre>{JSON.stringify(claims, null, 2)}</pre>
+          ) : (
+            <div />
+          )}
+        </div>
+        {error ? <div className="bg-red-600">{error}</div> : null}
+      </div>
+    </div>
+  );
+}

app/login/vercel/callback/route.ts

@@ -0,0 +1,19 @@
+import { cookies as getCookies } from "next/headers";
+import { getTokens } from "../issuer";
+
+export async function GET(req: Request) {
+  const url = req.url;
+
+  const cookies = await getCookies();
+  const expectedState = cookies.get("vercel-oidc-state")?.value || undefined;
+  console.log("Callback:", { url, expectedState });
+
+  const { id_token, claims } = (await getTokens(url, expectedState)) || {};
+
+  if (id_token) {
+    cookies.set("id-token", id_token);
+  }
+
+  // TODO: redirect to the /dashboard
+  return Response.json({ id_token, claims });
+}

app/login/vercel/issuer.ts

@@ -0,0 +1,145 @@
+import {
+  allowInsecureRequests,
+  authorizationCodeGrant,
+  buildAuthorizationUrl,
+  Configuration,
+  discovery,
+  IDToken,
+  implicitAuthentication,
+  randomState,
+  randomNonce,
+} from "openid-client";
+import { createRemoteJWKSet, jwtVerify } from "jose";
+
+const OIDC_ISSUER = "http://localhost:4000";
+const OIDC_CLIENT_ID = "my_web_app1";
+const OIDC_CLIENT_SECRET = "super_secret_client_secret1";
+
+let clientPromise: Promise<Configuration> | undefined;
+let jwks: ReturnType<typeof createRemoteJWKSet> | undefined;
+
+export async function getOidcConfiguration(): Promise<Configuration> {
+  if (clientPromise) {
+    return clientPromise;
+  }
+
+  clientPromise = (async () => {
+    try {
+      const configuration = await discovery(
+        new URL(OIDC_ISSUER),
+        OIDC_CLIENT_ID,
+        {
+          client_id: OIDC_CLIENT_ID,
+          client_secret: OIDC_CLIENT_SECRET,
+        },
+        undefined,
+        {
+          algorithm: "oidc",
+          execute: [allowInsecureRequests],
+        }
+      );
+      console.log("Discovered configuration: ", configuration.serverMetadata());
+      return configuration;
+    } catch (error) {
+      console.error(
+        "Error discovering OIDC issuer or initializing client:",
+        error
+      );
+      throw error;
+    }
+  })();
+  return clientPromise;
+}
+
+export async function createAuthorizationUrl({
+  callbackUrl,
+  explicit = true,
+}: {
+  callbackUrl: string;
+  explicit?: boolean;
+}): Promise<{
+  redirectTo: string;
+  state: string;
+}> {
+  const config = await getOidcConfiguration();
+
+  const state = randomState();
+
+  const redirectTo = buildAuthorizationUrl(config, {
+    redirect_uri: callbackUrl,
+    scope: "openid",
+    state,
+    response_type: explicit ? "code" : "id_token",
+  });
+
+  return {
+    redirectTo: redirectTo.toString(),
+    state,
+  };
+}
+
+async function getJwks() {
+  if (!jwks) {
+    const config = await getOidcConfiguration();
+    const serverMetadata = config.serverMetadata();
+    if (!serverMetadata.jwks_uri) {
+      throw new Error("JWKS URI not found in server metadata.");
+    }
+    console.log("Creating JWKS from server metadata:", serverMetadata.jwks_uri);
+    jwks = createRemoteJWKSet(new URL(serverMetadata.jwks_uri));
+  }
+  return jwks;
+}
+
+async function validateIdToken(id_token: string): Promise<IDToken> {
+  const jwks = await getJwks();
+  const token = await jwtVerify<IDToken>(id_token, jwks);
+  console.log("ID Token claims:", token.payload);
+  return token.payload;
+}
+
+export async function getTokens(
+  currentUrl: string,
+  expectedState: string | undefined
+): Promise<{ id_token: string; claims: IDToken } | null> {
+  const config = await getOidcConfiguration();
+
+  const tokens = await authorizationCodeGrant(config, new URL(currentUrl), {
+    expectedState,
+    idTokenExpected: true,
+  });
+
+  console.log("Token Endpoint Response", tokens);
+
+  const id_token = tokens.id_token;
+  if (!id_token) {
+    console.warn("No ID token received from the token endpoint.");
+    return null;
+  }
+
+  const claims2 = tokens.claims();
+  console.log("Claims2", claims2);
+
+  const claims = await validateIdToken(id_token);
+  console.log("Token Endpoint Response claims", claims);
+
+  return { id_token, claims };
+}
+
+export async function validateImplicitAuthorization({
+  id_token,
+  state,
+  expectedState,
+}: {
+  id_token: string;
+  state: string;
+  expectedState: string | undefined;
+}): Promise<IDToken> {
+  const claims = await validateIdToken(id_token);
+
+  if (state !== expectedState) {
+    throw new Error("State mismatch during implicit authorization validation.");
+  }
+
+  return claims;
+}

app/login/vercel/page.tsx

@@ -0,0 +1,35 @@
+import { startAuthorization, startImplicitAuthorization } from "./actions";
+
+interface LoginSearchParams {}
+
+export default async function LoginVercelPage(props: {
+  searchParams: Promise<LoginSearchParams>;
+}) {
+  const searchParams = await props.searchParams;
+
+  return (
+    <div className="bg-gray-100 h-screen flex items-center justify-center">
+      <div className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 w-full max-w-sm">
+        <h1 className="block text-gray-700 text-xl font-bold mb-6 text-center">
+          Login via Vercel Marketplace
+        </h1>
+        <form method="POST" className="flex items-center justify-between gap-4">
+          <button
+            type="submit"
+            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+            formAction={startAuthorization}
+          >
+            Login with explicit flow
+          </button>
+          <button
+            type="submit"
+            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+            formAction={startImplicitAuthorization}
+          >
+            Login with implicit flow
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}

package.json

@@ -14,6 +14,7 @@
     "lodash": "^4.17.21",
     "nanoid": "^5.0.7",
     "next": "14.2.6",
+    "openid-client": "^6.6.2",
     "react": "^18",
     "react-dom": "^18",
     "zod": "^3.22.4"