feat(clerk-js): Link to external App page in OAuth Consent

.changeset/sad-turkeys-rhyme.md

@@ -0,0 +1,8 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Add optional `linkUrl` to `Avatar`
+
+Add optional `oAuthApplicationUrl` parameter to OAuth Consent mounting (which is used to provide a link to the OAuth App homepage).

.vscode/tasks.json

@@ -0,0 +1,13 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "dev:sandbox",
+      "path": "packages/clerk-js",
+      "problemMatcher": [],
+      "label": "Dev: Sandbox",
+      "detail": "npm: dev:sandbox - packages/clerk-js"
+    }
+  ]
+}

packages/clerk-js/sandbox/app.ts

@@ -334,6 +334,8 @@ void (async () => {
           scopes,
           oAuthApplicationName: searchParams.get('oauth-application-name'),
           redirectUrl: searchParams.get('redirect_uri'),
+          oAuthApplicationLogoUrl: searchParams.get('logo-url'),
+          oAuthApplicationUrl: searchParams.get('app-url'),
         },
       );
     },

packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx

@@ -17,7 +17,7 @@ import { common } from '@/ui/styledSystem';
 import { colors } from '@/ui/utils/colors';
 
 export function OAuthConsentInternal() {
-  const { scopes, oAuthApplicationName, oAuthApplicationLogoUrl, redirectUrl, onDeny, onAllow } =
+  const { scopes, oAuthApplicationName, oAuthApplicationLogoUrl, oAuthApplicationUrl, redirectUrl, onDeny, onAllow } =
     useOAuthConsentContext();
   const { user } = useUser();
   const { applicationName, logoImageUrl } = useEnvironment().displayConfig;
@@ -44,6 +44,7 @@ export function OAuthConsentInternal() {
               <ConnectionHeader>
                 <Avatar
                   imageUrl={oAuthApplicationLogoUrl}
+                  linkUrl={oAuthApplicationUrl}
                   size={t => t.space.$12}
                   rounded={false}
                 />
@@ -61,6 +62,7 @@ export function OAuthConsentInternal() {
                 >
                   <Avatar
                     imageUrl={oAuthApplicationLogoUrl}
+                    linkUrl={oAuthApplicationUrl}
                     size={t => t.space.$12}
                     rounded={false}
                   />

packages/clerk-js/src/ui/elements/Avatar.tsx

@@ -1,6 +1,7 @@
+import { isAbsoluteUrl } from '@clerk/shared/url';
 import React from 'react';
 
-import { Box, descriptors, Flex, Image, Text } from '../customizables';
+import { Box, descriptors, Flex, Image, Link, Text } from '../customizables';
 import type { ElementDescriptor } from '../customizables/elementDescriptors';
 import type { InternalTheme } from '../foundations';
 import type { PropsOfComponent } from '../styledSystem';
@@ -15,6 +16,11 @@ type AvatarProps = PropsOfComponent<typeof Flex> & {
   rounded?: boolean;
   boxElementDescriptor?: ElementDescriptor;
   imageElementDescriptor?: ElementDescriptor;
+  /**
+   * URL to navigate to when the avatar is clicked.
+   * If it's an absolute URL, it opens in a new tab.
+   */
+  linkUrl?: string;
 };
 
 export const Avatar = (props: AvatarProps) => {
@@ -28,6 +34,7 @@ export const Avatar = (props: AvatarProps) => {
     sx,
     boxElementDescriptor,
     imageElementDescriptor,
+    linkUrl,
   } = props;
   const [error, setError] = React.useState(false);
 
@@ -65,7 +72,16 @@ export const Avatar = (props: AvatarProps) => {
         sx,
       ]}
     >
-      {ImgOrFallback}
+      {linkUrl && linkUrl.trim() ? (
+        <Link
+          href={linkUrl}
+          isExternal={isAbsoluteUrl(linkUrl)}
+        >
+          {ImgOrFallback}
+        </Link>
+      ) : (
+        ImgOrFallback
+      )}
 
       {/* /**
        * This Box is the "shimmer" effect for the avatar.

packages/clerk-js/src/ui/primitives/Link.tsx

@@ -63,7 +63,7 @@ export const Link = (props: LinkProps): JSX.Element => {
       onClick={onClickHandler}
       href={href || ''}
       target={href && isExternal ? '_blank' : undefined}
-      rel={href && isExternal ? 'noopener' : undefined}
+      rel={href && isExternal ? 'noopener noreferrer' : undefined}
       css={applyVariants(props) as any}
     >
       {children}

packages/types/src/clerk.ts

@@ -2003,6 +2003,10 @@ export type __internal_OAuthConsentProps = {
    * Logo URL of the OAuth application.
    */
   oAuthApplicationLogoUrl?: string;
+  /**
+   * URL of the OAuth application.
+   */
+  oAuthApplicationUrl?: string;
   /**
    * Scopes requested by the OAuth application.
    */