Advanced backend authentication

Overview

This guide explains how to set up authentication in your React application using your backend server in conjunction with the Embedded Wallet Kit. This approach is useful if you do not want to use Turnkey’s Auth Proxy or are migrating from a previous version of the SDK and already have an existing backend auth setup.

What you can’t use

When implementing backend authentication, you cannot use any authentication helper methods from the useTurnkey hook, such as handleLogin, completeOtp, or completeOauth. These methods are designed to work with Turnkey’s auth proxy and will not function with a custom backend authentication flow.

Disabling the Auth Proxy

To disable auth proxy usage in the Embedded Wallet Kit, simply omit the authProxyConfigId parameter in the TurnkeyProvider configuration. This will prevent the SDK from automatically fetching authentication configuration from your Turnkey Dashboard.

import {
  TurnkeyProvider,
  TurnkeyProviderConfig,
} from "@turnkey/react-wallet-kit";
import "@turnkey/react-wallet-kit/styles.css";

function App() {
  const turnkeyConfig: TurnkeyProviderConfig = {
    organizationId: process.env.NEXT_PUBLIC_ORGANIZATION_ID!, // Your organization ID from the Turnkey dashboard
    
    // Omit this line to disable auth proxy
    // authProxyConfigId: process.env.NEXT_PUBLIC_AUTH_PROXY_CONFIG_ID!,

    //... your existing configuration
  };

  return <TurnkeyProvider config={turnkeyConfig}>{children}</TurnkeyProvider>;
}

On your backend

You will need to implement various authentication endpoints on your backend server to forward authentication requests to Turnkey. You’ll need to implement some or all of the following endpoints depending on your authentication flow:

createSubOrganization: Create a new sub-organization for the user.
initOtp: Send an OTP authentication code.
verifyOtp: Verify the OTP code entered by the user.
otpLogin: Handle OTP login flow (you can also combine this with verifyOtp to make a single endpoint).
oauthLogin: Handle OAuth login flow.

Note: passkey and wallet login will occur in the frontend using stampLogin, so you do not need to implement any additional endpoints for those. Signup however will still require the createSubOrganization endpoint to create a new sub-organization for the user. See the implementation in @turnkey/core for more details on how to implement loginWithPasskey and loginWithWallet using the stampLogin activity. Here’s an example of how you might implement the createSubOrganization endpoint in Node.js using Express and the @turnkey/sdk-server package:

import { Request } from "express";
import dotenv from "dotenv";
import { DEFAULT_ETHEREUM_ACCOUNTS, Turnkey } from "@turnkey/sdk-server";
import { CreateSubOrgParams, CreateSubOrgResponse } from "./types.js";

dotenv.config();

export const turnkeyConfig = {
  apiBaseUrl: process.env.TURNKEY_API_URL ?? "",
  defaultOrganizationId: process.env.TURNKEY_ORGANIZATION_ID ?? "",
  apiPublicKey: process.env.TURNKEY_API_PUBLIC_KEY ?? "",
  apiPrivateKey: process.env.TURNKEY_API_PRIVATE_KEY ?? "",
};

const turnkey = new Turnkey(turnkeyConfig).apiClient();

export async function createSubOrg(
  req: Request<{}, {}, CreateSubOrgParams>
): Promise<CreateSubOrgResponse> {
  const { email, phone, passkey, oauth, apiKeys } = req.body;

  const authenticators = passkey
    ? [
        {
          authenticatorName: "Passkey",
          challenge: passkey.challenge,
          attestation: passkey.attestation,
        },
      ]
    : [];

  const oauthProviders = oauth
    ? [
        {
          providerName: oauth.providerName,
          oidcToken: oauth.oidcToken,
        },
      ]
    : [];

  let userEmail = email;
  const userPhoneNumber = phone;

  const subOrganizationName = `Sub Org - ${new Date().toISOString()}`;

  const result = await turnkey.createSubOrganization({
    organizationId: turnkeyConfig.defaultOrganizationId,
    subOrganizationName,
    rootUsers: [
      {
        userName: "User",
        userEmail,
        userPhoneNumber,
        authenticators,
        oauthProviders: oauthProviders,
        apiKeys: apiKeys ?? [],
      },
    ],
    rootQuorumThreshold: 1,
    wallet: {
      walletName: "Default Wallet",
      accounts: DEFAULT_ETHEREUM_ACCOUNTS,
    },
  });

  return { subOrganizationId: result.subOrganizationId };
}

Code snippet taken from our Swift example here. You can use this as reference for a full Javascript server implementation. Turnkey also offers Rust and Go SDKs that can be used to implement the backend endpoints. You can also use any other backend language you prefer as long as it can make HTTP requests to the Turnkey API.

On your frontend

On the frontend, you will need to implement your own authentication flows that interact with your backend endpoints.

Creating a keypair

Login endpoints like otpLogin and oauthLogin will require a public key to be passed in the request. You can use createApiKeyPair from the useTurnkey hook to generate a keypair for this purpose.

import { useTurnkey } from "@turnkey/react-wallet-kit";

const { createApiKeyPair } = useTurnkey();

const otpLogin = async (verificationToken: string) => {
  const publicKey = await createApiKeyPair();

  // Send the public key to your backend to initiate the OTP login flow
  const response = await fetch("/YOUR-BACKEND-URL/otp-login", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      verificationToken, // The OTP verification token received after running verifyOtp with a successful OTP code and OTP id
      publicKey,
    }),
  });

  if (!response.ok) {
    throw new Error("Failed to initiate OTP login");
  }

  //... continued in the next section
};

The private key generated from createApiKeyPair will be automatically stored in indexedDB and used for stamping requests to Turnkey after authentication. You can learn more about stamps here.

Storing the session

Login endpoints like otpLogin and oauthLogin will return a session token in JWT format that you need to store in your application. You can use the storeSession function from the useTurnkey hook to store the session token.

import { useTurnkey } from "@turnkey/react-wallet-kit";

const { storeSession } = useTurnkey();

const otpLogin = async (verificationToken: string) => {
  const publicKey = await createApiKeyPair();

  // Send the public key to your backend to initiate the OTP login flow
  const response = await fetch("/YOUR-BACKEND-URL/otp-login", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      verificationToken, // The OTP verification token received after running verifyOtp with a successful OTP code and OTP id
      publicKey,
    }),
  });

  if (!response.ok) {
    throw new Error("Failed to initiate OTP login");
  }

  const { sessionToken } = await response.json();

  // Store the session token in your application
  storeSession(sessionToken);
};

By using storeSession, the SDK will automatically handle the session and keypair management for you. If you have autoRefreshSession enabled under the auth object in the TurnkeyProvider configuration, the SDK will automatically refresh the session token when it expires. You can also continue to use the authState variable from the useTurnkey hook to check if the user is authenticated.

import { useTurnkey, AuthState } from "@turnkey/react-wallet-kit";
function AuthStatus() {
  const { authState, user } = useTurnkey();
  return (
    <div>
      {authState === AuthState.Authenticated ? (
        <p>Welcome, {user?.userName}!</p>
      ) : (
        <p>Please log in.</p>
      )}
    </div>
  );
}

Once the user is authenticated, you can continue to use the Embedded Wallet Kit as usual.

SDK reference

​Overview

​What you can’t use

​Disabling the Auth Proxy

​On your backend

​On your frontend

​Creating a keypair

​Storing the session