diff --git a/examples/ui-demo/public/images/twitter.svg b/examples/ui-demo/public/images/twitter.svg
new file mode 100644
index 0000000000..28b3b32b32
--- /dev/null
+++ b/examples/ui-demo/public/images/twitter.svg
@@ -0,0 +1,3 @@
+<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>
diff --git a/examples/ui-demo/src/app/config.tsx b/examples/ui-demo/src/app/config.tsx
index d827762cf8..8ad9b9046b 100644
--- a/examples/ui-demo/src/app/config.tsx
+++ b/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
     },
   },
diff --git a/examples/ui-demo/src/app/sections.ts b/examples/ui-demo/src/app/sections.ts
index c8a05f197a..6b2533526a 100644
--- a/examples/ui-demo/src/app/sections.ts
+++ b/examples/ui-demo/src/app/sections.ts
@@ -23,7 +23,15 @@ 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",
+          logoUrl: "/images/twitter.svg",
+        });
+      } else if (enabled) {
         midSection.push({
           type: "social",
           authProviderId: method as KnownAuthProvider, // TODO: extend for BYO auth provider
diff --git a/examples/ui-demo/src/components/configuration/Authentication.tsx b/examples/ui-demo/src/components/configuration/Authentication.tsx
index c3b9bab4b1..eefea16041 100644
--- a/examples/ui-demo/src/components/configuration/Authentication.tsx
+++ b/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={() => {
diff --git a/examples/ui-demo/src/components/icons/twitter.tsx b/examples/ui-demo/src/components/icons/twitter.tsx
new file mode 100644
index 0000000000..06b7a7766a
--- /dev/null
+++ b/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>
+);
diff --git a/examples/ui-demo/src/components/shared/user-connection-avatar/UserConnectionAvatar.tsx b/examples/ui-demo/src/components/shared/user-connection-avatar/UserConnectionAvatar.tsx
index 25bd630118..8c4a7cd8fa 100644
--- a/examples/ui-demo/src/components/shared/user-connection-avatar/UserConnectionAvatar.tsx
+++ b/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"}
               </span>
             )}
           </h3>