Do not display the client_name of untrusted clients (#2847)

* Do not display the client_name of untrusted clients

* do not show client id of trusted clients

.changeset/wicked-items-peel.md

@@ -0,0 +1,5 @@
+---
+"@atproto/oauth-provider": patch
+---
+
+Do not display the client_name of untrusted clients

packages/oauth/oauth-provider/src/assets/app/components/accept-form.tsx

@@ -77,8 +77,12 @@ export function AcceptForm({
         </div>
       )}
       <p>
-        <ClientName clientId={clientId} clientMetadata={clientMetadata} /> is
-        asking for permission to access your account (
+        <ClientName
+          clientId={clientId}
+          clientMetadata={clientMetadata}
+          clientTrusted={clientTrusted}
+        />{' '}
+        is asking for permission to access your account (
         <AccountIdentifier account={account} />
         ).
       </p>

packages/oauth/oauth-provider/src/assets/app/components/client-name.tsx

@@ -10,29 +10,28 @@ import { UrlViewer } from './url-viewer'
 export type ClientNameProps = {
   clientId: string
   clientMetadata: OAuthClientMetadata
+  clientTrusted: boolean
+  loopbackClientName?: string
 } & HTMLAttributes<Element>
 
 export function ClientName({
   clientId,
   clientMetadata,
+  clientTrusted,
+  loopbackClientName = 'An application on your device',
   ...attrs
 }: ClientNameProps) {
+  if (clientTrusted && clientMetadata.client_name) {
+    return <span {...attrs}>{clientMetadata.client_name}</span>
+  }
+
   if (isOAuthClientIdLoopback(clientId)) {
-    return <span {...attrs}>An application on your device</span>
+    return <span {...attrs}>{loopbackClientName}</span>
   }
 
   if (isOAuthClientIdDiscoverable(clientId)) {
-    if (clientMetadata.client_name) {
-      return (
-        <span {...attrs}>
-          {clientMetadata.client_name} (
-          <UrlViewer url={clientId} path />)
-        </span>
-      )
-    }
-
     return <UrlViewer {...attrs} url={clientId} path />
   }
 
-  return <span {...attrs}>{clientMetadata.client_name || clientId}</span>
+  return <span {...attrs}>{clientId}</span>
 }