Skip to main content

Initializing tKey JS SDK

After installation, the next step to using Web3Auth Core Kit tKey SDK is to Initialize the SDK. The Initialization takes a few steps, including initiating the tKey SDK with the service provider and modules.

note

These are the most critical steps where you must pass on different parameters according to the need of your project.

Configuring Service Provider​

Service Provider in tKey is used for generating a Share A, i.e. the private key share managed by a wallet service provider via their authentication flows. This share in our wallet infrastructure refers to the social login aspect, where we associate a private key share with the user's social login, enabling the seamless login experience.

@tkey/service-provider-sfa​

In the Web3Auth Core Kit tKey SDK setup, you have to use the Web3Auth SFA Service Provider (@tkey/service-provider-sfa), which is basically a wrapper around the Single Factor Auth Web library implementing Web3Auth's Social Login feature as a service provider and enabling you to associate the social login of the user as one of the shares.

Web3AuthOptions​

ParameterTypeDescriptionMandatory
clientIdstringWeb3Auth Client ID. Obtain your clientId from the Web3Auth Developer Dashboard.Yes
web3AuthNetwork?TORUS_LEGACY_NETWORK_TYPEWeb3Auth Network to use for login. @defaultValue mainnetNo
enableLogging?booleanSetting it to true will enable logs.No
warning

Please note that the some of the parameters mentioned in the type description within the SFA Web SDK are not valid for the service provider. We have only mentioned the ones that are applicable.

Usage​

const clientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ"; // get from https://dashboard.web3auth.io

const chainConfig = {
  chainId: "0x1",
  rpcTarget: "https://rpc.ankr.com/eth",
  displayName: "mainnet",
  blockExplorer: "https://etherscan.io/",
  ticker: "ETH",
  tickerName: "Ethereum",
};

const web3AuthOptions: any = {
  clientId, // Get your Client ID from the Web3Auth Dashboard
  chainConfig,
  web3AuthNetwork: "sapphire_mainnet", // ["sapphire_mainnet", "sapphire_devnet"]
};

// Configuration of Service Provider
const serviceProvider = new SFAServiceProvider({ web3AuthOptions });

Configuring Storage Layer​

The Storage Layer refers to the Metadata Storage, which is used to store the metadata information of the shares generated by the tKey SDK.

@tkey/storage-layer-torus​

info

By default, we recommend using the Web3Auth (Torus) Metadata Storage URL as your default storage. However, if you want to own the storage layer, you can contact our team to help you set that up.

TorusStorageLayerArgs​

This TorusStorageLayer constructor takes an object with TorusStorageLayerArgs as input. It contains the following parameters:

ParameterTypeDescriptionMandatory
enableLogging?booleanEnables logging on the consoleNo
hostUrl?stringURL for connecting to your metadata server. Use https://metadata.tor.us for connecting to the Torus Metadata ServerNo
serverTimeOffset?numberTime offset for letting user connect to metadata serverNo

Usage​

import TorusStorageLayer from "@tkey/storage-layer-torus";

const storageLayer = new TorusStorageLayer({ hostUrl: "https://metadata.tor.us" });

Configuring Modules​

Modules extend the tKey SDK's capability to provide additional functionality for managing your tKey shares. Out of the multiple modules available, you can choose the module you want to include in your implementation. Here is the list of available modules:

Share B (Storage Modules)​

Storage Modules are used to store the tKey shares in the user's device storage. You can choose any of the following modules:

Web Storage Module​

Adds the capability to add or remove a share from the local and file storage.

@tkey/web-storage​
import { WebStorageModule } from "@tkey/web-storage";
const webStorageModule = new WebStorageModule();

React Native Storage Module​

Adds the capability to add or remove a share from the React Native Encrypted Store/ Expo Secure Store.

@tkey/react-native-storage​
import { ReactNativeStorageModule } from "@tkey/react-native-storage";
import EncryptedStorage from "react-native-encrypted-storage";
const reactNativeStorageModule = new ReactNativeStorageModule(EncryptedStorage);

Chrome Storage Module​

Adds the capability to add or remove a share from the Chrome Extension storage.

@tkey/chrome-storage​
import { ChromeExtensionStorageModule } from "@tkey/chrome-storage";
const chromeStorageModule = new ChromeExtensionStorageModule();

Recovery Modules (Share C)​

Recovery Modules are used to recover the tKey shares in the case user doesn't have access to their device/storage or needs additional security.

Security Questions Module​

Adds the capability to add or remove a question and password as a share.

@tkey/security-questions​
import { SecurityQuestionsModule } from "@tkey/security-questions";
const securityQuestionsModule = new SecurityQuestionsModule();

Share Transfer Module​

Adds the capability to transfer a share to another device.

@tkey/share-transfer​
import { ShareTransferModule } from "@tkey/share-transfer";
const shareTransferModule = new ShareTransferModule();

