feat: custom display names for auth methods

alchemyplatform · Jan 10, 2025 · 5624fbd · 5624fbd
1 parent 920e25f
commit 5624fbd
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 1 deletion.
diff --git a/account-kit/react/src/components/auth/card/loading/oauth.tsx b/account-kit/react/src/components/auth/card/loading/oauth.tsx
@@ -48,7 +48,7 @@ export const CompletingOAuth = () => {
       </div>
 
       <h3 className="font-semibold text-lg">{`Continue with ${capitalize(
-        authStep.config.authProviderId
+        authStep.config.displayName ?? authStep.config.authProviderId
       )}`}</h3>
       <p className="text-fg-secondary text-center text-sm">
         {`Follow the steps in the pop up window to sign in with ${capitalize(

diff --git a/account-kit/react/src/components/auth/types.ts b/account-kit/react/src/components/auth/types.ts
@@ -20,12 +20,14 @@ export type AuthType =
           authProviderId: "auth0";
           isCustomProvider?: false;
           auth0Connection?: string;
+          displayName: string;
           logoUrl: string;
         }
       | {
           authProviderId: KnownAuthProvider;
           isCustomProvider?: false;
           auth0Connection?: never;
+          displayName?: never;
           logoUrl?: never;
         }
     ) &

diff --git a/examples/ui-demo/src/app/sections.ts b/examples/ui-demo/src/app/sections.ts
@@ -29,6 +29,7 @@ export function getSectionsForConfig(
           authProviderId: "auth0",
           mode: "popup",
           auth0Connection: "twitter",
+          displayName: "X",
           logoUrl: "/images/twitter.svg",
         });
       } else if (enabled) {