Getting started

Use the builder. Pick identity providers, a form library, and a validation library. Preview the form, open Get Code, and run the command it gives you.

That command registers @oidc-ui and adds the composed form, the providers you picked, and any add-ons.

Use the CLI

If you already know what you want, register the registry, then list or search items:

npx shadcn@latest registry add @oidc-ui=https://oidc.shadcn.com/r/{name}.json

npx shadcn@latest list @oidc-ui

npx shadcn@latest search @oidc-ui -q github

Then add the items you chose. core is the default GitHub + Vercel starter form. Prefer the builder for other combinations.

npx shadcn@latest add @oidc-ui/core @oidc-ui/verify @oidc-ui/page-actions

Provider item names encode the form library and validation. npx shadcn@latest list @oidc-ui is the source of truth. See Providers.

Render the form

import { OidcPolicyForm } from "@/components/oidc/policy-form"

export default function Page() {
  return <OidcPolicyForm />
}

The file is yours. Add providers, swap the picker, and wire onSubmit to your storage.

Save and verify

Submit emits an OidcPolicy. Validate it on the server before you persist it, then check inbound tokens with verifyOidcToken.

"use server"

import { validateOidcPolicy, type OidcPolicy } from "@/lib/oidc/policy"

export async function savePolicy(policy: OidcPolicy) {
  const errors = validateOidcPolicy(policy)
  if (errors.length > 0) {
    return { errors }
  }
  // Replace with your storage.
}

import { verifyOidcToken } from "@/lib/oidc/verify"

const result = await verifyOidcToken(token, policies)
if (!result.ok) {
  throw new Error(result.message)
}

See Save and verify for the policy shape, the onSubmit wiring, and the verifier error codes.

Next steps

• Builder for what each control does
• Save and verify for persistence and token checks
• Providers for item names