Merge pull-request #524

Author: taylorjdawson

.changeset/tender-ways-fly.md

@@ -0,0 +1,6 @@
+---
+"@turnkey/sdk-server": minor
+"@turnkey/sdk-react": minor
+---
+
+Adds wallet as an authentication option in the Embedded Wallet Kit components for sdk-react

.codesandbox/ci.json

@@ -21,6 +21,6 @@
     "packages/react-native-passkey-stamper",
     "packages/telegram-cloud-storage-stamper"
   ],
-  "sandboxes": [],
+  "sandboxes": ["/examples/react-components"],
   "node": "18"
 }

examples/react-components/package.json

@@ -20,6 +20,7 @@
     "@turnkey/sdk-browser": "workspace:*",
     "@turnkey/sdk-react": "workspace:*",
     "@turnkey/sdk-server": "workspace:*",
+    "@turnkey/wallet-stamper": "workspace:*",
     "@types/node": "20.3.1",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",

examples/react-components/src/app/layout.tsx

@@ -2,13 +2,15 @@
 
 import "@turnkey/sdk-react/styles";
 import { TurnkeyProvider, TurnkeyThemeProvider } from "@turnkey/sdk-react";
-
+import { EthereumWallet } from "@turnkey/wallet-stamper";
+const wallet = new EthereumWallet();
 const turnkeyConfig = {
   apiBaseUrl: process.env.NEXT_PUBLIC_BASE_URL!,
   defaultOrganizationId: process.env.NEXT_PUBLIC_ORGANIZATION_ID!,
   rpId: process.env.NEXT_PUBLIC_RPID!,
   iframeUrl:
     process.env.NEXT_PUBLIC_AUTH_IFRAME_URL ?? "https://auth.turnkey.com",
+  wallet,
 };
 
 interface RootLayoutProps {

examples/react-components/src/app/page.tsx

@@ -37,6 +37,7 @@ interface Config {
   email: boolean;
   passkey: boolean;
   phone: boolean;
+  wallet: boolean;
   socials: SocialConfig;
 }
 
@@ -51,12 +52,14 @@ export default function AuthPage() {
     "email",
     "phone",
     "passkey",
+    "wallet",
   ]);
 
   const [config, setConfig] = useState<Config>({
     email: true,
     phone: false,
     passkey: true,
+    wallet: false,
     socials: {
       enabled: true,
       providers: {
@@ -131,6 +134,7 @@ export default function AuthPage() {
       emailEnabled: config.email,
       passkeyEnabled: config.passkey,
       phoneEnabled: config.phone,
+      walletEnabled: config.wallet,
       appleEnabled: config.socials.providers.apple,
       googleEnabled: config.socials.providers.google,
       facebookEnabled: config.socials.providers.facebook,
@@ -148,6 +152,7 @@ export default function AuthPage() {
     emailEnabled: config.email,
     passkeyEnabled: config.passkey,
     phoneEnabled: config.phone,
+    walletEnabled: config.wallet,
     appleEnabled: config.socials.providers.apple,
     googleEnabled: config.socials.providers.google,
     facebookEnabled: config.socials.providers.facebook,

examples/with-sdk-server/tsconfig.json

@@ -9,7 +9,8 @@
     "sourceMap": true,
     "target": "es2022",
     "types": ["node"],
-    "outDir": "dist"
+    "outDir": "dist",
+    "skipLibCheck": true
   },
   "include": ["src/**/*"],
   "exclude": ["node_modules"]

packages/sdk-react/src/components/auth/Auth.tsx

@@ -52,6 +52,7 @@ const passkeyIconError = (
     />
   </svg>
 );
+
 interface AuthProps {
   onAuthSuccess: () => Promise<void>;
   onError: (errorMessage: string) => void;
@@ -62,6 +63,7 @@ interface AuthProps {
     appleEnabled: boolean;
     facebookEnabled: boolean;
     googleEnabled: boolean;
+    walletEnabled: boolean;
     sessionLengthSeconds?: number; // Desired expiration time in seconds for the generated API key
     googleClientId?: string; // will default to NEXT_PUBLIC_GOOGLE_CLIENT_ID
     appleClientId?: string; // will default to NEXT_PUBLIC_APPLE_CLIENT_ID
@@ -80,7 +82,8 @@ const Auth: React.FC<AuthProps> = ({
   customSmsMessage,
   customAccounts,
 }) => {
-  const { passkeyClient, authIframeClient, turnkey } = useTurnkey();
+  const { passkeyClient, authIframeClient, walletClient, turnkey } =
+    useTurnkey();
   const [email, setEmail] = useState<string>("");
   const [phone, setPhone] = useState<string>("");
   const [otpId, setOtpId] = useState<string | null>(null);
@@ -92,6 +95,7 @@ const Auth: React.FC<AuthProps> = ({
   const [passkeySignupError, setPasskeySignupError] = useState("");
   const [loading, setLoading] = useState(true);
   const [passkeyCreated, setPasskeyCreated] = useState(false);
+  const [walletLoading, setWalletLoading] = useState(false);
 
   const handleResendCode = async () => {
     if (step === OtpType.Email) {
@@ -304,6 +308,63 @@ const Auth: React.FC<AuthProps> = ({
     }
   };
 
+  const handleLoginWithWallet = async () => {
+    setWalletLoading(true);
+    try {
+      if (!walletClient) {
+        throw new Error("Wallet client not initialized");
+      }
+
+      const publicKey = await walletClient.getPublicKey();
+
+      if (!publicKey) {
+        throw new Error(authErrors.wallet.noPublicKey);
+      }
+
+      const { type } = walletClient.getWalletInterface();
+
+      const resp = await server.getOrCreateSuborg({
+        filterType: FilterType.PublicKey,
+        filterValue: publicKey,
+        additionalData: {
+          wallet: {
+            publicKey,
+            type,
+          },
+        },
+      });
+
+      const suborgIds = resp?.subOrganizationIds;
+      if (!suborgIds || suborgIds.length === 0) {
+        onError(authErrors.wallet.loginFailed);
+        return;
+      }
+
+      const suborgId = suborgIds[0];
+
+      const sessionResponse = await walletClient.createReadWriteSession({
+        targetPublicKey: authIframeClient?.iframePublicKey!,
+        ...(suborgId && { organizationId: suborgId }),
+        ...(authConfig.sessionLengthSeconds !== undefined && {
+          expirationSeconds: authConfig.sessionLengthSeconds.toString(),
+        }),
+      });
+
+      if (sessionResponse?.credentialBundle) {
+        await handleAuthSuccess(
+          sessionResponse.credentialBundle,
+          authConfig.sessionLengthSeconds?.toString(),
+        );
+      } else {
+        throw new Error(authErrors.wallet.loginFailed);
+      }
+    } catch (error: any) {
+      onError(error.message || authErrors.wallet.loginFailed);
+    } finally {
+      setWalletLoading(false);
+    }
+  };
+
   const renderBackButton = () => (
     <ChevronLeftIcon
       onClick={() => {
@@ -475,6 +536,28 @@ const Auth: React.FC<AuthProps> = ({
           </div>
         ) : null;
 
+      case "wallet":
+        return authConfig.walletEnabled && !otpId ? (
+          <div className={styles.passkeyContainer}>
+            <button
+              className={styles.authButton}
+              type="button"
+              onClick={handleLoginWithWallet}
+              disabled={walletLoading}
+            >
+              {walletLoading ? (
+                <CircularProgress
+                  size={24}
+                  thickness={4}
+                  className={styles.buttonProgress || ""}
+                />
+              ) : (
+                "Continue with Wallet"
+              )}
+            </button>
+          </div>
+        ) : null;
+
       case "socials":
         return authConfig.googleEnabled ||
           authConfig.appleEnabled ||

packages/sdk-react/src/components/auth/constants.ts

@@ -29,6 +29,12 @@ export const authErrors = {
     loginFailed: "Failed to login with OIDC provider",
   },
 
+  // Wallet-related errors
+  wallet: {
+    loginFailed: "Failed to login with wallet",
+    noPublicKey: "No public key found",
+  },
+
   // Sub-organization-related errors
   suborg: {
     fetchFailed: "Failed to fetch account",
@@ -45,4 +51,5 @@ export enum FilterType {
   Email = "EMAIL",
   PhoneNumber = "PHONE_NUMBER",
   OidcToken = "OIDC_TOKEN",
+  PublicKey = "PUBLIC_KEY",
 }

packages/sdk-server/package.json

@@ -44,10 +44,11 @@
     "typecheck": "tsc -p tsconfig.typecheck.json"
   },
   "dependencies": {
-    "cross-fetch": "^3.1.5",
     "@turnkey/api-key-stamper": "workspace:*",
     "@turnkey/http": "workspace:*",
+    "@turnkey/wallet-stamper": "workspace:*",
     "buffer": "^6.0.3",
+    "cross-fetch": "^3.1.5",
     "next": "^15.0.2"
   },
   "devDependencies": {

packages/sdk-server/src/actions.ts

@@ -6,6 +6,7 @@ import {
   DEFAULT_SOLANA_ACCOUNTS,
   WalletAccount,
 } from "./turnkey-helpers";
+import { WalletType } from "@turnkey/wallet-stamper";
 
 type GetOrCreateSuborgRequest = {
   filterType: FilterType;
@@ -16,13 +17,18 @@ type GetOrCreateSuborgRequest = {
     passkey?: Passkey;
     oauthProviders?: Provider[];
     customAccounts?: WalletAccount[];
+    wallet?: {
+      publicKey: string;
+      type: WalletType;
+    };
   };
 };
 
 enum FilterType {
   Email = "EMAIL",
   PhoneNumber = "PHONE_NUMBER",
   OidcToken = "OIDC_TOKEN",
+  PublicKey = "PUBLIC_KEY",
 }
 
 type Session = {
@@ -85,6 +91,10 @@ type CreateSuborgRequest = {
   phoneNumber?: string | undefined;
   passkey?: Passkey | undefined;
   customAccounts?: WalletAccount[] | undefined;
+  wallet?: {
+    publicKey: string;
+    type: WalletType;
+  };
 };
 
 type Passkey = {
@@ -284,7 +294,18 @@ export async function createSuborg(
           ...(request.phoneNumber
             ? { userPhoneNumber: request.phoneNumber }
             : {}),
-          apiKeys: [],
+          apiKeys: request.wallet
+            ? [
+                {
+                  apiKeyName: `wallet-auth:${request.wallet.publicKey}`,
+                  publicKey: request.wallet.publicKey,
+                  curveType:
+                    request.wallet.type === WalletType.Ethereum
+                      ? ("API_KEY_CURVE_SECP256K1" as const)
+                      : ("API_KEY_CURVE_ED25519" as const),
+                },
+              ]
+            : [],
           authenticators: request.passkey ? [request.passkey] : [],
           oauthProviders: request.oauthProviders ?? [],
         },
@@ -341,7 +362,6 @@ export async function getOrCreateSuborg(
         subOrganizationIds: suborgResponse.organizationIds!,
       };
     }
-
     // No existing suborg found - create a new one
     const createPayload: CreateSuborgRequest = {
       ...(request.additionalData?.email && {
@@ -359,6 +379,9 @@ export async function getOrCreateSuborg(
       ...(request.additionalData?.customAccounts && {
         customAccounts: request.additionalData.customAccounts,
       }),
+      ...(request.additionalData?.wallet && {
+        wallet: request.additionalData.wallet,
+      }),
     };
 
     const creationResponse = await createSuborg(createPayload);