feat(ui): show error message when client_id or redirect_uri is missing in OAuthConsent

Author: wobsoriano

packages/ui/src/components/OAuthConsent/OAuthConsent.tsx

@@ -27,7 +27,7 @@ function _OAuthConsent() {
 
   // Public path: fetch via hook. Falls back to URL when context did not provide the data.
   const fromUrl = readOAuthConsentFromSearch();
-  const { data } = useOAuthConsent({
+  const { data, error: hookError } = useOAuthConsent({
     oauthClientId: ctx.oauthClientId ?? fromUrl.oauthClientId,
     scope: ctx.scope ?? fromUrl.scope,
   });
@@ -48,6 +48,35 @@ function _OAuthConsent() {
 
   const hasContextCallbacks = Boolean(ctx.onAllow || ctx.onDeny);
 
+  // Error states only apply to the public flow. The accounts portal path
+  // provides everything via context, so these checks are skipped.
+  const isPublicFlow = !hasContextCallbacks;
+  if (isPublicFlow) {
+    const oauthClientId = ctx.oauthClientId ?? fromUrl.oauthClientId;
+    const errorMessage = !oauthClientId
+      ? 'Authorization failed: the client ID is missing. Please ensure your application is properly configured.'
+      : !redirectUrl
+        ? 'Authorization failed: the redirect URI is missing.'
+        : hookError
+          ? hookError.message || 'Failed to load consent information.'
+          : null;
+
+    if (errorMessage) {
+      return (
+        <Flow.Root flow='oauthConsent'>
+          <Card.Root>
+            <Card.Content>
+              <Alert colorScheme='danger'>
+                <Text variant='caption'>{errorMessage}</Text>
+              </Alert>
+            </Card.Content>
+            <Card.Footer />
+          </Card.Root>
+        </Flow.Root>
+      );
+    }
+  }
+
   const actionUrl = (() => {
     const url = new URL(`https://${clerk.frontendApi}/v1/internal/oauth-consent`);
     if (clerk.session?.id) {

packages/ui/src/components/OAuthConsent/__tests__/OAuthConsent.spec.tsx

@@ -39,8 +39,8 @@ describe('OAuthConsent', () => {
       writable: true,
       value: {
         ...originalLocation,
-        search: '?client_id=client_test',
-        href: 'https://app.example/?client_id=client_test',
+        search: '?client_id=client_test&redirect_uri=https%3A%2F%2Fapp.example%2Fcallback',
+        href: 'https://app.example/?client_id=client_test&redirect_uri=https%3A%2F%2Fapp.example%2Fcallback',
       },
     });
   });
@@ -237,4 +237,74 @@ describe('OAuthConsent', () => {
     getByText('Allow').click();
     expect(onAllowSpy).toHaveBeenCalledTimes(1);
   });
+
+  it('shows missing client_id error in the public flow', async () => {
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      writable: true,
+      value: {
+        ...window.location,
+        search: '',
+        href: 'https://app.example/',
+      },
+    });
+
+    const { wrapper, fixtures, props } = await createFixtures(f => {
+      f.withUser({ email_addresses: ['jane@example.com'] });
+    });
+
+    mockOAuthApplication(fixtures.clerk, { getConsentInfo: vi.fn().mockResolvedValue(fakeConsentInfo) });
+
+    props.setProps({ componentName: 'OAuthConsent' } as any);
+
+    const { getByText } = render(<OAuthConsent />, { wrapper });
+
+    await waitFor(() => {
+      expect(getByText(/client ID is missing/i)).toBeVisible();
+    });
+  });
+
+  it('shows missing redirect_uri error in the public flow', async () => {
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      writable: true,
+      value: {
+        ...window.location,
+        search: '?client_id=client_test',
+        href: 'https://app.example/?client_id=client_test',
+      },
+    });
+
+    const { wrapper, fixtures, props } = await createFixtures(f => {
+      f.withUser({ email_addresses: ['jane@example.com'] });
+    });
+
+    mockOAuthApplication(fixtures.clerk, { getConsentInfo: vi.fn().mockResolvedValue(fakeConsentInfo) });
+
+    props.setProps({ componentName: 'OAuthConsent' } as any);
+
+    const { getByText } = render(<OAuthConsent />, { wrapper });
+
+    await waitFor(() => {
+      expect(getByText(/redirect URI is missing/i)).toBeVisible();
+    });
+  });
+
+  it('shows error message when the consent fetch fails in the public flow', async () => {
+    const { wrapper, fixtures, props } = await createFixtures(f => {
+      f.withUser({ email_addresses: ['jane@example.com'] });
+    });
+
+    mockOAuthApplication(fixtures.clerk, {
+      getConsentInfo: vi.fn().mockRejectedValue(new Error('Invalid OAuth client')),
+    });
+
+    props.setProps({ componentName: 'OAuthConsent' } as any);
+
+    const { getByText } = render(<OAuthConsent />, { wrapper });
+
+    await waitFor(() => {
+      expect(getByText(/Invalid OAuth client/i)).toBeVisible();
+    });
+  });
 });