From 2cd20ea27c209699b0b1394c0e2537d2b977db9b Mon Sep 17 00:00:00 2001 From: rob chang Date: Tue, 17 Dec 2024 16:06:37 -0500 Subject: [PATCH 1/4] feat: enable twitter social auth --- examples/ui-demo/public/images/twitter.svg | 3 +++ examples/ui-demo/src/app/config.tsx | 3 ++- examples/ui-demo/src/app/sections.ts | 10 +++++++- .../configuration/Authentication.tsx | 23 ++++++++++++++++++- .../ui-demo/src/components/icons/twitter.tsx | 14 +++++++++++ .../UserConnectionAvatar.tsx | 2 +- 6 files changed, 51 insertions(+), 4 deletions(-) create mode 100644 examples/ui-demo/public/images/twitter.svg create mode 100644 examples/ui-demo/src/components/icons/twitter.tsx 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 @@ + + + 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; + oAuthMethods: Record; }; 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 (
@@ -125,6 +141,11 @@ export const Authentication = ({ className }: { className?: string }) => { icon={} onClick={setAddFacebookAuth} /> + } + onClick={setAddTwitterAuth} + /> { 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) => ( + + + +); 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) ) : ( - {user.email} + {user.email ?? "User"} )} From e892ac57e6b178fbe1f171ee57ede301b53f9b02 Mon Sep 17 00:00:00 2001 From: David Philipson Date: Fri, 10 Jan 2025 14:35:14 -0800 Subject: [PATCH 2/4] feat: custom display names for auth methods --- .../src/components/auth/card/loading/oauth.tsx | 17 +++++++---------- account-kit/react/src/components/auth/types.ts | 9 +++++++++ examples/ui-demo/src/app/sections.ts | 1 + 3 files changed, 17 insertions(+), 10 deletions(-) diff --git a/account-kit/react/src/components/auth/card/loading/oauth.tsx b/account-kit/react/src/components/auth/card/loading/oauth.tsx index 689901d7e5..370d763b69 100644 --- a/account-kit/react/src/components/auth/card/loading/oauth.tsx +++ b/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 ( setAuthStep({ type: "initial" })} @@ -41,19 +41,16 @@ export const CompletingOAuth = () => { ); } + const providerDisplayName = getSocialProviderDisplayName(authStep.config); return (
-

{`Continue with ${capitalize( - authStep.config.authProviderId - )}`}

+

{`Continue with ${providerDisplayName}`}

- {`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}`}

); diff --git a/account-kit/react/src/components/auth/types.ts b/account-kit/react/src/components/auth/types.ts index df92307c23..e00c8d2bb8 100644 --- a/account-kit/react/src/components/auth/types.ts +++ b/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 +): string { + return authType.displayName ?? capitalize(authType.authProviderId); +} diff --git a/examples/ui-demo/src/app/sections.ts b/examples/ui-demo/src/app/sections.ts index 6b2533526a..2c2d038605 100644 --- 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) { From d77c0a76b6819b2d33a8361b0e5efdec9bdc60e3 Mon Sep 17 00:00:00 2001 From: David Philipson Date: Fri, 10 Jan 2025 15:08:10 -0800 Subject: [PATCH 3/4] feat(demo): display nickname if email unavailable --- examples/ui-demo/src/app/page.tsx | 10 +++++++++- examples/ui-demo/src/app/sections.ts | 1 + .../user-connection-avatar/UserConnectionAvatar.tsx | 2 +- 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/examples/ui-demo/src/app/page.tsx b/examples/ui-demo/src/app/page.tsx index 0a8b799485..80fb908040 100644 --- a/examples/ui-demo/src/app/page.tsx +++ b/examples/ui-demo/src/app/page.tsx @@ -15,7 +15,7 @@ import { Metrics } from "@/metrics"; import { useTheme } from "@/state/useTheme"; import { useUser } from "@account-kit/react"; import { Inter, Public_Sans } from "next/font/google"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import { AuthCardWrapper } from "../components/preview/AuthCardWrapper"; import { CodePreview } from "../components/preview/CodePreview"; import { CodePreviewSwitch } from "../components/shared/CodePreviewSwitch"; @@ -37,6 +37,14 @@ export default function Home() { const theme = useTheme(); const isEOAUser = user?.type === "eoa"; + useEffect(() => { + const f = (event: MessageEvent) => { + console.log("Received message", event.data); + }; + window.addEventListener("message", f); + return () => window.removeEventListener("message", f); + }, []); + return (
- {user.email ?? "User"} + {user.email ?? (user.claims?.nickname as string) ?? "User"} )} From eaa055389a18ac7893d125be41ddd4df54b0fe3d Mon Sep 17 00:00:00 2001 From: rob chang Date: Thu, 23 Jan 2025 16:43:24 -0500 Subject: [PATCH 4/4] fix: remove console.log --- examples/ui-demo/src/app/page.tsx | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/examples/ui-demo/src/app/page.tsx b/examples/ui-demo/src/app/page.tsx index 80fb908040..0a8b799485 100644 --- a/examples/ui-demo/src/app/page.tsx +++ b/examples/ui-demo/src/app/page.tsx @@ -15,7 +15,7 @@ import { Metrics } from "@/metrics"; import { useTheme } from "@/state/useTheme"; import { useUser } from "@account-kit/react"; import { Inter, Public_Sans } from "next/font/google"; -import { useEffect, useState } from "react"; +import { useState } from "react"; import { AuthCardWrapper } from "../components/preview/AuthCardWrapper"; import { CodePreview } from "../components/preview/CodePreview"; import { CodePreviewSwitch } from "../components/shared/CodePreviewSwitch"; @@ -37,14 +37,6 @@ export default function Home() { const theme = useTheme(); const isEOAUser = user?.type === "eoa"; - useEffect(() => { - const f = (event: MessageEvent) => { - console.log("Received message", event.data); - }; - window.addEventListener("message", f); - return () => window.removeEventListener("message", f); - }, []); - return (