[SDK] Feature: GitHub Auth

.changeset/plenty-goats-drop.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": minor
+---
+
+Adds GitHub authentication

apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/types.ts

@@ -5,6 +5,7 @@ export const authOptions = [
   "discord",
   "farcaster",
   "telegram",
+  "github",
   "twitch",
   "phone",
   "email",

apps/dashboard/src/components/wallets/ConnectWalletMiniPlayground/MiniPlayground.tsx

@@ -69,13 +69,14 @@ function usePlaygroundWallets() {
     google: true,
     discord: true,
     telegram: true,
-    twitch: false,
     farcaster: true,
-    facebook: false,
-    apple: false,
     email: true,
     passkey: true,
     phone: true,
+    twitch: false,
+    facebook: false,
+    apple: false,
+    github: false,
     coinbase: false,
     guest: false,
   });

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

@@ -10,6 +10,7 @@ const allInAppWalletLoginMethods: InAppWalletAuth[] = [
   "google",
   "discord",
   "telegram",
+  "github",
   "twitch",
   "farcaster",
   "email",

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

@@ -17,6 +17,8 @@
   "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTAwMHB4IiBoZWlnaHQ9IjEwMDBweCIgdmlld0JveD0iMCAwIDEwMDAgMTAwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTMuMiAoNzI2NDMpIC0gaHR0cHM6Ly9za2V0Y2hhcHAuY29tIC0tPgogICAgPHRpdGxlPkFydGJvYXJkPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+CiAgICAgICAgPGxpbmVhckdyYWRpZW50IHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9Ijk5LjI1ODM0MDQlIiBpZD0ibGluZWFyR3JhZGllbnQtMSI+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMyQUFCRUUiIG9mZnNldD0iMCUiPjwvc3RvcD4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzIyOUVEOSIgb2Zmc2V0PSIxMDAlIj48L3N0b3A+CiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJBcnRib2FyZCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgZmlsbD0idXJsKCNsaW5lYXJHcmFkaWVudC0xKSIgY3g9IjUwMCIgY3k9IjUwMCIgcj0iNTAwIj48L2NpcmNsZT4KICAgICAgICA8cGF0aCBkPSJNMjI2LjMyODQxOSw0OTQuNzIyMDY5IEMzNzIuMDg4NTczLDQzMS4yMTY2ODUgNDY5LjI4NDgzOSwzODkuMzUwMDQ5IDUxNy45MTcyMTYsMzY5LjEyMjE2MSBDNjU2Ljc3MjUzNSwzMTEuMzY3NDMgNjg1LjYyNTQ4MSwzMDEuMzM0ODE1IDcwNC40MzE0MjcsMzAxLjAwMzUzMiBDNzA4LjU2NzYyMSwzMDAuOTMwNjcgNzE3LjgxNTgzOSwzMDEuOTU1NzQzIDcyMy44MDY0NDYsMzA2LjgxNjcwNyBDNzI4Ljg2NDc5NywzMTAuOTIxMjEgNzMwLjI1NjU1MiwzMTYuNDY1ODEgNzMwLjkyMjU1MSwzMjAuMzU3MzI5IEM3MzEuNTg4NTUxLDMyNC4yNDg4NDggNzMyLjQxNzg3OSwzMzMuMTEzODI4IDczMS43NTg2MjYsMzQwLjA0MDY2NiBDNzI0LjIzNDAwNyw0MTkuMTAyNDg2IDY5MS42NzUxMDQsNjEwLjk2NDY3NCA2NzUuMTEwOTgyLDY5OS41MTUyNjcgQzY2OC4xMDIwOCw3MzYuOTg0MzQyIDY1NC4zMDEzMzYsNzQ5LjU0NzUzMiA2NDAuOTQwNjE4LDc1MC43NzcwMDYgQzYxMS45MDQ2ODQsNzUzLjQ0ODkzOCA1ODkuODU2MTE1LDczMS41ODgwMzUgNTYxLjczMzM5Myw3MTMuMTUzMjM3IEM1MTcuNzI2ODg2LDY4NC4zMDY0MTYgNDkyLjg2NjAwOSw2NjYuMzQ5MTgxIDQ1MC4xNTAwNzQsNjM4LjIwMDAxMyBDNDAwLjc4NDQyLDYwNS42Njg3OCA0MzIuNzg2MTE5LDU4Ny43ODkwNDggNDYwLjkxOTQ2Miw1NTguNTY4NTYzIEM0NjguMjgyMDkxLDU1MC45MjE0MjMgNTk2LjIxNTA4LDQzNC41NTY0NzkgNTk4LjY5MTIyNyw0MjQuMDAwMzU1IEM1OTkuMDAwOTEsNDIyLjY4MDEzNSA1OTkuMjg4MzEyLDQxNy43NTg5ODEgNTk2LjM2NDc0LDQxNS4xNjA0MzEgQzU5My40NDExNjgsNDEyLjU2MTg4MSA1ODkuMTI2MjI5LDQxMy40NTA0ODQgNTg2LjAxMjQ0OCw0MTQuMTU3MTk4IEM1ODEuNTk4NzU4LDQxNS4xNTg5NDMgNTExLjI5Nzc5Myw0NjEuNjI1Mjc0IDM3NS4xMDk1NTMsNTUzLjU1NjE4OSBDMzU1LjE1NDg1OCw1NjcuMjU4NjIzIDMzNy4wODA1MTUsNTczLjkzNDkwOCAzMjAuODg2NTI0LDU3My41ODUwNDYgQzMwMy4wMzM5NDgsNTczLjE5OTM1MSAyNjguNjkyNzU0LDU2My40OTA5MjggMjQzLjE2MzYwNiw1NTUuMTkyNDA4IEMyMTEuODUxMDY3LDU0NS4wMTM5MzYgMTg2Ljk2NDQ4NCw1MzkuNjMyNTA0IDE4OS4xMzE1NDcsNTIyLjM0NjMwOSBDMTkwLjI2MDI4Nyw1MTMuMzQyNTg5IDIwMi42NTkyNDQsNTA0LjEzNDUwOSAyMjYuMzI4NDE5LDQ5NC43MjIwNjkgWiIgaWQ9IlBhdGgtMyIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPgogICAgPC9nPgo8L3N2Zz4=";
 const twitchIconUri =
   "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjQwMCAyODAwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNDAwIDI4MDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KCS5zdDF7ZmlsbDojOTE0NkZGO30KPC9zdHlsZT4KPHRpdGxlPkFzc2V0IDI8L3RpdGxlPgo8Zz4KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMjIwMCwxMzAwIDE4MDAsMTcwMCAxNDAwLDE3MDAgMTA1MCwyMDUwIDEwNTAsMTcwMCA2MDAsMTcwMCA2MDAsMjAwIDIyMDAsMjAwIAkiLz4KCTxnPgoJCTxnIGlkPSJMYXllcl8xLTIiPgoJCQk8cGF0aCBjbGFzcz0ic3QxIiBkPSJNNTAwLDBMMCw1MDB2MTgwMGg2MDB2NTAwbDUwMC01MDBoNDAwbDkwMC05MDBWMEg1MDB6IE0yMjAwLDEzMDBsLTQwMCw0MDBoLTQwMGwtMzUwLDM1MHYtMzUwSDYwMFYyMDBoMTYwMAoJCQkJVjEzMDB6Ii8+CgkJCTxyZWN0IHg9IjE3MDAiIHk9IjU1MCIgY2xhc3M9InN0MSIgd2lkdGg9IjIwMCIgaGVpZ2h0PSI2MDAiLz4KCQkJPHJlY3QgeD0iMTE1MCIgeT0iNTUwIiBjbGFzcz0ic3QxIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjYwMCIvPgoJCTwvZz4KCTwvZz4KPC9nPgo8L3N2Zz4K";
+const githubIconUri =
+  "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTA2IiBoZWlnaHQ9IjEwNiIgdmlld0JveD0iMCAwIDEwNiAxMDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxjaXJjbGUgY3g9IjUzIiBjeT0iNTMiIHI9IjUzIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTUyLjg1NCA0QzI1LjgzOSA0IDQgMjYgNCA1My4yMTdDNCA3NC45NzMgMTcuOTkzIDkzLjM4OSAzNy40MDUgOTkuOTA3QzM5LjgzMiAxMDAuMzk3IDQwLjcyMSA5OC44NDggNDAuNzIxIDk3LjU0NUM0MC43MjEgOTYuNDA0IDQwLjY0MSA5Mi40OTMgNDAuNjQxIDg4LjQxOEMyNy4wNTEgOTEuMzUyIDI0LjIyMSA4Mi41NTEgMjQuMjIxIDgyLjU1MUMyMi4wMzcgNzYuODQ3IDE4LjgwMSA3NS4zODEgMTguODAxIDc1LjM4MUMxNC4zNTMgNzIuMzY2IDE5LjEyNSA3Mi4zNjYgMTkuMTI1IDcyLjM2NkMyNC4wNTkgNzIuNjkyIDI2LjY0OCA3Ny40MTggMjYuNjQ4IDc3LjQxOEMzMS4wMTUgODQuOTE0IDM4LjA1MiA4Mi43OTYgNDAuODgzIDgxLjQ5MkM0MS4yODcgNzguMzE0IDQyLjU4MiA3Ni4xMTQgNDMuOTU3IDc0Ljg5MkMzMy4xMTggNzMuNzUxIDIxLjcxNCA2OS41MTQgMjEuNzE0IDUwLjYwOUMyMS43MTQgNDUuMjMxIDIzLjY1NCA0MC44MzEgMjYuNzI4IDM3LjQwOUMyNi4yNDMgMzYuMTg3IDI0LjU0NCAzMS4xMzQgMjcuMjE0IDI0LjM3MUMyNy4yMTQgMjQuMzcxIDMxLjMzOSAyMy4wNjcgNDAuNjQgMjkuNDIzQzQ0LjYyMjEgMjguMzQ1NyA0OC43Mjg4IDI3Ljc5NzYgNTIuODU0IDI3Ljc5M0M1Ni45NzkgMjcuNzkzIDYxLjE4NCAyOC4zNjQgNjUuMDY3IDI5LjQyM0M3NC4zNjkgMjMuMDY3IDc4LjQ5NCAyNC4zNzEgNzguNDk0IDI0LjM3MUM4MS4xNjQgMzEuMTM0IDc5LjQ2NCAzNi4xODcgNzguOTc5IDM3LjQwOUM4Mi4xMzQgNDAuODMxIDgzLjk5NCA0NS4yMzEgODMuOTk0IDUwLjYwOUM4My45OTQgNjkuNTE0IDcyLjU5IDczLjY2OSA2MS42NyA3NC44OTJDNjMuNDUgNzYuNDQgNjQuOTg2IDc5LjM3MyA2NC45ODYgODQuMDE4QzY0Ljk4NiA5MC42MTggNjQuOTA2IDk1LjkxNSA2NC45MDYgOTcuNTQ0QzY0LjkwNiA5OC44NDggNjUuNzk2IDEwMC4zOTcgNjguMjIyIDk5LjkwOEM4Ny42MzQgOTMuMzg4IDEwMS42MjcgNzQuOTczIDEwMS42MjcgNTMuMjE3QzEwMS43MDcgMjYgNzkuNzg4IDQgNTIuODU0IDRaIiBmaWxsPSIjMjQyOTJGIi8+Cjwvc3ZnPgo=";
 const xIcon =
   "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjMyMCIgdmlld0JveD0iMCAwIDMyMCAzMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIzMjAiIGhlaWdodD0iMzIwIiByeD0iMjQiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGQ9Ik0xNzcuMzE1IDE0NS4zMzVMMjQ1LjA2OCA2N0gyMjkuMDEzTDE3MC4xODIgMTM1LjAxN0wxMjMuMTk1IDY3SDY5TDE0MC4wNTUgMTY5Ljg1NEw2OSAyNTJIODUuMDU2M0wxNDcuMTgzIDE4MC4xNzJMMTk2LjgwNSAyNTJIMjUxTDE3Ny4zMTEgMTQ1LjMzNUgxNzcuMzE1Wk0xNTUuMzIzIDE3MC43NkwxNDguMTI0IDE2MC41MThMOTAuODQxNyA3OS4wMjJIMTE1LjUwM0wxNjEuNzMxIDE0NC43OTJMMTY4LjkzIDE1NS4wMzRMMjI5LjAyIDI0MC41MjVIMjA0LjM1OUwxNTUuMzIzIDE3MC43NjRWMTcwLjc2WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==";
 export const emailIcon =
@@ -43,6 +45,7 @@
   farcaster: farcasterIconUri,
   telegram: telegramIconUri,
   twitch: twitchIconUri,
+  github: githubIconUri,
 };
 
 // TODO: this should return actual <svg> elements so they can be themed
