The @turnkey/sdk-browser package exposes functionality that lets developers build browser based applications that interact with the Turnkey API with different types of authentication.It consists of the passkeyClient, iframeClient and walletClient that enable requests to the API to be authenticated via different auth methods. It also contains methods to manage information and state related to authentication like auth bundles and sessions, retrieving user information and server signing API requests.If you are working with React - check out our @turnkey/sdk-react package.
The URL to send requests that need to be signed from a backend codebase by the root organization’s API key if using the serverSign flow.
Calls to Turnkey’s API must be signed with a valid credential from the appropriate user and, from a browser client, can either be sent directly to Turnkey or proxied through a server. Turnkey’s Browser SDK contains the following different clients that manage the process of validating these requests depending on the kind of authentication credential that is being used.
The TurnkeyBrowserClient wraps Turnkey’s basic SDK client with browser session management functionality. This client allows you to create a read only session that only authenticates read requests, or a read write session. It uses local storage for session management. The constructor for TurnkeyBrowserClient optionally takes in AuthClient which tracks which client was used for the initial authentication, to be used for retrieval purposes. Each subclass of TurnkeyBrowserClient (including TurnkeyPasskeyClient, TurnkeyIframeClient and TurnkeyWalletClient) will also set this to the respective value when used.Below are all of the methods exposed by TurnkeyBrowserClient
Creates a read-only session for the current user, storing session details like userId, organizationId, sessionExpiry and which authentication client was used in local storage. This session allows for read-only actions within the Turnkey API. If you would like to instantiate a read only TurnkeyBrowserClient after logging in, you can use the currentUserSession() method.
Copy
Ask AI
import { TurnkeyBrowserClient } from "@turnkey/sdk-browser";const config = { apiBaseUrl: "https://api.turnkey.com", defaultOrganizationId: process.env.TURNKEY_ORGANIZATION_ID,};// Create a client instanceconst browserClient = new TurnkeyBrowserClient(config);// Logs in to create a read-only session, storing the session in local storageconst readOnlySession = await browserClient.login({ organizationId: "org-id" });
Log in with a session object created via a server action. The session can be either read-only or read-write.
Copy
Ask AI
import { TurnkeyBrowserClient } from "@turnkey/sdk-browser";const config = { apiBaseUrl: "https://api.turnkey.com", defaultOrganizationId: process.env.TURNKEY_ORGANIZATION_ID,};// Create a client instanceconst browserClient = new TurnkeyBrowserClient(config);// Login with a session created by a serverconst loggedIn = await browserClient.loginWithSession(serverCreatedSession);
Creates a read-write session. This method infers the current user’s organization ID and target userId. To be used in conjunction with an iframeStamper: the resulting session’s credential bundle can be injected into an iframeStamper to create a session that enables both read and write requests.
Copy
Ask AI
import { TurnkeyBrowserClient } from "@turnkey/sdk-browser";const config = { apiBaseUrl: "https://api.turnkey.com", defaultOrganizationId: process.env.TURNKEY_ORGANIZATION_ID,};// Create a client instanceconst browserClient = new TurnkeyBrowserClient(config);// Logs in to create a read-write session, using a target embedded key and session expirationconst readWriteSession = await browserClient.loginWithReadWriteSession( "target-embedded-key", "900", // Session expires in 15 minutes "user-id");
The TurnkeyPasskeyClient class extends TurnkeyBrowserClient and specializes it for user authentication through Passkeys, which leverage the WebAuthn standard for passwordless authentication. This class enables the implementation of strong, user-friendly authentication experiences in a web-based application without relying on passwords. TurnkeyPasskeyClient handles Passkey creation, session management with Passkeys and integrates with WebAuthn and Embedded API Keys.To see how to instantiate the TurnkeyPasskeyClient, look hereBelow are the methods exposed by the TurnkeyPasskeyClient
Creates a passkey for an end-user, handling lower-level configurations for the WebAuthn protocol, including challenges and user details. For more detailed examples using this method look here.
Copy
Ask AI
import { Turnkey } from "@turnkey/sdk-browser";const config = { apiBaseUrl: "https://api.turnkey.com", defaultOrganizationId: process.env.TURNKEY_ORGANIZATION_ID,};// Create a client instanceconst turnkeySDK = new Turnkey(config);// Create a Passkey client instanceconst passkeyClient = turnkeySDK.passkeyClient();// Creates a new user passkey with WebAuthn protocol detailsconst passkey = await passkeyClient.createUserPasskey({ publicKey: { rp: { name: "Example Relying Party" }, user: { name: "testUser", displayName: "Test User" }, },});
Uses Passkey authentication to create a read-write session, via an embedded API key, and stores + returns the resulting auth bundle that contains the encrypted API key. This auth bundle (also referred to as a credential bundle) can be injected into an iframeStamper, resulting in a touch-free authenticator. Unlike loginWithReadWriteSession, this method assumes the end-user’s organization ID (i.e. the sub-organization ID) is already known.
Copy
Ask AI
import { Turnkey } from "@turnkey/sdk-browser";const config = { apiBaseUrl: "https://api.turnkey.com", defaultOrganizationId: process.env.TURNKEY_ORGANIZATION_ID,};// Create a client instanceconst turnkeySDK = new Turnkey(config);// Create a Passkey client instanceconst passkeyClient = turnkeySDK.passkeyClient();// Creates a read-write session using a passkey with a specific expiration and organization IDconst session = await passkeyClient.createPasskeySession( "user-id", "target-embedded-key", "1800", // Expire in 30 minutes "org-id");
The TurnkeyIframeClient class extends TurnkeyBrowserClient such that it is specialized for use with an iframe-based session. Our iFrame stamping implementation leverages the postMessage communication mechanism to send and receive messages within the iframe, ensuring the credential does not leave its secure environment. This approach is particularly crucial in sensitive flows such as Email Auth, and Key or Wallet Export, where heightened security is required. For further information on our iframe stamping process, checkout our iframeStamper package documentation.To see how to instantiate the TurnkeyIframeClient, look here.Here are all of the methods exposed by TurnkeyIframeClient
The TurnkeyWalletClient extends TurnkeyBrowserClient such that it is specialized for using a wallet to stamp and authenticate requests to the Turnkey API. This stamping process leverages your wallet’s signature key to authenticate requests securely.
The TurnkeyBrowserSDK serves as the main entry point for interacting with Turnkey’s services in a web browser environment. It contains methods to instantiate clients like the TurnkeyPasskeyClient and the TurnkeyIframeClient. manage information and state related to authentication like auth bundles and sessions, retrieving user information and server signing API requests.The client enables easy access to the wallet public key to be used for authentication flows.
Creates an instance of TurnkeyPasskeyClient with a specified or default rpId (relying party ID). This client can prompt users to sign with a Passkey credential for authentication. If you’d like to use your Passkey client to proxy requests to your server, to be signed with parent organization credentials, include the server URL in the serverSignUrl parameter.
Copy
Ask AI
import { Turnkey } from "@turnkey/sdk-browser";const config = { apiBaseUrl: "https://api.turnkey.com", defaultOrganizationId: process.env.TURNKEY_ORGANIZATION_ID, serverSignUrl: "https://your-server-sign-url.com",};// Create a client instanceconst turnkeySDK = new Turnkey(config);const passkeyClient = turnkeySDK.passkeyClient();const walletsResponse = await passkeyClient.getWallets();
Creates an instance of TurnkeyIframeClient by initializing an iframe stamper with the specified iframeUrl and optional element ID. The iframe client is used to interact with a series of iframes hosted by Turnkey, designed for sensitive operations such as storing an expiring credential within the Email Recovery and Email Auth flows, and facilitating Wallet Import and Export. The code powering these iframes can be found at https://github.com/tkhq/frames. If you’d like to use your iframe client to proxy requests to your server, to be signed with parent organization credentials, include the server URL in the serverSignUrl parameter.
Copy
Ask AI
import { Turnkey } from "@turnkey/sdk-browser";const config = { apiBaseUrl: "https://api.turnkey.com", defaultOrganizationId: process.env.TURNKEY_ORGANIZATION_ID, serverSignUrl: "https://your-server-sign-url.com",};// Create a client instanceconst turnkeySDK = new Turnkey(config);const iframeClient = await turnkeySDK.iframeClient({ iframeContainer: document.getElementById("<iframe container id>"), iframeUrl: "https://auth.turnkey.com",});const response = await iframeClient.injectCredentialBundle( "<Credential from Email>");if (response) { await iframeClient.getWallets();}// this requires the developer to build a wrapper flow that can take user text input in their app and call the injectCredentialBundle function on the turnkey iframeClient
Creates an instance of TurnkeyWalletClient, taking in an wallet, wrapped by an object that matches the WalletInterface class. The wallet client is used to interact with the Turnkey API, authenticating requests by using the wallet to stamp the requests. If you’d like to use your wallet client to proxy requests to your server, to be signed with parent organization credentials, include the server URL in the serverSignUrl parameter.
Copy
Ask AI
import { Turnkey } from "@turnkey/sdk-browser";import { EthereumWallet } from "@turnkey/wallet-stamper";const config = { apiBaseUrl: "https://api.turnkey.com", defaultOrganizationId: process.env.TURNKEY_ORGANIZATION_ID, serverSignUrl: "https://your-server-sign-url.com",};// Create a client instanceconst turnkeySDK = new Turnkey(config);const walletClient = turnkeySDK.walletClient(new EthereumWallet());
The serverSign function is used to proxy requests from a root parent organization to a child organization. The API key cannot be stored client-side, which is why the serverSign flow exists: to forward authenticated client-side requests to Turnkey via proxy backend.
Generally speaking, in order to ensure a seamless UX, you might not want a passkey user have to manually authenticate every read request from Turnkey’s API with a credential (e.g. via FaceID or TouchID). In order to reduce friction, you can have a user login() to Turnkey with a credential once. This method facilitates this process and creates an instance of The TurnkeyBrowserClient that allows multiple read-only requests to Turnkey’s API.
Copy
Ask AI
import { Turnkey } from "@turnkey/sdk-browser";const config = { apiBaseUrl: "https://api.turnkey.com", defaultOrganizationId: process.env.TURNKEY_ORGANIZATION_ID,};// Create a client instanceconst turnkeySDK = new Turnkey(config);const passkeyClient = turnkeySDK.passkeyClient();await passkeySigner.login();// when a user logs in with the Turnkey SDK, a read-only API credential is saved in localStorage and can be used to make API read requests on their behalfconst userSessionClient = await turnkeySDK.currentUserSession();const walletsResponse = await userSessionClient.getWallets();// this API call happens without any confirmation step because the user now has an active read-only session
If there is a valid, current read-session, this will return an auth bundle and its expiration. This auth bundle can be used in conjunction with an iframeStamper to create a read + write session.
Copy
Ask AI
import { Turnkey } from "@turnkey/sdk-browser";const config = { apiBaseUrl: "https://api.turnkey.com", defaultOrganizationId: process.env.TURNKEY_ORGANIZATION_ID,};// Create a client instanceconst turnkeySDK = new Turnkey(config);// gets auth bundle to be used with an iframeStamperto create a read write sessionconst readWriteSession = await turnkeySDK.getReadWriteSession();
Retrieves information about the user’s current sub-organization from the user data stored in local storage. Useful for obtaining the user’s organization context.
Copy
Ask AI
import { Turnkey } from "@turnkey/sdk-browser";const config = { apiBaseUrl: "https://api.turnkey.com", defaultOrganizationId: process.env.TURNKEY_ORGANIZATION_ID,};// Create a client instanceconst turnkeySDK = new Turnkey(config);// retrieves users current sub organizationconst subOrganization = await turnkeySDK.getCurrentSubOrganization();