Add Epic Games as new auth provider (#8343)

Author: 0xFirekeeper

.changeset/beige-candles-happen.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Added Epic Games Authentication

apps/dashboard/src/@/api/team/ecosystems.ts

@@ -21,7 +21,8 @@ export type AuthOption =
   | "steam"
   | "apple"
   | "coinbase"
-  | "line";
+  | "line"
+  | "epic";
 
 export type Ecosystem = {
   name: string;

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/auth-options-form.client.tsx

@@ -58,6 +58,7 @@ const authOptions = [
   "apple",
   "coinbase",
   "line",
+  "epic",
 ] as const satisfies AuthOption[];
 
 type AuthOptionsFormData = {

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/analytics/chart/InAppWalletUsersChartCard.stories.tsx

@@ -87,6 +87,7 @@ const authMethodsToPickFrom: InAppWalletAuth[] = [
   "line",
   "x",
   "tiktok",
+  "epic",
   "coinbase",
   "farcaster",
   "telegram",

apps/playground-web/src/app/wallets/sign-in/components/InAppWalletFormGroup.tsx

@@ -20,6 +20,7 @@ const allInAppWalletLoginMethods: InAppWalletAuth[] = [
   "line",
   "x",
   "tiktok",
+  "epic",
   "facebook",
   "apple",
   "coinbase",

apps/portal/src/components/Document/AuthList.tsx

@@ -15,6 +15,7 @@ const authOptions: InAppWalletAuth[] = [
   "facebook",
   "x",
   "tiktok",
+  "epic",
   "discord",
   "telegram",
   "twitch",

apps/portal/src/components/Document/AuthMethodsTabs.tsx

@@ -29,6 +29,9 @@ type AuthMethod =
   | "telegram"
   | "farcaster"
   | "github"
+  | "line"
+  | "tiktok"
+  | "epic"
   | "passkey"
   | "wallet"
   | "guest"
@@ -55,6 +58,9 @@ const authMethods: { id: AuthMethod; label: string; description: string }[] = [
   { id: "telegram", label: "Telegram", description: "Telegram OAuth" },
   { id: "farcaster", label: "Farcaster", description: "Farcaster OAuth" },
   { id: "github", label: "GitHub", description: "GitHub OAuth" },
+  { id: "line", label: "Line", description: "Line OAuth" },
+  { id: "tiktok", label: "TikTok", description: "TikTok OAuth" },
+  { id: "epic", label: "Epic Games", description: "Epic Games OAuth" },
   { id: "passkey", label: "Passkey", description: "WebAuthn passkey" },
   {
     id: "wallet",
@@ -244,6 +250,9 @@ const account = await wallet.connect({
     case "telegram":
     case "farcaster":
     case "github":
+    case "line":
+    case "tiktok":
+    case "epic":
       return (
         baseSetup +
         `// ${authMethod.charAt(0).toUpperCase() + authMethod.slice(1)} OAuth
@@ -561,6 +570,9 @@ function PrebuiltUIExample() {
     case "telegram":
     case "farcaster":
     case "github":
+    case "line":
+    case "tiktok":
+    case "epic":
       return (
         baseSetup +
         `      await wallet.connect({\n        client,\n        strategy: "${authMethod}",\n      });\n` +
@@ -639,7 +651,10 @@ var address = await wallet.LoginWithOtp("123456");`
     case "x":
     case "telegram":
     case "farcaster":
-    case "github": {
+    case "github":
+    case "line":
+    case "tiktok":
+    case "epic": {
       const providerMap: Record<string, string> = {
         google: "Google",
         apple: "Apple",
@@ -649,6 +664,9 @@ var address = await wallet.LoginWithOtp("123456");`
         telegram: "Telegram",
         farcaster: "Farcaster",
         github: "Github",
+        line: "Line",
+        tiktok: "TikTok",
+        epic: "Epic",
       };
       return (
         baseSetup +
@@ -746,7 +764,10 @@ var wallet = await ThirdwebManager.Instance.ConnectWallet(options);`
     case "x":
     case "telegram":
     case "farcaster":
-    case "github": {
+    case "github":
+    case "line":
+    case "tiktok":
+    case "epic": {
       const providerMap: Record<string, string> = {
         google: "Google",
         apple: "Apple",
@@ -756,6 +777,9 @@ var wallet = await ThirdwebManager.Instance.ConnectWallet(options);`
         telegram: "Telegram",
         farcaster: "Farcaster",
         github: "Github",
+        line: "Line",
+        tiktok: "TikTok",
+        epic: "Epic",
       };
       return (
         baseSetup +

packages/thirdweb/src/react/core/utils/walletIcon.test.ts

@@ -55,6 +55,10 @@ describe("walletIcon", () => {
     expect(getSocialIcon("tiktok")).toBe(socialIcons.tiktok);
   });
 
+  it("should return epic icon", () => {
+    expect(getSocialIcon("epic")).toBe(socialIcons.epic);
+  });
+
   it("should return farcaster icon", () => {
     expect(getSocialIcon("farcaster")).toBe(socialIcons.farcaster);
   });

packages/thirdweb/src/react/core/utils/walletIcon.ts

@@ -11,6 +11,7 @@ import {
   APPLE_ICON,
   DISCORD_ICON,
   EMAIL_ICON,
+  EPIC_ICON,
   FACEBOOK_ICON,
   FARCASTER_ICON,
   GITHUB_ICON,
@@ -106,6 +107,8 @@ export function getAuthProviderImage(authProvider: string | null): string {
       return X_ICON;
     case "tiktok":
       return TIKTOK_ICON;
+    case "epic":
+      return EPIC_ICON;
     case "farcaster":
       return FARCASTER_ICON;
     case "telegram":