feat: enable discord social auth (#1281)

* 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 --------- Co-authored-by: rob chang <[email protected]> Co-authored-by: David Philipson <[email protected]> Co-authored-by: Caleb Briancesco <[email protected]>
alchemyplatform · Jan 27, 2025 · 1772da9 · 1772da9
1 parent f4e8533
commit 1772da9
Show file tree

Hide file tree

Showing 13 changed files with 255 additions and 117 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
@@ -35,7 +35,11 @@ export const CompletingOAuth = () => {
         handleTryAgain={authenticate}
         handleUseAnotherMethod={() => setAuthStep({ type: "initial" })}
         icon={
-          <OAuthConnectionFailed provider={authStep.config.authProviderId} />
+          <OAuthConnectionFailed
+            provider={authStep.config.authProviderId}
+            auth0Connection={authStep.config.auth0Connection}
+            logoUrl={authStep.config.logoUrl}
+          />
         }
       />
     );

diff --git a/account-kit/react/src/components/auth/sections/OAuth.tsx b/account-kit/react/src/components/auth/sections/OAuth.tsx
@@ -1,5 +1,9 @@
 import { memo } from "react";
-import { AppleIcon, FacebookIcon, GoogleIcon } from "../../../icons/oauth.js";
+import {
+  AppleIcon,
+  FacebookIcon,
+  GoogleIcon,
+} from "../../../icons/auth-icons/index.js";
 import { assertNever } from "../../../utils.js";
 import { Button } from "../../button.js";
 import { useOAuthVerify } from "../hooks/useOAuthVerify.js";

diff --git a/account-kit/react/src/icons/auth-icons/apple.tsx b/account-kit/react/src/icons/auth-icons/apple.tsx
@@ -0,0 +1,21 @@
+import type { SVGProps } from "react";
+
+export const AppleIcon = (
+  props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>
+) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        fill="#000"
+        d="M22.192 18.703c-.363.839-.793 1.61-1.29 2.32-.679.968-1.234 1.637-1.663 2.009-.663.61-1.374.923-2.136.94-.546 0-1.206-.155-1.973-.47-.77-.314-1.477-.47-2.124-.47-.679 0-1.406.156-2.185.47-.78.315-1.407.48-1.888.496-.73.031-1.458-.29-2.184-.966-.464-.404-1.044-1.098-1.739-2.08-.745-1.049-1.358-2.265-1.838-3.652-.514-1.497-.772-2.948-.772-4.352 0-1.608.348-2.995 1.044-4.158A6.122 6.122 0 0 1 5.63 6.58a5.88 5.88 0 0 1 2.955-.835c.58 0 1.34.18 2.285.532.943.354 1.548.533 1.813.533.199 0 .871-.21 2.01-.628 1.079-.388 1.988-.548 2.733-.485 2.02.163 3.536.96 4.545 2.393-1.806 1.094-2.699 2.627-2.681 4.593.016 1.531.572 2.806 1.663 3.817.495.47 1.048.833 1.663 1.09-.134.387-.274.758-.424 1.113ZM17.561.48c0 1.2-.439 2.321-1.313 3.358-1.054 1.234-2.33 1.946-3.714 1.834a3.742 3.742 0 0 1-.027-.455c0-1.152.501-2.386 1.392-3.394.445-.51 1.01-.935 1.696-1.273.685-.334 1.332-.518 1.94-.55.019.16.026.32.026.48Z"
+      />
+    </svg>
+  );
+};
diff --git a/account-kit/react/src/icons/auth-icons/discord.tsx b/account-kit/react/src/icons/auth-icons/discord.tsx
@@ -0,0 +1,13 @@
+import type { SVGProps } from "react";
+
+export const DiscordIcon = ({
+  fill,
+  ...props
+}: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) => (
+  <svg width="20" height="16" viewBox="0 0 20 16" fill="none" {...props}>
+    <path
+      d="M16.9419 1.60281C15.6279 1.00122 14.2407 0.574428 12.8158 0.333344C12.6208 0.681916 12.4443 1.04055 12.2872 1.40775C10.7694 1.17903 9.22584 1.17903 7.70801 1.40775C7.55079 1.04059 7.37437 0.681959 7.17946 0.333344C5.75361 0.576464 4.3655 1.00427 3.05016 1.60595C0.43887 5.4694 -0.269009 9.2369 0.0849305 12.9509C1.61417 14.0808 3.32582 14.9401 5.14548 15.4914C5.55522 14.9403 5.91778 14.3557 6.22933 13.7437C5.63759 13.5227 5.06646 13.2501 4.52255 12.9289C4.6657 12.8251 4.8057 12.7181 4.94098 12.6143C6.52364 13.3586 8.25103 13.7445 9.99996 13.7445C11.7489 13.7445 13.4763 13.3586 15.0589 12.6143C15.1958 12.726 15.3358 12.8329 15.4774 12.9289C14.9324 13.2506 14.3602 13.5238 13.7675 13.7453C14.0786 14.357 14.4412 14.9411 14.8513 15.4914C16.6725 14.9423 18.3855 14.0834 19.915 12.9525C20.3303 8.64542 19.2055 4.91254 16.9419 1.60281ZM6.67765 10.6668C5.69134 10.6668 4.87649 9.77174 4.87649 8.67059C4.87649 7.56945 5.66302 6.66651 6.6745 6.66651C7.68598 6.66651 8.49454 7.56945 8.47724 8.67059C8.45993 9.77174 7.68284 10.6668 6.67765 10.6668ZM13.3223 10.6668C12.3344 10.6668 11.5227 9.77174 11.5227 8.67059C11.5227 7.56945 12.3092 6.66651 13.3223 6.66651C14.3353 6.66651 15.1376 7.56945 15.1203 8.67059C15.103 9.77174 14.3275 10.6668 13.3223 10.6668Z"
+      fill="#5865F2"
+    />
+  </svg>
+);
diff --git a/account-kit/react/src/icons/auth-icons/facebook.tsx b/account-kit/react/src/icons/auth-icons/facebook.tsx
@@ -0,0 +1,27 @@
+import type { SVGProps } from "react";
+
+export const FacebookIcon = (
+  props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>
+) => {
+  return (
+    <svg
+      width="21"
+      height="20"
+      viewBox="0 0 21 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g>
+        <path
+          d="M8.85 19.9C4.1 19.05 0.5 14.95 0.5 10C0.5 4.5 5 0 10.5 0C16 0 20.5 4.5 20.5 10C20.5 14.95 16.9 19.05 12.15 19.9L11.6 19.45H9.4L8.85 19.9Z"
+          fill="#0062E0"
+        />
+        <path
+          d="M14.4004 12.7999L14.8504 9.9999H12.2004V8.0499C12.2004 7.2499 12.5004 6.6499 13.7004 6.6499H15.0004V4.0999C14.3004 3.9999 13.5004 3.8999 12.8004 3.8999C10.5004 3.8999 8.90039 5.2999 8.90039 7.7999V9.9999H6.40039V12.7999H8.90039V19.8499C9.45039 19.9499 10.0004 19.9999 10.5504 19.9999C11.1004 19.9999 11.6504 19.9499 12.2004 19.8499V12.7999H14.4004Z"
+          fill="white"
+        />
+      </g>
+    </svg>
+  );
+};
diff --git a/account-kit/react/src/icons/auth-icons/google.tsx b/account-kit/react/src/icons/auth-icons/google.tsx
@@ -0,0 +1,39 @@
+import type { SVGProps } from "react";
+
+export const GoogleIcon = ({
+  className,
+  ...props
+}: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={19}
+      height={20}
+      fill="none"
+      {...props}
+    >
+      <path
+        fill="#3E82F1"
+        fillRule="evenodd"
+        d="M18.801 10.21c0-.63-.055-1.257-.166-1.876H10v3.546h4.934a4.212 4.212 0 0 1-1.83 2.767v2.3h2.963C17.8 15.351 18.8 13.001 18.8 10.21h.001Z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#32A753"
+        fillRule="evenodd"
+        d="M10 19.167c2.475 0 4.55-.821 6.067-2.22l-2.963-2.301c-.82.55-1.87.875-3.104.875-2.388 0-4.409-1.612-5.13-3.78H1.809v2.379A9.167 9.167 0 0 0 10 19.167Z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#F9BB00"
+        fillRule="evenodd"
+        d="M4.871 11.742a5.412 5.412 0 0 1 0-3.483V5.884H1.808a9.181 9.181 0 0 0 0 8.234l3.063-2.376Z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#E74133"
+        d="m1.808 5.884 3.063 2.375c.721-2.167 2.742-3.78 5.13-3.78 1.346 0 2.554.464 3.504 1.371l2.63-2.63C14.546 1.743 12.471.834 10 .834a9.164 9.164 0 0 0-8.192 5.05Z"
+      />
+    </svg>
+  );
+};
diff --git a/account-kit/react/src/icons/auth-icons/index.ts b/account-kit/react/src/icons/auth-icons/index.ts
@@ -0,0 +1,6 @@
+import { DiscordIcon } from "./discord.js";
+import { FacebookIcon } from "./facebook.js";
+import { GoogleIcon } from "./google.js";
+import { AppleIcon } from "./apple.js";
+
+export { DiscordIcon, GoogleIcon, FacebookIcon, AppleIcon };
diff --git a/account-kit/react/src/icons/oauth.tsx b/account-kit/react/src/icons/oauth.tsx
@@ -1,13 +1,15 @@
 import type { KnownAuthProvider } from "@account-kit/signer";
