Merge branch 'main' into caleb/otp-delay

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

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}
           />
         }
       />

account-kit/react/src/components/auth/sections/OAuth.tsx

@@ -39,9 +39,25 @@ export const OAuth = memo(({ ...config }: Props) => {
       return (
         <Button
           variant="social"
-          icon={<img src={config.logoUrl} alt={config.auth0Connection} />}
+          icon={
+            <>
+              <img
+                src={config.logoUrl}
+                alt={config.auth0Connection}
+                className="dark:hidden"
+              />
+              <img
+                // Fallback to light logo if no dark logo provided.
+                src={config.logoUrlDark ?? config.logoUrl}
+                alt={config.auth0Connection}
+                className="hidden dark:block"
+              />
+            </>
+          }
           onClick={authenticate}
-        ></Button>
+        >
+          {config.displayName}
+        </Button>
       );
     default:
       assertNever(

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

@@ -23,13 +23,15 @@ export type AuthType =
           auth0Connection?: string;
           displayName: string;
           logoUrl: string;
+          logoUrlDark?: string;
         }
       | {
           authProviderId: KnownAuthProvider;
           isCustomProvider?: false;
           auth0Connection?: never;
           displayName?: never;
           logoUrl?: never;
+          logoUrlDark?: never;
         }
     ) &
       OauthRedirectConfig);

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" && <GoogleIcon />) ||
         (provider === "facebook" && <FacebookIcon />) ||
         (provider === "auth0" && logoUrl && (
-          <img src={logoUrl} alt={auth0Connection} />
+          <>
+            <img src={logoUrl} alt={auth0Connection} className="dark:hidden" />
+            <img
+              src={logoUrlDark ?? logoUrl}
+              alt={auth0Connection}
+              className="hidden dark:block"
+            />
+          </>
         ))}
     </div>
   );

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",
             });
 

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

@@ -11,7 +11,7 @@ export const DiscordLogo = ({
     xmlns="http://www.w3.org/2000/svg"
     {...props}
   >
-    <g clip-path="url(#a)">
+    <g clipPath="url(#a)">
       <path
         d="M15.9785 0H5.35352C2.76468 0 .666016 2.09867.666016 4.6875v10.625C.666016 17.9013 2.76468 20 5.35352 20H15.9785c2.5889 0 4.6875-2.0987 4.6875-4.6875V4.6875C20.666 2.09867 18.5674 0 15.9785 0Z"
         fill="#5865F2"

site/pages/react/ui-components.mdx

@@ -149,6 +149,8 @@ type SocialAuthType = {
       auth0Connection?: string;
       // URL for the provider's logo
       logoUrl: string;
+      // URL for the provider's logo in dark mode (optional, `logoUrl` is used for both light & dark mode if not provided)
+      logoUrlDark?: string;
     }
   | {
       // For using a known authentication provider other than Auth0: "google", "facebook", "apple"