@@ -74,6 +77,8 @@
       return telegramIconUri;
     case "twitch":
       return twitchIconUri;
+    case "github":
+      return githubIconUri;
     case "guest":
       return guestIcon;
     default:

packages/thirdweb/src/react/native/ui/components/WalletImage.tsx

@@ -13,6 +13,7 @@ import {
   EMAIL_ICON,
   FACEBOOK_ICON,
   FARCASTER_ICON,
+  GITHUB_ICON,
   GOOGLE_ICON,
   GUEST_ICON,
   LINE_ICON,
@@ -103,6 +104,8 @@ export function getAuthProviderImage(authProvider: string | null): string {
       return FARCASTER_ICON;
     case "telegram":
       return TELEGRAM_ICON;
+    case "github":
+      return GITHUB_ICON;
     case "twitch":
       return TWITCH_ICON;
     case "guest":

packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsx

@@ -34,6 +34,7 @@ import {
   DISCORD_ICON,
   FACEBOOK_ICON,
   FARCASTER_ICON,
+  GITHUB_ICON,
   GOOGLE_ICON,
   LINE_ICON,
   TELEGRAM_ICON,
@@ -62,6 +63,7 @@ const socialIcons = {
   x: X_ICON,
   farcaster: FARCASTER_ICON,
   telegram: TELEGRAM_ICON,
+  github: GITHUB_ICON,
   twitch: TWITCH_ICON,
 };
 

packages/thirdweb/src/react/native/ui/icons/svgs.ts

@@ -71,6 +71,11 @@ export const TELEGRAM_ICON = `<svg width={width} height={height} viewBox="0 0 10
     </g>
 </svg>`;
 
+export const GITHUB_ICON = `<svg width="106" height="106" viewBox="0 0 106 106" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="53" cy="53" r="53" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M52.854 4C25.839 4 4 26 4 53.217C4 74.973 17.993 93.389 37.405 99.907C39.832 100.397 40.721 98.848 40.721 97.545C40.721 96.404 40.641 92.493 40.641 88.418C27.051 91.352 24.221 82.551 24.221 82.551C22.037 76.847 18.801 75.381 18.801 75.381C14.353 72.366 19.125 72.366 19.125 72.366C24.059 72.692 26.648 77.418 26.648 77.418C31.015 84.914 38.052 82.796 40.883 81.492C41.287 78.314 42.582 76.114 43.957 74.892C33.118 73.751 21.714 69.514 21.714 50.609C21.714 45.231 23.654 40.831 26.728 37.409C26.243 36.187 24.544 31.134 27.214 24.371C27.214 24.371 31.339 23.067 40.64 29.423C44.6221 28.3457 48.7288 27.7976 52.854 27.793C56.979 27.793 61.184 28.364 65.067 29.423C74.369 23.067 78.494 24.371 78.494 24.371C81.164 31.134 79.464 36.187 78.979 37.409C82.134 40.831 83.994 45.231 83.994 50.609C83.994 69.514 72.59 73.669 61.67 74.892C63.45 76.44 64.986 79.373 64.986 84.018C64.986 90.618 64.906 95.915 64.906 97.544C64.906 98.848 65.796 100.397 68.222 99.908C87.634 93.388 101.627 74.973 101.627 53.217C101.707 26 79.788 4 52.854 4Z" fill="#24292F"/>
+</svg>`;
+
 export const TWITCH_ICON = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 2400 2800" style="enable-background:new 0 0 2400 2800;" xml:space="preserve">
 <style type="text/css">

packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx

@@ -114,6 +114,7 @@
     coinbase: "Coinbase",
     farcaster: "Farcaster",
     telegram: "Telegram",
+    github: "GitHub",
     twitch: "Twitch",
   };
 

packages/thirdweb/src/react/web/wallets/shared/oauthSignIn.ts

@@ -38,6 +38,7 @@
     case "google":
     case "farcaster":
     case "telegram":
+    case "github":
     case "twitch":
     case "line":
     case "x":

packages/thirdweb/src/wallets/in-app/core/authentication/types.ts

@@ -101,6 +101,7 @@ export type AuthProvider =
   | "X"
   | "Line"
   | "Twitch"
+  | "GitHub"
   | "Farcaster"
   | "Telegram";
 

packages/thirdweb/src/wallets/in-app/web/lib/web-connector.ts

@@ -318,6 +318,7 @@
       case "facebook":
       case "google":
       case "telegram":
+      case "github":
       case "twitch":
       case "farcaster":
       case "line":
@@ -390,6 +391,7 @@
       case "google":
       case "farcaster":
       case "telegram":
+      case "github":
       case "line":
       case "x":
       case "guest":

packages/thirdweb/src/wallets/types.ts

@@ -29,6 +29,7 @@ export const socialAuthOptions = [
   "coinbase",
   "farcaster",
   "telegram",
+  "github",
   "twitch",
 ] as const;
 export type SocialAuthOption = (typeof socialAuthOptions)[number];