Skip to main content

React

Installation​

yarn add @turnkey/sdk-react

Initializing​

In App.tsx (or equivalent file)

import { TurnkeyProvider } from "@turnkey/sdk-react";
import turnkeyConfig from "./turnkey.json";

<div className="App">
  <TurnkeyProvider config={turnkeyConfig}>
    // Rest of app ...
  </TurnkeyProvider>
</div>

Parameters​

An object containing configuration settings for the Browser Client.

defaultOrganizationIdstringrequired

The root organization that requests will be made from unless otherwise specified

apiBaseUrlstringrequired

The base URL that API requests will be sent to (use https://api.turnkey.com when making requests to Turnkey's API)

rpIdstring

The Relying Party ID used for WebAuthn flows (will default to the value returned from window.location.hostname unless otherwise specified)

serverSignUrlstring

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

Using Turnkey​

In any React component nested under the TurnkeyProvider, you'll be able to call useTurnkey() and do the following:

import { useTurnkey } from "@turnkey/sdk-react";
const { turnkey, passkeyClient, authIframeClient } = useTurnkey();

const loginWithPasskey = async () => {
  await passkeyClient?.login();
}

const initEmailAuth = async () => {
  await turnkey?.serverSign(
    "emailAuth",
    [{
      email: "<target user email>",
      targetPublicKey: authIframeClient.iframePublicKey,
      organizationId: "<target user suborg-id>"
    }]
  )
}

const loginWithIframe = async (credentialBundle: string) => {
  await authIframeClient?.injectCredentialBundle(credentialBundle);
  await authIframeClient?.login();
}