From c61f5f533d63f10add7bfbd4bff4861099fe74a8 Mon Sep 17 00:00:00 2001 From: archit2407 Date: Mon, 27 Jan 2025 12:43:29 -0500 Subject: [PATCH 1/2] chore: add archit2407 to CODEOWNERS (#1297) * feat: enable twitter social auth * feat: custom display names for auth methods * feat(demo): display nickname if email unavailable * feat: adding discord as an option for social auth in UI * feat: adding discord logo to auth flow * feat: adding discord as part of auth0 auth * fix: removing un-necessary useEffect * chore: add archit to CODEOWNERS --------- Co-authored-by: rob chang Co-authored-by: David Philipson Co-authored-by: Caleb Briancesco Co-authored-by: Caleb Briancesco --- CODEOWNERS | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CODEOWNERS b/CODEOWNERS index 2409b1cf48..289977f5b2 100644 --- a/CODEOWNERS +++ b/CODEOWNERS @@ -1 +1 @@ -* @moldy530 @rthomare @dancoombs @mokok123 @dphilipson @linnall @adamegyed @howydev @zer0dot @jaypaik @blu-j @noam-alchemy @jakehobbs +* @moldy530 @rthomare @dancoombs @mokok123 @dphilipson @linnall @adamegyed @howydev @zer0dot @jaypaik @blu-j @noam-alchemy @jakehobbs @archit2407 From 80a0132916cd1c89c8c622f5dfafca0b7a1a9508 Mon Sep 17 00:00:00 2001 From: jakehobbs Date: Mon, 27 Jan 2025 10:55:51 -0800 Subject: [PATCH 2/2] fix: add logoUrlDark for auth0 provider logos (#1298) --- .../components/auth/card/loading/oauth.tsx | 1 + .../src/components/auth/sections/OAuth.tsx | 20 +++++++++++++++++-- .../react/src/components/auth/types.ts | 2 ++ account-kit/react/src/icons/oauth.tsx | 11 +++++++++- .../ui-demo/public/images/twitter-dark.svg | 3 +++ examples/ui-demo/src/app/sections.ts | 1 + .../ui-demo/src/components/icons/discord.tsx | 2 +- site/pages/react/ui-components.mdx | 2 ++ 8 files changed, 38 insertions(+), 4 deletions(-) create mode 100644 examples/ui-demo/public/images/twitter-dark.svg 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 6572ad38d4..c87ee2684b 100644 --- a/account-kit/react/src/components/auth/card/loading/oauth.tsx +++ b/account-kit/react/src/components/auth/card/loading/oauth.tsx @@ -39,6 +39,7 @@ export const CompletingOAuth = () => { provider={authStep.config.authProviderId} auth0Connection={authStep.config.auth0Connection} logoUrl={authStep.config.logoUrl} + logoUrlDark={authStep.config.logoUrlDark} /> } /> diff --git a/account-kit/react/src/components/auth/sections/OAuth.tsx b/account-kit/react/src/components/auth/sections/OAuth.tsx index ec3a393ccf..38c410e969 100644 --- a/account-kit/react/src/components/auth/sections/OAuth.tsx +++ b/account-kit/react/src/components/auth/sections/OAuth.tsx @@ -39,9 +39,25 @@ export const OAuth = memo(({ ...config }: Props) => { return ( + > + {config.displayName} + ); default: assertNever( diff --git a/account-kit/react/src/components/auth/types.ts b/account-kit/react/src/components/auth/types.ts index e00c8d2bb8..12aa08a474 100644 --- a/account-kit/react/src/components/auth/types.ts +++ b/account-kit/react/src/components/auth/types.ts @@ -23,6 +23,7 @@ export type AuthType = auth0Connection?: string; displayName: string; logoUrl: string; + logoUrlDark?: string; } | { authProviderId: KnownAuthProvider; @@ -30,6 +31,7 @@ export type AuthType = auth0Connection?: never; displayName?: never; logoUrl?: never; + logoUrlDark?: never; } ) & OauthRedirectConfig); diff --git a/account-kit/react/src/icons/oauth.tsx b/account-kit/react/src/icons/oauth.tsx index 31fa95e33c..663592cadb 100644 --- a/account-kit/react/src/icons/oauth.tsx +++ b/account-kit/react/src/icons/oauth.tsx @@ -9,6 +9,7 @@ interface ContinueWithOAuthProps { interface OAuthConnectionFailedWithProps { provider: KnownAuthProvider; logoUrl?: string; + logoUrlDark?: string; auth0Connection?: string; } @@ -27,6 +28,7 @@ export function ContinueWithOAuth({ provider }: ContinueWithOAuthProps) { export function OAuthConnectionFailed({ provider, logoUrl, + logoUrlDark, auth0Connection, }: OAuthConnectionFailedWithProps) { return ( @@ -52,7 +54,14 @@ export function OAuthConnectionFailed({ {(provider === "google" && ) || (provider === "facebook" && ) || (provider === "auth0" && logoUrl && ( - {auth0Connection} + <> + {auth0Connection} + {auth0Connection} + ))} ); diff --git a/examples/ui-demo/public/images/twitter-dark.svg b/examples/ui-demo/public/images/twitter-dark.svg new file mode 100644 index 0000000000..7b105ab274 --- /dev/null +++ b/examples/ui-demo/public/images/twitter-dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/examples/ui-demo/src/app/sections.ts b/examples/ui-demo/src/app/sections.ts index 6a46641192..a0713c640f 100644 --- a/examples/ui-demo/src/app/sections.ts +++ b/examples/ui-demo/src/app/sections.ts @@ -35,6 +35,7 @@ export function getSectionsForConfig( auth0Connection: "twitter", displayName: "X", logoUrl: "/images/twitter.svg", + logoUrlDark: "/images/twitter-dark.svg", scope: "openid profile", }); diff --git a/examples/ui-demo/src/components/icons/discord.tsx b/examples/ui-demo/src/components/icons/discord.tsx index f6b8b0111c..e768cd9882 100644 --- a/examples/ui-demo/src/components/icons/discord.tsx +++ b/examples/ui-demo/src/components/icons/discord.tsx @@ -11,7 +11,7 @@ export const DiscordLogo = ({ xmlns="http://www.w3.org/2000/svg" {...props} > - +