Share Serialization Module​

Adds the capability to serialize/ deserialize a BN (private key) into a mnemonic.

@tkey/share-serialization​
import { ShareSerializationModule } from "@tkey/share-serialization";
const shareSerializationModule = new ShareSerializationModule();

Additional Modules​

These modules provide extra capability to the tKey SDK, like importing users' existing private keys or seedphrases.

Seed Phrase Module​

Adds the capability to store and use seed phrases on the metadata.

@tkey/seed-phrase​
import { SeedPhraseModule } from "@tkey/seed-phrase";
const seedPhraseModule = new SeedPhraseModule();

Private Keys Module​

Adds the capability to store extra private keys on the metadata.

@tkey/private-keys​
import { PrivateKeyModule } from "@tkey/private-keys";
const privateKeyModule = new PrivateKeyModule();

Instantiating tKey​

Import the ThresholdKey class from @tkey/default​

import ThresholdKey from "@tkey/core";

Assign the ThresholdKey class to a variable​

const tKey = new ThresholdKey(TKeyArgs);

This ThresholdKey constructor takes an object with TKeyArgs as input.

Parameters​

TKeyArgs​

ParameterTypeDescriptionMandatory
enableLogging?booleanThis option is used to specify whether to enable logging.No
modules?ModuleMapAn object mapping the modules needed to be configured with their instances within the appNo
serviceProvider?IServiceProviderTakes in the Service Provider InstanceNo
storageLayer?IStorageLayerTakes in the Storage Layer InstanceNo
customAuthArgs?CustomAuthArgsOptional, you can pass the customAuthArgs from Web3Auth Service Provider here as well.No
manualSync?booleanHelps you turn on manual sync, which helps you configure Tkey to not constant the server for every request. You can sync at your convenience.No
serverTimeOffset?numberTime offset for letting user connect to metadata serverNo

Example​

import ThresholdKey from "@tkey/core";
import SecurityQuestionsModule from "@tkey/security-questions";
import SFAServiceProvider from "@tkey/service-provider-sfa";
import TorusStorageLayer from "@tkey/storage-layer-torus";
import { ShareSerializationModule } from "@tkey/share-serialization";
import { WebStorageModule } from "@tkey/web-storage";

// Configuration of Service Provider
const clientId = "BEglQSgt4cUWcj6SKRdu5QkOXTsePmMcusG5EAoyjyOYKlVRjIF1iCNnMOTfpzCiunHRrMui8TIwQPXdkQ8Yxuk"; // get from https://dashboard.web3auth.io

const chainConfig = {
  chainId: "0x1",
  rpcTarget: "https://rpc.ankr.com/eth",
  displayName: "mainnet",
  blockExplorer: "https://etherscan.io/",
  ticker: "ETH",
  tickerName: "Ethereum",
};

const web3AuthOptions: any = {
  clientId, // Get your Client ID from the Web3Auth Dashboard
  chainConfig,
  web3AuthNetwork: "sapphire_mainnet", // ["sapphire_mainnet", "testnet"]
};

const serviceProvider = new SFAServiceProvider({ web3AuthOptions });

// Configuration of Storage Layer
const storageLayer = new TorusStorageLayer({
  hostUrl: "https://metadata.tor.us",
});

// Configuration of Modules
const webStorageModule = new WebStorageModule();
const shareSerializationModule = new ShareSerializationModule();
const securityQuestionsModule = new SecurityQuestionsModule();

// Instantiation of tKey
export const tKeyInstance = new ThresholdKey({
  serviceProvider,
  storageLayer,
  modules: {
    securityQuestions: securityQuestionsModule,
    shareSerialization: shareSerializationModule,
    webStorage: webStorageModule,
  },
});

Initializing Service Provider​

You need to initialize your Service Provider within your constructor function to use it while logging your user in through the social accounts. This is done by calling the init() function within the tKey instance's serviceProvider property.

tKeyInstance.serviceProvider.init(params: PrivateKeyProvider);

Parameters​

PrivateKeyProvider​

The init function in SFAServiceProvider needs a PrivateKeyProvider as a parameter. It can accept any of the providers mentioned in our Providers documentation

Example​

import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";

const chainConfig = {
  chainId: "0x1",
  rpcTarget: "https://rpc.ankr.com/eth",
  displayName: "mainnet",
  blockExplorer: "https://etherscan.io/",
  ticker: "ETH",
  tickerName: "Ethereum",
};

export const ethereumPrivateKeyProvider = new EthereumPrivateKeyProvider({
  config: {
    chainConfig,
  },
});

useEffect(() => {
  const init = async () => {
    // Initialization of Service Provider
    try {
      await (tKeyInstance.serviceProvider as any).init(ethereumPrivateKeyProvider);
    } catch (error) {
      console.error(error);
    }
  };
  init();
}, []);