npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@turnkey/sdk-browser

v1.10.0

Published

Javascript Browser SDK

Downloads

81,920

Readme

@turnkey/sdk-browser

npm

A SDK client with browser-specific abstractions for interacting with Turnkey API. Also includes @turnkey/http, a lower-level, fully typed HTTP client.

Turnkey API documentation lives here: https://docs.turnkey.com.

Getting started

$ npm install @turnkey/sdk-browser

Initialize

import { Turnkey } from "@turnkey/sdk-browser";

const turnkey = new Turnkey({
  apiBaseUrl: "https://api.turnkey.com",
  defaultOrganizationId: process.env.TURNKEY_ORGANIZATION_ID,
  // Optional: Your relying party ID - for use with Passkey authentication
  rpId: process.env.TURNKEY_RP_ID,
});

Turnkey Clients

Passkey

The Passkey client allows for authentication to Turnkey's API using Passkeys.

const passkeyClient = turnkey.passkeyClient();

// User will be prompted to login with their passkey
await passkeyClient.login();

// Make authenticated requests to Turnkey API, such as listing user's wallets
const walletsResponse = await passkeyClient.getWallets();

Iframe

The Iframe client can be initialized to interact with Turnkey's hosted iframes for sensitive operations. The iframeContainer parameter is required, and should be a reference to the DOM element that will host the iframe. The iframeUrl is the URL of the iframe you wish to interact with.

The example below demonstrates how to initialize the Iframe client for use with Email Auth by passing in https://auth.turnkey.com as the iframeUrl.

const iframeClient = await turnkey.iframeClient({
  // The container element that will host the iframe
  iframeContainer: document.getElementById("<iframe container id>"),
  iframeUrl: "https://auth.turnkey.com",
});

const injectedResponse = await iframeClient.injectCredentialBundle(
  "<Credential from Email>"
);
if (injectedResponse) {
  await iframeClient.getWallets();
}
IFrame URLs:

| Flow | URL | | ------------------------------------------------------------------------------------- | ---------------------------------------------------- | | Email Auth | auth.turnkey.com | | Email Recovery | recovery.turnkey.com | | Import Wallet | import.turnkey.com | | Export Wallet | export.turnkey.com |

Wallet

The Wallet client is designed for using your Solana or EVM wallet to stamp and approve activity requests for Turnkey's API. This stamping process leverages the wallet's signature to authenticate requests.

The example below showcases how to use an injected Ethereum wallet to stamp requests to Turnkey's API. The user will be prompted to sign a message containing the activity request payload to be sent to Turnkey.

import {
  createWalletClient,
  custom,
  recoverPublicKey,
  hashMessage,
} from "viem";
import { privateKeyToAccount } from "viem/accounts";
import { mainnet } from "viem/chains";

import { WalletStamper, EthereumWallet } from "@turnkey/wallet-stamper";

const walletClient = turnkey.walletClient(new EthereumWallet());

// Make authenticated requests to Turnkey API, such as listing user's wallets
// User will be prompted to sign a message to authenticate the request
const walletsResponse = await walletClient.getWallets();

Helpers

@turnkey/sdk-browser provides TurnkeySDKBrowserClient, which offers wrappers around commonly used Turnkey activities, such as creating new wallets and wallet accounts.