feat: enable twitter social auth

account-kit/react/src/components/auth/card/loading/oauth.tsx

@@ -5,11 +5,11 @@ import {
   ContinueWithOAuth,
   OAuthConnectionFailed,
 } from "../../../../icons/oauth.js";
-import { capitalize } from "../../../../utils.js";
 import { useAuthContext } from "../../context.js";
 import { useOAuthVerify } from "../../hooks/useOAuthVerify.js";
 import { ConnectionError } from "../error/connection-error.js";
 import { ls } from "../../../../strings.js";
+import { getSocialProviderDisplayName } from "../../types.js";
 
 export const CompletingOAuth = () => {
   const { isConnected } = useSignerStatus();
@@ -28,9 +28,9 @@ export const CompletingOAuth = () => {
   if (authStep.error && !oauthWasCancelled) {
     return (
       <ConnectionError
-        headerText={`${ls.error.connection.oauthTitle} ${capitalize(
-          authStep.config.authProviderId
-        )}`}
+        headerText={`${
+          ls.error.connection.oauthTitle
+        } ${getSocialProviderDisplayName(authStep.config)}`}
         bodyText={ls.error.connection.oauthBody}
         handleTryAgain={authenticate}
         handleUseAnotherMethod={() => setAuthStep({ type: "initial" })}
@@ -41,19 +41,16 @@ export const CompletingOAuth = () => {
     );
   }
 
+  const providerDisplayName = getSocialProviderDisplayName(authStep.config);
   return (
     <div className="flex flex-col gap-5 items-center">
       <div className="flex flex-col items-center justify-center">
         <ContinueWithOAuth provider={authStep.config.authProviderId} />
       </div>
 
-      <h3 className="font-semibold text-lg">{`Continue with ${capitalize(
-        authStep.config.authProviderId
-      )}`}</h3>
+      <h3 className="font-semibold text-lg">{`Continue with ${providerDisplayName}`}</h3>
       <p className="text-fg-secondary text-center text-sm">
-        {`Follow the steps in the pop up window to sign in with ${capitalize(
-          authStep.config.authProviderId
-        )}`}
+        {`Follow the steps in the pop up window to sign in with ${providerDisplayName}`}
       </p>
     </div>
   );

account-kit/react/src/components/auth/types.ts

@@ -3,6 +3,7 @@ import type {
   OauthRedirectConfig,
 } from "@account-kit/signer";
 import type { WalletConnectParameters } from "wagmi/connectors";
+import { capitalize } from "../../utils.js";
 
 export type AuthType =
   | {
@@ -20,13 +21,21 @@ export type AuthType =
           authProviderId: "auth0";
           isCustomProvider?: false;
           auth0Connection?: string;
+          displayName: string;
           logoUrl: string;
         }
       | {
           authProviderId: KnownAuthProvider;
           isCustomProvider?: false;
           auth0Connection?: never;
+          displayName?: never;
           logoUrl?: never;
         }
     ) &
       OauthRedirectConfig);
+
+export function getSocialProviderDisplayName(
+  authType: Extract<AuthType, { type: "social" }>
+): string {
+  return authType.displayName ?? capitalize(authType.authProviderId);
+}

examples/ui-demo/src/app/config.tsx

@@ -13,7 +13,7 @@ export type Config = {
     showPasskey: boolean;
     addPasskey: boolean;
     showOAuth: boolean;
-    oAuthMethods: Record<KnownAuthProvider | "auth0", boolean>;
+    oAuthMethods: Record<KnownAuthProvider | "auth0" | "twitter", boolean>;
   };
   ui: {
     theme: "light" | "dark";
@@ -51,6 +51,7 @@ export const DEFAULT_CONFIG: Config = {
       facebook: true,
       auth0: false,
       apple: false,
+      twitter: true,
       // TO DO: extend for BYO auth provider
     },
   },

examples/ui-demo/src/app/sections.ts

@@ -23,7 +23,17 @@ export function getSectionsForConfig(
   }
   if (showOAuth) {
     for (const [method, enabled] of Object.entries(oAuthMethods)) {
-      if (enabled) {
+      if (method === "twitter" && enabled) {
+        midSection.push({
+          type: "social",
+          authProviderId: "auth0",
+          mode: "popup",
+          auth0Connection: "twitter",
+          displayName: "X",
+          logoUrl: "/images/twitter.svg",
+          scope: "openid profile",
+        });
+      } else if (enabled) {
         midSection.push({
           type: "social",
           authProviderId: method as KnownAuthProvider, // TODO: extend for BYO auth provider

examples/ui-demo/src/components/configuration/Authentication.tsx

@@ -8,6 +8,7 @@ import { GoogleIcon } from "../icons/google";
 import { LockIcon } from "../icons/lock";
 import { MailIcon } from "../icons/mail";
 import { SocialIcon } from "../icons/social";
+import { TwitterIcon } from "../icons/twitter";
 import { WalletIcon } from "../icons/wallet";
 import ExternalLink from "../shared/ExternalLink";
 import { Switch } from "../ui/switch";
@@ -18,7 +19,6 @@ export const Authentication = ({ className }: { className?: string }) => {
     auth,
     setAuth,
   }));
-
   const setEmailAuth = (active: boolean) => {
     setAuth({ showEmail: active });
     Metrics.trackEvent({
@@ -94,6 +94,22 @@ export const Authentication = ({ className }: { className?: string }) => {
     });
   };
 
+  const setAddTwitterAuth = () => {
+    setAuth({
+      oAuthMethods: {
+        ...auth.oAuthMethods,
+        twitter: !auth.oAuthMethods.twitter,
+      },
+    });
+    Metrics.trackEvent({
+      name: "authentication_toggled",
+      data: {
+        auth_type: "oauth_twitter",
+        enabled: !auth.oAuthMethods.twitter,
+      },
+    });
+  };
+
   return (
     <div className={cn("flex flex-col gap-5", className)}>
       <div className="flex flex-row gap-2 items-center">
@@ -125,6 +141,11 @@ export const Authentication = ({ className }: { className?: string }) => {
                   icon={<FacebookIcon />}
                   onClick={setAddFacebookAuth}
                 />
+                <OAuthMethod
+                  active={auth.oAuthMethods.twitter}
+                  icon={<TwitterIcon />}
+                  onClick={setAddTwitterAuth}
+                />
                 <ExternalLink
                   href={links.auth0}
                   onClick={() => {

examples/ui-demo/src/components/icons/twitter.tsx

@@ -0,0 +1,14 @@
+export const TwitterIcon = ({ ...props }: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    width="15"
+    height="15"
+    viewBox="0 0 15 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M9.08318 6.33193L14.2436 0.333313H13.0208L8.53995 5.54183L4.96112 0.333313H0.833374L6.24526 8.20951L0.833374 14.5H2.05631L6.78818 8.99961L10.5677 14.5H14.6954L9.08288 6.33193H9.08318ZM7.4082 8.2789L6.85987 7.49461L2.49695 1.25392H4.3753L7.89623 6.29036L8.44456 7.07465L13.0213 13.6212H11.143L7.4082 8.2792V8.2789Z"
+      fill="black"
+    />
+  </svg>
+);

examples/ui-demo/src/components/shared/user-connection-avatar/UserConnectionAvatar.tsx

@@ -67,7 +67,7 @@ const UserConnectionAvatar = ({
               truncateAddress(user.address)
             ) : (
               <span className="block w-full overflow-hidden text-ellipsis">
-                {user.email}
+                {user.email ?? (user.claims?.nickname as string) ?? "User"}
               </span>
             )}
           </h3>