-import type { SVGProps } from "react";
 import { Spinner } from "./spinner.js";
+import { GoogleIcon, FacebookIcon } from "./auth-icons/index.js";
 
 interface ContinueWithOAuthProps {
   provider: KnownAuthProvider;
 }
 
 interface OAuthConnectionFailedWithProps {
   provider: KnownAuthProvider;
+  logoUrl?: string;
+  auth0Connection?: string;
 }
 
 // TO DO: extend for BYO auth provider
@@ -24,6 +26,8 @@ export function ContinueWithOAuth({ provider }: ContinueWithOAuthProps) {
 // TO DO: extend for BYO auth provider
 export function OAuthConnectionFailed({
   provider,
+  logoUrl,
+  auth0Connection,
 }: OAuthConnectionFailedWithProps) {
   return (
     <div className="relative flex flex-col items-center justify-center h-12 w-12">
@@ -46,92 +50,10 @@ export function OAuthConnectionFailed({
         </svg>
       </div>
       {(provider === "google" && <GoogleIcon />) ||
-        (provider === "facebook" && <FacebookIcon />)}
+        (provider === "facebook" && <FacebookIcon />) ||
+        (provider === "auth0" && logoUrl && (
+          <img src={logoUrl} alt={auth0Connection} />
+        ))}
     </div>
   );
 }
-
-// eslint-disable-next-line jsdoc/require-jsdoc
-export const GoogleIcon = ({
-  className,
-  ...props
-}: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={19}
-      height={20}
-      fill="none"
-      {...props}
-    >
-      <path
-        fill="#3E82F1"
-        fillRule="evenodd"
-        d="M18.801 10.21c0-.63-.055-1.257-.166-1.876H10v3.546h4.934a4.212 4.212 0 0 1-1.83 2.767v2.3h2.963C17.8 15.351 18.8 13.001 18.8 10.21h.001Z"
-        clipRule="evenodd"
-      />
-      <path
-        fill="#32A753"
-        fillRule="evenodd"
-        d="M10 19.167c2.475 0 4.55-.821 6.067-2.22l-2.963-2.301c-.82.55-1.87.875-3.104.875-2.388 0-4.409-1.612-5.13-3.78H1.809v2.379A9.167 9.167 0 0 0 10 19.167Z"
-        clipRule="evenodd"
-      />
-      <path
-        fill="#F9BB00"
-        fillRule="evenodd"
-        d="M4.871 11.742a5.412 5.412 0 0 1 0-3.483V5.884H1.808a9.181 9.181 0 0 0 0 8.234l3.063-2.376Z"
-        clipRule="evenodd"
-      />
-      <path
-        fill="#E74133"
-        d="m1.808 5.884 3.063 2.375c.721-2.167 2.742-3.78 5.13-3.78 1.346 0 2.554.464 3.504 1.371l2.63-2.63C14.546 1.743 12.471.834 10 .834a9.164 9.164 0 0 0-8.192 5.05Z"
-      />
-    </svg>
-  );
-};
-
-export const FacebookIcon = (
-  props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>
-) => {
-  return (
-    <svg
-      width="21"
-      height="20"
-      viewBox="0 0 21 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g>
-        <path
-          d="M8.85 19.9C4.1 19.05 0.5 14.95 0.5 10C0.5 4.5 5 0 10.5 0C16 0 20.5 4.5 20.5 10C20.5 14.95 16.9 19.05 12.15 19.9L11.6 19.45H9.4L8.85 19.9Z"
-          fill="#0062E0"
-        />
-        <path
-          d="M14.4004 12.7999L14.8504 9.9999H12.2004V8.0499C12.2004 7.2499 12.5004 6.6499 13.7004 6.6499H15.0004V4.0999C14.3004 3.9999 13.5004 3.8999 12.8004 3.8999C10.5004 3.8999 8.90039 5.2999 8.90039 7.7999V9.9999H6.40039V12.7999H8.90039V19.8499C9.45039 19.9499 10.0004 19.9999 10.5504 19.9999C11.1004 19.9999 11.6504 19.9499 12.2004 19.8499V12.7999H14.4004Z"
-          fill="white"
-        />
-      </g>
-    </svg>
-  );
-};
-
-export const AppleIcon = (
-  props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>
-) => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={24}
-      height={24}
-      viewBox="0 0 24 24"
-      fill="none"
-      {...props}
-    >
-      <path
-        fill="#000"
-        d="M22.192 18.703c-.363.839-.793 1.61-1.29 2.32-.679.968-1.234 1.637-1.663 2.009-.663.61-1.374.923-2.136.94-.546 0-1.206-.155-1.973-.47-.77-.314-1.477-.47-2.124-.47-.679 0-1.406.156-2.185.47-.78.315-1.407.48-1.888.496-.73.031-1.458-.29-2.184-.966-.464-.404-1.044-1.098-1.739-2.08-.745-1.049-1.358-2.265-1.838-3.652-.514-1.497-.772-2.948-.772-4.352 0-1.608.348-2.995 1.044-4.158A6.122 6.122 0 0 1 5.63 6.58a5.88 5.88 0 0 1 2.955-.835c.58 0 1.34.18 2.285.532.943.354 1.548.533 1.813.533.199 0 .871-.21 2.01-.628 1.079-.388 1.988-.548 2.733-.485 2.02.163 3.536.96 4.545 2.393-1.806 1.094-2.699 2.627-2.681 4.593.016 1.531.572 2.806 1.663 3.817.495.47 1.048.833 1.663 1.09-.134.387-.274.758-.424 1.113ZM17.561.48c0 1.2-.439 2.321-1.313 3.358-1.054 1.234-2.33 1.946-3.714 1.834a3.742 3.742 0 0 1-.027-.455c0-1.152.501-2.386 1.392-3.394.445-.51 1.01-.935 1.696-1.273.685-.334 1.332-.518 1.94-.55.019.16.026.32.026.48Z"
-      />
-    </svg>
-  );
-};
diff --git a/examples/ui-demo/public/images/discord.svg b/examples/ui-demo/public/images/discord.svg
diff --git a/examples/ui-demo/src/app/config.tsx b/examples/ui-demo/src/app/config.tsx
@@ -13,7 +13,10 @@ export type Config = {
     showPasskey: boolean;
     addPasskey: boolean;
     showOAuth: boolean;
-    oAuthMethods: Record<KnownAuthProvider | "auth0" | "twitter", boolean>;
+    oAuthMethods: Record<
+      KnownAuthProvider | "auth0" | "twitter" | "discord",
+      boolean
+    >;
   };
   ui: {
     theme: "light" | "dark";
@@ -51,6 +54,7 @@ export const DEFAULT_CONFIG: Config = {
       facebook: true,
       auth0: false,
       apple: false,
+      discord: true,
       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
@@ -2,6 +2,8 @@ import { AuthType } from "@account-kit/react";
 import { KnownAuthProvider } from "@account-kit/signer";
 import { Config } from "./config";
 
+const SocialAuth0Providers = ["twitter", "discord"];
+
 export function getSectionsForConfig(
   config: Config,
   walletConnectProjectId: string
@@ -23,16 +25,33 @@ export function getSectionsForConfig(
   }
   if (showOAuth) {
     for (const [method, enabled] of Object.entries(oAuthMethods)) {
-      if (method === "twitter" && enabled) {
-        midSection.push({
-          type: "social",
-          authProviderId: "auth0",
-          mode: "popup",
-          auth0Connection: "twitter",
-          displayName: "X",
-          logoUrl: "/images/twitter.svg",
-          scope: "openid profile",
-        });
+      if (enabled && SocialAuth0Providers.includes(method)) {
+        switch (method) {
+          case "twitter":
+            midSection.push({
+              type: "social",
+              authProviderId: "auth0",
+              mode: "popup",
+              auth0Connection: "twitter",
+              displayName: "X",
+              logoUrl: "/images/twitter.svg",
+              scope: "openid profile",
+            });
+
+            break;
+          case "discord":
+            midSection.push({
+              type: "social",
+              authProviderId: "auth0",
+              mode: "popup",
+              auth0Connection: "discord",
+              displayName: "Discord",
+              logoUrl: "/images/discord.svg",
+              scope: "openid profile",
+            });
+
+            break;
+        }
       } else if (enabled) {
         midSection.push({
           type: "social",