fix(ui): OAuthConsent AuthenticatedRoutes usage (#8327)

Author: alexcarpenter

.changeset/fix-oauth-consent-redirect.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Fix OAuthConsent always redirecting to sign-in by adopting the `AuthenticatedRoutes` pattern used by other full-page components

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

@@ -10,6 +10,7 @@ import { Header } from '@/ui/elements/Header';
 import { LoadingCardContainer } from '@/ui/elements/LoadingCard';
 import { Modal } from '@/ui/elements/Modal';
 import { Alert, Textarea } from '@/ui/primitives';
+import { Route, Switch } from '@/ui/router';
 
 import { InlineAction } from './InlineAction';
 import {
@@ -94,41 +95,35 @@ function _OAuthConsent() {
 
     if (errorMessage) {
       return (
-        <Flow.Root flow='oauthConsent'>
-          <Card.Root>
-            <Card.Content>
-              <Card.Alert>{errorMessage}</Card.Alert>
-            </Card.Content>
-            <Card.Footer />
-          </Card.Root>
-        </Flow.Root>
+        <Card.Root>
+          <Card.Content>
+            <Card.Alert>{errorMessage}</Card.Alert>
+          </Card.Content>
+          <Card.Footer />
+        </Card.Root>
       );
     }
 
     if (isLoading) {
       return (
-        <Flow.Root flow='oauthConsent'>
-          <Card.Root>
-            <Card.Content>
-              <LoadingCardContainer />
-            </Card.Content>
-            <Card.Footer />
-          </Card.Root>
-        </Flow.Root>
-      );
-    }
-  }
-
-  if (ctx.enableOrgSelection && (!isMembershipsLoaded || userMemberships.isLoading)) {
-    return (
-      <Flow.Root flow='oauthConsent'>
         <Card.Root>
           <Card.Content>
             <LoadingCardContainer />
           </Card.Content>
           <Card.Footer />
         </Card.Root>
-      </Flow.Root>
+      );
+    }
+  }
+
+  if (ctx.enableOrgSelection && (!isMembershipsLoaded || userMemberships.isLoading)) {
+    return (
+      <Card.Root>
+        <Card.Content>
+          <LoadingCardContainer />
+        </Card.Content>
+        <Card.Footer />
+      </Card.Root>
     );
   }
 
@@ -155,7 +150,7 @@ function _OAuthConsent() {
   const hasOfflineAccess = scopes.some(item => item.scope === OFFLINE_ACCESS_SCOPE);
 
   return (
-    <Flow.Root flow='oauthConsent'>
+    <>
       <form
         method='POST'
         action={actionUrl}
@@ -328,7 +323,7 @@ function _OAuthConsent() {
         redirectUri={redirectUrl}
         oauthApplicationName={oauthApplicationName}
       />
-    </Flow.Root>
+    </>
   );
 }
 
@@ -373,4 +368,20 @@ function RedirectUriModal({ onOpen, onClose, isOpen, redirectUri, oauthApplicati
   );
 }
 
-export const OAuthConsent = withCoreUserGuard(withCardStateProvider(_OAuthConsent));
+const AuthenticatedRoutes = withCoreUserGuard(withCardStateProvider(_OAuthConsent));
+
+const OAuthConsentInternal = () => {
+  return (
+    <Flow.Root flow='oauthConsent'>
+      <Flow.Part>
+        <Switch>
+          <Route>
+            <AuthenticatedRoutes />
+          </Route>
+        </Switch>
+      </Flow.Part>
+    </Flow.Root>
+  );
+};
+
+export const OAuthConsent = OAuthConsentInternal;

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

@@ -181,9 +181,9 @@ describe('OAuthConsent', () => {
     const getConsentInfo = vi.fn().mockResolvedValue(fakeConsentInfo);
     mockOAuthApplication(fixtures.clerk, { getConsentInfo });
 
-    const { container } = render(<OAuthConsent />, { wrapper });
+    const { queryByText } = render(<OAuthConsent />, { wrapper });
 
-    expect(container.firstChild).toBeNull();
+    expect(queryByText('Clerk CLI')).toBeNull();
     expect(getConsentInfo).not.toHaveBeenCalled();
   });