feat(auth): update OAuth application handling and consent flow with improved parameter management

Author: hotlong

apps/account/src/hooks/useOAuthApplications.ts

@@ -71,7 +71,8 @@ export function useRegisterOAuthApplication() {
 
   const register = useCallback(
     async (req: {
-      client_name: string;
+      name?: string;
+      client_name?: string;
       redirect_uris: string[];
       token_endpoint_auth_method?: 'none' | 'client_secret_basic' | 'client_secret_post';
       grant_types?: string[];
@@ -113,12 +114,12 @@ export function useDeleteOAuthApplication() {
   const [error, setError] = useState<Error | null>(null);
 
   const remove = useCallback(
-    async (id: string) => {
+    async (clientId: string) => {
       if (!client?.oauth?.applications?.delete) throw new Error('Client not ready');
       setDeleting(true);
       setError(null);
       try {
-        return await client.oauth.applications.delete(id);
+        return await client.oauth.applications.delete(clientId);
       } catch (err) {
         setError(err as Error);
         throw err;
@@ -141,7 +142,7 @@ export function useOAuthConsent() {
   const [error, setError] = useState<Error | null>(null);
 
   const submit = useCallback(
-    async (req: { accept: boolean; consent_code?: string }) => {
+    async (req: { accept: boolean; scope?: string; oauth_query?: string }) => {
       if (!client?.oauth?.consent) throw new Error('Client not ready');
       setSubmitting(true);
       setError(null);

apps/account/src/routes/account.oauth-applications.$clientId.tsx

@@ -71,7 +71,7 @@ function OAuthApplicationDetailPage() {
   const handleDelete = async () => {
     if (!app) return;
     try {
-      await remove(app.id);
+      await remove(app.client_id);
       toast({ title: 'OAuth application deleted' });
       await reload();
       navigate({ to: '/account/oauth-applications' });

apps/account/src/routes/account.oauth-applications.index.tsx

@@ -39,7 +39,7 @@ function OAuthApplicationsListPage() {
   const handleDelete = async () => {
     if (!pendingDelete) return;
     try {
-      await remove(pendingDelete.id);
+      await remove(pendingDelete.client_id);
       toast({ title: 'OAuth application deleted' });
       setPendingDelete(null);
       await reload();

apps/account/src/routes/oauth.consent.tsx

@@ -3,18 +3,17 @@
 /**
  * /oauth/consent — OAuth/OIDC consent screen.
  *
- * The better-auth `oidc-provider` plugin redirects unauthorized users here
- * with the following query parameters when an OAuth client requests
- * consent:
- *   - consent_code   — opaque token identifying the pending request
- *   - client_id      — the requesting application
- *   - scope          — space-separated requested scopes
+ * The `@better-auth/oauth-provider` plugin redirects the user here when an
+ * OAuth client requests consent. The full query string (including the
+ * signed `sig`/`exp` carrier) is the canonical authorization request and
+ * must be forwarded back to the consent endpoint as `oauth_query` so the
+ * server can verify and re-issue an authorization code.
  *
  * After the user accepts or denies, we POST to `/api/v1/auth/oauth2/consent`
- * which redirects the user back to the client's redirect_uri.
+ * which returns `{ redirect_uri }` pointing at the OAuth client's callback.
  */
 
-import { createFileRoute, useNavigate, useSearch } from '@tanstack/react-router';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { useEffect, useState } from 'react';
 import { Check, KeyRound, X } from 'lucide-react';
 import { useClient } from '@objectstack/client-react';
@@ -24,30 +23,31 @@ import { toast } from '@/hooks/use-toast';
 import { useSession } from '@/hooks/useSession';
 import { useOAuthConsent } from '@/hooks/useOAuthApplications';
 
-interface ConsentSearch {
-  consent_code?: string;
-  client_id?: string;
-  scope?: string;
-}
-
 export const Route = createFileRoute('/oauth/consent')({
-  validateSearch: (s: Record<string, unknown>): ConsentSearch => ({
-    consent_code: typeof s.consent_code === 'string' ? s.consent_code : undefined,
-    client_id: typeof s.client_id === 'string' ? s.client_id : undefined,
-    scope: typeof s.scope === 'string' ? s.scope : undefined,
-  }),
+  // Accept arbitrary query params — the consent page receives the full
+  // authorization-request query string and forwards it back as
+  // `oauth_query` to the consent endpoint.
+  validateSearch: (s: Record<string, unknown>) => s,
   component: OAuthConsentPage,
 });
 
 function OAuthConsentPage() {
-  const search = useSearch({ from: '/oauth/consent' });
   const navigate = useNavigate();
   const client = useClient() as any;
   const { user, loading: sessionLoading } = useSession();
   const { submit, submitting } = useOAuthConsent();
 
   const [clientInfo, setClientInfo] = useState<{ name?: string; icon?: string } | null>(null);
 
+  // Read raw query directly so we can forward it verbatim. The router's
+  // typed `useSearch` would coerce / re-serialize and risks breaking the
+  // signature on `sig=`.
+  const rawSearch = typeof window !== 'undefined' ? window.location.search : '';
+  const oauthQuery = rawSearch.startsWith('?') ? rawSearch.slice(1) : rawSearch;
+  const params = new URLSearchParams(oauthQuery);
+  const clientId = params.get('client_id') ?? undefined;
+  const scope = params.get('scope') ?? '';
+
   // If unauthenticated, bounce to login with a return-to that brings the
   // user back here once signed in.
   useEffect(() => {
@@ -60,30 +60,27 @@ function OAuthConsentPage() {
 
   // Best-effort lookup of the client app's display name + icon.
   useEffect(() => {
-    if (!search.client_id || !client?.oauth?.applications?.get) return;
+    if (!clientId || !client?.oauth?.applications?.getPublic) return;
     let cancelled = false;
-    client.oauth.applications.get(search.client_id).then(
+    client.oauth.applications.getPublic(clientId).then(
       (res: any) => {
         if (cancelled) return;
         const data = res?.data ?? res;
-        setClientInfo({ name: data?.name, icon: data?.icon });
+        setClientInfo({ name: data?.name ?? data?.client_name, icon: data?.icon ?? data?.logo_uri });
       },
       () => {},
     );
     return () => {
       cancelled = true;
     };
-  }, [client, search.client_id]);
+  }, [client, clientId]);
 
-  const scopes = (search.scope ?? '').split(/\s+/).filter(Boolean);
+  const scopes = scope.split(/\s+/).filter(Boolean);
 
   const handleDecision = async (accept: boolean) => {
     try {
-      const res: any = await submit({
-        accept,
-        ...(search.consent_code ? { consent_code: search.consent_code } : {}),
-      });
-      const redirect = res?.redirectURI ?? res?.redirect_uri ?? res?.url;
+      const res: any = await submit({ accept, oauth_query: oauthQuery });
+      const redirect = res?.redirect_uri ?? res?.redirectURI ?? res?.url;
       if (redirect) {
         window.location.href = redirect;
         return;
@@ -102,7 +99,7 @@ function OAuthConsentPage() {
     }
   };
 
-  const appName = clientInfo?.name ?? search.client_id ?? 'an application';
+  const appName = clientInfo?.name ?? clientId ?? 'an application';
 
   return (
     <div className="flex min-h-svh w-full flex-1 items-center justify-center bg-background px-4">

packages/client/src/index.ts

@@ -1001,37 +1001,44 @@ export class ObjectStackClient {
   };
 
   /**
-   * OAuth / OpenID Connect Provider — admin endpoints exposed by better-auth's
-   * `oidc-provider` plugin (when enabled on the server). Lets users register
-   * their own OAuth client applications, list them, and revoke them.
+   * OAuth / OpenID Connect Provider — admin endpoints exposed by
+   * `@better-auth/oauth-provider` (when enabled on the server). Lets users
+   * register their own OAuth client applications, list them, and revoke them.
    *
    * All endpoints are mounted under the auth route, e.g. `/api/v1/auth/oauth2/*`.
    */
   oauth = {
     applications: {
       /**
        * Register a new OAuth client application.
-       * POST /api/v1/auth/oauth2/register
+       * POST /api/v1/auth/oauth2/create-client (authenticated)
        *
        * Returns the freshly-issued `client_id` and `client_secret`.
        * The secret is only returned at creation time — store it securely.
        */
       register: async (req: {
-        client_name: string;
+        client_name?: string;
+        name?: string;
         redirect_uris: string[];
         token_endpoint_auth_method?: 'none' | 'client_secret_basic' | 'client_secret_post';
         grant_types?: string[];
         response_types?: string[];
         client_uri?: string;
         logo_uri?: string;
         scope?: string;
+        scopes?: string[];
         contacts?: string[];
         tos_uri?: string;
         policy_uri?: string;
         metadata?: Record<string, unknown>;
       }) => {
         const route = this.getRoute('auth');
-        const res = await this.fetch(`${this.baseUrl}${route}/oauth2/register`, {
+        // The new oauth-provider package exposes `/oauth2/create-client`
+        // (authenticated dynamic registration). The legacy `/oauth2/register`
+        // endpoint is now disabled by default for security and only
+        // available when the server explicitly opts in via the
+        // `allowUnauthenticatedClientRegistration` option.
+        const res = await this.fetch(`${this.baseUrl}${route}/oauth2/create-client`, {
           method: 'POST',
           body: JSON.stringify(req),
         });
@@ -1040,54 +1047,57 @@ export class ObjectStackClient {
 
       /**
        * Get a single OAuth application by its `client_id`.
-       * GET /api/v1/auth/oauth2/client/:id
+       * GET /api/v1/auth/oauth2/get-client?client_id=...
        */
       get: async (clientId: string) => {
         const route = this.getRoute('auth');
         const res = await this.fetch(
-          `${this.baseUrl}${route}/oauth2/client/${encodeURIComponent(clientId)}`,
+          `${this.baseUrl}${route}/oauth2/get-client?client_id=${encodeURIComponent(clientId)}`,
+        );
+        return res.json();
+      },
+
+      /**
+       * Get a single OAuth application's public fields (no auth required
+       * once the user has signed in). Used by the consent screen.
+       * GET /api/v1/auth/oauth2/public-client?client_id=...
+       */
+      getPublic: async (clientId: string) => {
+        const route = this.getRoute('auth');
+        const res = await this.fetch(
+          `${this.baseUrl}${route}/oauth2/public-client?client_id=${encodeURIComponent(clientId)}`,
         );
         return res.json();
       },
 
       /**
        * List OAuth applications visible to the current user.
        *
-       * better-auth doesn't expose a list endpoint yet — we query the
-       * underlying `sys_oauth_application` table via the data API. In
-       * production deployments, row-level security on this system table
-       * should restrict rows to those owned by the current user; in
-       * single-project / local mode every authenticated user sees the
-       * full list.
+       * Uses `@better-auth/oauth-provider`'s `/oauth2/get-clients` endpoint
+       * which returns clients owned by the current user (and their
+       * organization, if applicable).
        */
       list: async () => {
-        const route = this.getRoute('data');
-        const params = new URLSearchParams({ sort: '-created_at' });
-        const res = await this.fetch(
-          `${this.baseUrl}${route}/sys_oauth_application?${params.toString()}`,
-        );
+        const route = this.getRoute('auth');
+        const res = await this.fetch(`${this.baseUrl}${route}/oauth2/get-clients`);
         const data = await res.json();
-        const items =
-          data?.records ??
-          data?.items ??
-          data?.data?.records ??
-          data?.data?.items ??
-          [];
+        const items = Array.isArray(data) ? data : data?.clients ?? data?.data ?? [];
         return { applications: items as Array<Record<string, any>> };
       },
 
       /**
-       * Delete an OAuth application by its row id (not client_id).
+       * Delete an OAuth application by its `client_id`.
+       * POST /api/v1/auth/oauth2/delete-client
        *
        * Tokens and consents referencing the client cascade-delete via the
        * better-auth schema's `onDelete: cascade` foreign keys.
        */
-      delete: async (id: string) => {
-        const route = this.getRoute('data');
-        const res = await this.fetch(
-          `${this.baseUrl}${route}/sys_oauth_application/${encodeURIComponent(id)}`,
-          { method: 'DELETE' },
-        );
+      delete: async (clientId: string) => {
+        const route = this.getRoute('auth');
+        const res = await this.fetch(`${this.baseUrl}${route}/oauth2/delete-client`, {
+          method: 'POST',
+          body: JSON.stringify({ client_id: clientId }),
+        });
         return res.json();
       },
     },
@@ -1096,9 +1106,12 @@ export class ObjectStackClient {
      * Submit the user's decision to a pending consent request.
      * POST /api/v1/auth/oauth2/consent
      *
-     * Called by the consent screen after the user accepts or denies.
+     * Called by the consent screen after the user accepts or denies. The
+     * `oauth_query` is the raw query string of the consent page URL — it
+     * carries the signed authorization request that the consent endpoint
+     * verifies before issuing the authorization code.
      */
-    consent: async (req: { accept: boolean; consent_code?: string }) => {
+    consent: async (req: { accept: boolean; scope?: string; oauth_query?: string }) => {
       const route = this.getRoute('auth');
       const res = await this.fetch(`${this.baseUrl}${route}/oauth2/consent`, {
         method: 'POST',