Web SDK - Circle Docs

The Circle Web SDK enables user-controlled wallets within your web application. Three authentication methods are supported, namely social logins, email, or PIN, which includes security questions for recovery. This allows you to authenticate your users in a seamless way and create user-controlled wallets for them. By integrating this client-side SDK, your users can securely create wallets and make transactions using social accounts or email. If you choose the PIN authentication method, your users can input sensitive data, like PINs or security answers, in a secure way. Moreover, the SDK encrypts the request body sent by the application, protecting your users’ information.

Note:The Web and Mobile SDKs preserve the user keyshare with the individual, giving them complete control. You must use the SDKs with the user-controlled wallet product. Additionally, the Web and Mobile SDKs support only the user-controlled wallet product.

At Circle, we understand the importance of end-to-end security for your application and the need to create a tailored and seamless user experience for your end-users. Hence, Circle’s SDK also exposes functionality for you to customize the description and layout. See the Web SDK UI Customization API article to customize the SDK.

Install the SDKs

Install using npm:

Shell

npm install @circle-fin/w3s-pw-web-sdk

SDK architecture

You must use Web, iOS, or Android SDKs to access the user-controlled Programmable Wallet product. The SDK secures, manages, and communicates with your server to ensure your user’s keyshare, always stays with them and is not exposed to your servers. To learn more, see How it works.

SDK API references: enums

The Web SDK supports the API reference enums listed in the following sections.

ChallengeType

Enumerates the types of challenges supported.

JavaScript

enum ChallengeType {
  INITIALIZE,
  SET_PIN,
  RESTORE_PIN,
  CHANGE_PIN,
  SET_SECURITY_QUESTIONS,
  CREATE_WALLET,
  CREATE_TRANSACTION,
  ACCELERATE_TRANSACTION,
  CANCEL_TRANSACTION,
  CONTRACT_EXECUTION,
  SIGN_MESSAGE,
  SIGN_TYPEDDATA,
  SIGN_TRANSACTION,
  WALLET_UPGRADE,
  UNKNOWN,
}

ChallengeStatus

Enumerates the possible status for a challenge.

JavaScript

enum ChallengeStatus {
  COMPLETE,
  EXPIRED,
  FAILED,
  IN_PROGRESS,
  PENDING,
}

QuestionType

Enumerates the types of security questions.

JavaScript

enum QuestionType {
  DATE,
  TEXT,
}

ErrorCode

Enumerates the types of error code.

JavaScript

enum ErrorCode {
  unknown = -1,
  success = 0,
  apiParameterMissing = 1,
  apiParameterInvalid = 2,
  forbidden = 3,
  unauthorized = 4,
  retry = 9,
  customerSuspended = 10,
  pending = 11,
  invalidSession = 12,
  invalidPartnerId = 13,
  invalidMessage = 14,
  invalidPhone = 15,
  userAlreadyExisted = 155101,
  userNotFound = 155102,
  userTokenNotFound = 155103,
  userTokenExpired = 155104,
  invalidUserToken = 155105,
  userWasInitialized = 155106,
  userHasSetPin = 155107,
  userHasSetSecurityQuestion = 155108,
  userWasDisabled = 155109,
  userDoesNotSetPinYet = 155110,
  userDoesNotSetSecurityQuestionYet = 155111,
  incorrectUserPin = 155112,
  incorrectDeviceId = 155113,
  incorrectAppId = 155114,
  incorrectSecurityAnswers = 155115,
  invalidChallengeId = 155116,
  invalidApproveContent = 155117,
  invalidEncryptionKey = 155118,
  userPinLocked = 155119,
  securityAnswersLocked = 155120,
  notEnoughFunds = 155201,
  notEnoughBalance = 155202,
  exceedWithdrawLimit = 155203,
  minimumFundsRequired = 155204,
  invalidTransactionFee = 155205,
  rejectedOnAmlScreening = 155206,
  tagRequired = 155207,
  gasLimitTooLow = 155208,
  transactionDataNotEncodedProperly = 155209,
  fullNodeReturnedError = 155210,
  walletSetupRequired = 155211,
  lowerThenMinimumAccountBalance = 155212,
  rejectedByBlockchain = 155213,
  droppedAsPartOfReorg = 155214,
  operationNotSupport = 155215,
  amountBelowMinimum = 155216,
  wrongNftTokenIdNumber = 155217,
  invalidDestinationAddress = 155218,
  tokenWalletChainMismatch = 155219,
  wrongAmountsNumber = 155220,
  walletIsFrozen = 155501,
  maxWalletLimitReached = 155502,
  walletSetIdMutuallyExclusive = 155503,
  metadataUnmatched = 155504,
  userCanceled = 155701,
  launchUiFailed = 155702,
  pinCodeNotMatched = 155703,
  insecurePinCode = 155704,
  hintsMatchAnswers = 155705,
  networkError = 155706,
  invalidUserTokenFormat= 155718,
  walletIdNotFound = 156001,
  tokenIdNotFound = 156002,
  transactionIdNotFound = 156003,
  entityCredentialNotFound = 156004,
  walletSetIdNotFound = 156005,
}

SDK API references: interfaces

The Web SDK supports the interfaces listed in the following sections.

Configs

appSettings <AppSettings> Application settings object
authentication <Authentication> Authentication object
socialLoginConfig <SocialLoginConfig> Social login configuration object

AppSettings

Holds application settings.

appId <string> Application ID, retrieved from Circle Developer Services Console

Authentication

Holds authentication information.

userToken <string> User token
encryptionKey <string> Encryption key

LoginConfigs

Holds login configuration information.

google <object> | undefined (optional) Configuration object for Google login.
- clientId <string> Client ID for Google login
- redirectUri <string> Redirect URI for Google login
- selectAccountPrompt <boolean> | undefined Turn on/off the Google prompt for account selection
facebook <object> | undefined Configuration for Facebook login.
- appId <string> App ID for Facebook login
- redirectUri <string> Redirect URI for Facebook login
apple <FirebaseOptions> | undefined (optional) Configuration for Apple login, using Firebase.
deviceToken <string> Token used to identify the device
deviceEncryptionKey <string> Encryption key used for the device
otpToken <string> | undefined (optional) OTP token for verification

Definitions

google: Configuration object for Google login.
- clientId: The Client ID for Google login.
- redirectUri: The Redirect URI for Google login.
- selectAccountPrompt: Whether to prompt the user to select an account when signing in.
  Learn more about how prompt works in the Google OAuth API documentation (keyword: prompt).
facebook: Configuration object for Facebook login.
- appId: The App ID for Facebook login.
- redirectUri: The Redirect URI for Facebook login.
apple: Configuration for Apple login, using Firebase.
FirebaseOptions: The Firebase configuration object.
deviceToken: The token used to identify the device.
deviceEncryptionKey: The encryption key used for the device.
otpToken: The optional OTP token for verification.

SocialLoginProvider

APPLE <string> Apple login provider
FACEBOOK <string> Facebook login provider
GOOGLE <string> Google login provider

Challenge

Holds information about a challenge.

challengeId <string> Challenge Id

ChallengeResult

Holds the result of a challenge.

type <ChallengeType> Challenge type
status <ChallengeStatus> Challenge status
data <SignMessageResult | undefined> Sign message response

SignMessageResult

Holds the result of a sign message or sign typed-data challenge.

signature <string> Signature result after signing

SignTransactionResult

Holds the result of a sign transaction challenge.

signature <string> Signature result after signing
txHash <string> Transaction hash
signedTransaction <string> Signed transaction

SocialLoginResult

Holds the result of a social login.

userToken <string> User token
encryptionKey <string> Encryption key
refreshToken <string> Refresh token
oAuthInfo <object> OAuth information

EmailLoginResult

Holds the result of an email login.

userToken <string> User token
encryptionKey <string> Encryption key
refreshToken <string> Refresh token

OauthInfo

Holds the OAuth information.

provider <SocialLoginProvider> Social login
scope <string[]> OAuth scope
socialUserUUID <string> Social user UUID
socialUserInfo <object> Social user information
- email <string> Email
- name <string> Name
- phone <string> Phone

Error

Holds error information.

code <integer | undefined> Internal error code
message <string> Error message

SocialLoginCompleteCallback

Callback function for social login completion.

error <Error> Presents if error occurs
result <SocialLoginResult> | /<EmailLoginResult> | undefined > Presents and contains the result of the social login when the login is completed

SecurityQuestion

Holds information about a custom security question.

question <string> Custom security question
type <QuestionType> Type of the question

Localizations

Holds localization settings.

common <Common | undefined> The settings for common texts
confirmInitPincode <ConfirmPincode | undefined> The settings for ConfirmInitPincode screen
confirmNewPincode <ConfirmPincode | undefined> The settings for ConfirmNewPincode screen
enterPincode <EnterPincode | undefined> The settings for EnterPincode screen
initPincode <NewPincode | undefined> The settings for InitPincode screen
newPincode <NewPincode | undefined> The settings for NewPincode screen
recoverPincode <RecoverPincode | undefined> The settings for RecoverPincode screen
securityConfirm <SecurityConfirm | undefined> The settings for SecurityConfirm screen
securityIntros <SecurityIntros | undefined> The settings for SecurityIntros screen
securityQuestions <SecurityQuestions | undefined> The settings for SecurityQuestions screen
securitySummary <SecuritySummary | undefined> The settings for SecuritySummary screen
socialEmailConfirmationUI <SocialEmailConfirmationUI | undefined> The settings for socialEmailConfirmationUI screen

Common

Holds localization settings for common texts.

continue <string | undefined> Continue text
showPin <string | undefined> Show pin text
hidePin <string | undefined> Hide pin text
confirm <string | undefined> Confirm text

ConfirmPincode

Holds localization settings for ConfirmInitPincode or ConfirmNewPincode screen.

headline <string | undefined> Headline text
headline2 <string | undefined> Headline text 2
subhead <string | undefined> Subhead text

EnterPincode

Holds localization settings for EnterPincode screen.

headline <string | undefined> Headline text
headline2 <string | undefined> Headline text 2
subhead <string | undefined> Subhead text
forgotPin <string | undefined> Forgot pin text

NewPincode

Holds localization settings for InitPincode or NewPincode screen.

headline <string | undefined> Headline text
headline2 <string | undefined> Headline text 2
subhead <string | undefined> Subhead text

RecoverPincode

Holds localization settings for RecoverPincode screen.

headline <string | undefined> Headline text
headline2 <string | undefined> Headline text 2
subhead <string | undefined> Subhead text
answerInputHeader <string | undefined> Answer input header text
answerInputPlaceholder <string | undefined> Answer input placeholder text

SecurityConfirm

Holds localization settings for SecurityConfirm screen.

title <string | undefined> Title text
headline <string | undefined> Headline text
inputHeadline <string | undefined> Input headline text
inputPlaceholder <string | undefined> Input placeholder text
inputMatch <string | undefined> Input match text

SecurityIntros

Holds localization settings for SecurityIntros screen.

headline <string | undefined> Headline text
headline2 <string | undefined> Headline text 2
description <string | undefined> Description text
link <string | undefined> Link text

SecurityQuestions

Holds localization settings for SecurityQuestions screen.

title <string | undefined> Title text
questionHeader <string | undefined> Question header text
questionPlaceholder <string | undefined> Question placeholder text
requiredMark <string | undefined> Required mark text
answerHeader <string | undefined> Answer header text
answerPlaceholder <string | undefined> Answer placeholder text
answerHintHeader <string | undefined> Answer hint header text
answerHintPlaceholder <string | undefined> Answer hint placeholder text

SecuritySummary

Holds localization settings for SecuritySummary screen.

title <string | undefined> Title text
question <string | undefined> Question text

SocialEmailConfirmationUI

Holds localization settings for SocialEmailConfirmationUI screen.

title <string | undefined> Title text
headline <string | undefined> Headline text

TransactionRequest

Holds localization settings for TransactionRequest screen.

title <string | undefined> Title text
subtitle <string | undefined> Subtitle text
mainCurrency <object | undefined> Main currency details:
- amount <string | number | undefined> Main currency amount
- symbol <string | undefined> Main currency symbol
exchangeValue <object | undefined> Exchange currency details:
- amount <string | number | undefined> Exchange currency amount
- symbol <string | undefined> Exchange currency symbol
fromLabel <string | undefined> From label text
from <string | undefined> From address or label text
toLabel <string | undefined> To label text
to <string[] | undefined> To addresses
networkFeeLabel <string | undefined> Network fee label text
networkFeeTip <string | undefined> Network fee tooltip text
networkFee <string | undefined> Network fee amount
exchangeNetworkFee <string | undefined> Exchange network fee amount
totalLabel <string | undefined> Total label text
total <string[] | undefined> Total amounts
exchangeTotalValue <string | undefined> Exchange total value
rawTxDescription <string | undefined> Raw transaction description
rawTx <string | undefined> Raw transaction data

ContractInteraction

Holds localization settings for a contract interaction screen.

title <string | undefined> Title text
subtitle <string | undefined> Subtitle text
mainCurrency <object | undefined> Main currency details:
- amount <string | number | undefined> Main currency amount
- symbol <string | undefined> Main currency symbol
exchangeValue <object | undefined> Exchange value details:
- amount <string | number | undefined> Exchange value amount
- symbol <string | undefined> Exchange value symbol
fromLabel <string | undefined> From label text
from <string | undefined> From address or label text
contractAddressLabel <string | undefined> Contract address label text
contractInfo <string[] | undefined> Contract information
networkFeeLabel <string | undefined> Network fee label text
networkFeeTip <string | undefined> Network fee tooltip text
networkFee <string | undefined> Network fee amount
exchangeNetworkFee <string | undefined> Exchange network fee amount
totalLabel <string | undefined> Total label text
total <string[] | undefined> Total amounts
exchangeTotalValue <string | undefined> Exchange total value
dataDetails <object | undefined> Data details:
- dataDetailsLabel <string | undefined> Data details label
- callData <object | undefined> Call data:
  - callDataLabel <string | undefined> Call data label
  - data <string | undefined> Call data string
- abiInfo <object | undefined> ABI information:
  - functionNameLabel <string | undefined> Function name label
  - functionName <string | undefined> Function name string
  - parametersLabel <string | undefined> Parameters label
  - parameters <string[] | undefined> Parameters strings

SignatureRequest

Holds localization settings for a signature request screen.

title <string | undefined> Title text
contractName <string | undefined> Contract name
contractUrl <string | undefined> Contract URL
subtitle <string | undefined> Subtitle text
descriptionLabel <string | undefined> Description label text
description <string | undefined> Description text

EmailOtp

Holds localization settings for an email OTP (One-Time Password) screen.

title <string | undefined> Title text
subtitle <string | undefined> Subtitle text
resendHint <string | undefined> Resend hint text
resend <string | undefined> Resend button text

ThemeColor

Holds customization color settings.

backdrop <string | undefined> Backdrop color, e.g. '#000000'.
backdropOpacity <number | undefined> Backdrop opacity, e.g. 0.5.
divider <string | undefined> Divider color, e.g. '#808080' or 'grey'.
bg <string | undefined> Background color e.g. '#FFFFFF' or 'white'.
success <string | undefined> Success color, e.g. '#008000' or 'green'.
error <string | undefined> Error color, e.g. '#FF0000' or 'red'.
textMain <string | undefined> Main text color, e.g. '#000000' or 'black'.
textMain2 <string | undefined> Main text color 2, e.g. '#000000' or 'black'.
textAuxiliary <string | undefined> Auxiliary text color, e.g. '#000000' or 'black'.
textAuxiliary2 <string | undefined> Auxiliary text color 2, e.g. '#000000' or 'black'.
textSummary<string | undefined> Summary text color, e.g. '#000000' or 'black'.
textSummaryHighlight <string | undefined> Summary highlight text color, e.g. '#000000' or 'black'.
textPlaceholder <string | undefined> Placeholder text color, e.g. '#808080' or 'grey'.
pinDotBase <string | undefined> Fill color for pincode input dot, e.g. '#FFFFFF' or 'white'.
pinDotBaseBorder <string | undefined> Stroke color for pincode input dot, e.g. '#000000' or 'black'.
pinDotActivated <string | undefined> Fill color for inputted pincode input dot, e.g. '#0000ff' or 'blue'.
enteredPinText <string | undefined> Text color for entered pincode input, e.g. #000000 or black.
inputText <string | undefined> Text color for text input, e.g. #000000 or black.
inputBorderFocused <string | undefined> Outline color for text input on focused, e.g. '#0000ff' or 'blue'.
inputBorderFocusedError <string | undefined> Outline color for text input when error, e.g. '#FF0000' or 'red'.
inputBg <string | undefined> Background color for text input, e.g. '#FFFFFF' or 'white'.
inputBgDisabled <string | undefined> Background color for disabled text input, e.g. '#FFFFFF' or 'white'.
dropdownBg <string | undefined> Background color for dropdown, e.g. '#FFFFFF' or 'white'.
dropdownBorderIsOpen <string | undefined> Outline color for dropdown is open, e.g. '#0000ff' or 'blue'.
dropdownBorderError <string | undefined> Outline color for dropdown when error, e.g. '#FF0000' or 'red'.
mainBtnText <string | undefined> Text color for primary button, e.g. '#FFFFFF' or 'white'.
mainBtnTextDisabled <string | undefined> Text color for disabled primary button, e.g. '#FFFFFF' or 'white'.
mainBtnTextOnHover <string | undefined> Text color for primary button on hover, e.g. '#FFFFFF' or 'white'.
mainBtnBg <string | undefined> Background color for primary button, e.g. '#000000' or 'black'.
mainBtnBgOnHover <string | undefined> Background color for primary button on hover, e.g. '#000000' or 'black'.
mainBtnBgDisabled <string | undefined> Background color for disabled primary button, e.g. '#000000' or 'black'.
secondBtnText <string | undefined> Text color for secondary button, e.g. '#000000' or 'black'.
secondBtnTextDisabled <string | undefined> Text color for disabled secondary button, e.g. '#000000' or 'black'.
secondBtnTextOnHover <string | undefined> Text color for secondary button on hover, e.g. '#000000' or 'black'.
secondBtnBorder <string | undefined> Outline color for secondary button, e.g. '#000000' or 'black'.
secondBtnBorderOnHover <string | undefined> Outline color for secondary button on hover, e.g. '#000000' or 'black'.
secondBtnBgOnHover <string | undefined> Background color for secondary button on hover, e.g. '#FFFFFF' or 'white'.
secondBtnBorderDisabled <string | undefined> Outline color for disabled secondary button, e.g. '#FFFFFF' or 'white'.
plainBtnText <string | undefined> Text color for plain text button, e.g. '#000000' or 'black'.
plainBtnTextDisabled <string | undefined> Text color for disabled plain text button, e.g. '#000000' or 'black'.
plainBtnTextOnHover <string | undefined> Text color for plain text button on hover, e.g. '#000000' or 'black'.
plainBtnBg <string | undefined> Background color for plain text button, e.g. '#FFFFFF' or 'white'.
plainBtnBgOnHover <string | undefined> Background color for plain text button on hover, e.g. '#FFFFFF' or 'white'.
recoverPinHintTitle <string | undefined> Text color for recover pincode hint title, e.g. '#FFFFFF' or 'white'.
recoverPinHintTitleBg <string | undefined> Background color for recover pincode hint title, e.g. '#FFFFFF' or 'white'.
recoverPinHint <string | undefined> Text color for recover pincode hint, e.g. '#FFFFFF' or 'white'.
titleGradients <string[] | undefined> Background color for linear-gradient text, e.g. ['#B090F5', '#1AA3FF'].

Resources

Holds resource urls and properties, such as images or font-family settings. These resource properties should be hosted on a public server. SDK will load these resources from the urls provided.

naviClose <string | undefined> Close icon
naviBack <string | undefined> Back icon
securityIntroMain <string | undefined> Security intro main image
dropdownArrow <string | undefined> Dropdown arrow icon
selectCheckMark <string | undefined> Select check mark icon
securityConfirmMain <string | undefined> Security confirm main image
errorInfo <string | undefined> Error info icon
fontFamily <{ name?: string, url?: string } | undefined> Font family settings

CustomLinks

Holds custom links.

learnMoreUrl <string | undefined> Learn more link

Class Definition

The Web SDK supports the class definitions listed in the following sections.

W3SSdk

Constructor

Initializes a new instance of W3SSdk.

Methods

execute

Executes a challenge.

challengeId <string> Challenge ID
onCompleted <Function> Callback function
- error <Error> Presents if error occurs
- result<ChallengeResult> Presents when success

setAppSettings

Sets the application settings.

appSettings <AppSettings> Application settings object

setAuthentication

Sets the authentication information.

auth <Authentication> Authentication object

updateConfigs

Updates the configurations.

configs <Configs> Configurations object
onSocialLoginComplete <Function | undefined> Callback function
- error <Error> Presents if error occurs
- result <SocialLoginResult> | <\EmailLoginResult> | undefined> Presents and contains the result of the social login when the social login is completed

getDeviceId

Gets the device ID.

performLogin

Performs a social login.

provider <SocialLoginProvider> Social login provider

verifyOtp

Verifies the OTP.

execute

Executes a challenge.

challengeId <string> Challenge ID
onCompleted <Function | undefined> Callback function
- error <Error> Presents if error occurs
- result <ChallengeResult | SignMessageResult | SignTransactionResult | undefined> Presents and contains the result of the challenge when the challenge is completed

setCustomSecurityQuestions

Sets custom security questions.

questions <SecurityQuestion[] | undefined> Array of SecurityQuestion
requiredCount <integer | undefined> Required count of SecurityQuestion. The value is 2 by default.
securityConfirmItems <string[] | undefined> Array of customized disclaimers on SecurityConfirm screen. The value is undefined by default.

setLocalizations

Sets custom localizations

localizations <Localizations | undefined> Settings of Localizations

setResources

Sets custom resources

resources <Resources | undefined> Settings of Resources

setThemeColor

Sets custom theme colors

themeColor <ThemeColor | undefined> Settings of ThemeColor

setCustomLinks

Sets custom links

customLinks <CustomLinks | undefined> Settings of CustomLinks

setOnForgotPin

Sets callback function for ForgotPin button click event

onForgotPin <Function | undefined> Callback function
shouldCloseModalOnForgotPin <boolean | undefined> Should close modal on forgot pin click event

setOnResendOtpEmail

Sets callback function for Resend OTP Email button click event

onResendOtpEmail <Function | undefined> Callback function

Sample code

React.js

JavaScript

import React, { useCallback, useEffect, useState } from "react";
import { ToastContainer, toast } from "react-toastify";
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";
import { W3SSdk } from "@circle-fin/w3s-pw-web-sdk";

let sdk: W3SSdk;

function App() {
  useEffect(() => {
    sdk = new W3SSdk({
      configs: {
        appSettings: { appId: "someAppId" },
        authentication: {
          userToken: "someUserToken",
          encryptionKey: "someEncryptionKey",
        },
        socialLoginConfig: {},
      },
      socialLoginCompleteCallback: (error, result) => {
        if (error) {
          toast.error(`Social Login Error: ${error.message ?? "Error!"}`);
          return;
        }
        toast.success(`Social Login Success: ${result?.userToken}`);
      },
    });
  }, []);

  const [appId, setAppId] = useState(
    localStorage.getItem("appId") || "someAppId"
  );
  const [userToken, setUserToken] = useState(
    localStorage.getItem("userToken") || "someUserToken"
  );
  const [encryptionKey, setEncryptionKey] = useState(
    localStorage.getItem("encryptionKey") || "someEncryptionKey"
  );
  const [challengeId, setChallengeId] = useState(
    localStorage.getItem("challengeId") || "someChallengeId"
  );

  const onChangeHandler = useCallback(
    (setState, key) => (e) => {
      const value = e.target.value;
      setState(value);
      localStorage.setItem(key, value);
    },
    []
  );

  const onSubmit = useCallback(() => {
    sdk.setAppSettings({ appId });
    sdk.setAuthentication({ userToken, encryptionKey });

    sdk.execute(challengeId, (error, result) => {
      if (error) {
        toast.error(`Error: ${error?.message ?? "Error!"}`);
        return;
      }
      toast.success(`Challenge: ${result?.type}, Status: ${result?.status}`);
    });
  }, [appId, userToken, encryptionKey, challengeId]);

  return (
    <div className="p-4">
      <TextField
        label="App Id"
        onChange={onChangeHandler(setAppId, "appId")}
        value={appId}
      />
      <TextField
        label="User Token"
        onChange={onChangeHandler(setUserToken, "userToken")}
        value={userToken}
      />
      <TextField
        label="Encryption Key"
        onChange={onChangeHandler(setEncryptionKey, "encryptionKey")}
        value={encryptionKey}
      />
      <TextField
        label="Challenge Id"
        onChange={onChangeHandler(setChallengeId, "challengeId")}
        value={challengeId}
      />
      <Button variant="contained" color="primary" onClick={onSubmit}>
        Verify Challenge
      </Button>
      <ToastContainer />
    </div>
  );
}

Vanilla JavaScript

JavaScript

// Assume W3SSdk is globally available
let sdk = new W3SSdk({
  configs: {
    appSettings: { appId: 'someAppId' },
    authentication: {
      userToken: 'someUserToken',
      encryptionKey: 'someEncryptionKey'
    },
    socialLoginConfig: {}
  },
  socialLoginCompleteCallback: (error, result) => {
    if (error) {
      console.error(`Social Login Error: ${error.message ?? 'Error!'}`)
      return
    }
    console.log(`Social Login Success: ${result?.userToken}`)
  }
})

// Initialize settings
const initSettings = () => {
  sdk.setAppSettings({
    appId: 'someAppId',
  })
  sdk.setAuthentication({
    userToken: 'someUserToken',
    encryptionKey: 'someEncryptionKey',
  })
}

// Handle form submission
const handleSubmit = () => {
  const challengeId = document.getElementById('challengeId').value

  sdk.execute(challengeId, (error, result) => {
    if (error) {
      console.error(`Error: ${error?.message ?? 'Error!'}`)
      return
    }
    console.log(`Challenge: ${result?.type}, Status: ${result?.status}`)
  })
}

// Initialization
initSettings()

// Listen for button click event
document.getElementById('submitBtn').addEventListener('click', handleSubmit)sdk.execute(challengeId, (error, result) => {
  if (error) {
    toast.error(`Error: ${error?.message ?? 'Error!'}`)
    return
  }
  toast.success(`Challenge: ${result?.type}, Status: ${result?.status}`)
})

​Install the SDKs

​SDK architecture

​SDK API references: enums

​ChallengeType

​ChallengeStatus

​QuestionType

​ErrorCode

​SDK API references: interfaces

​Configs

​AppSettings

​Authentication

​LoginConfigs

​Definitions

​SocialLoginProvider

​Challenge

​ChallengeResult

​SignMessageResult

​SignTransactionResult

​SocialLoginResult

​EmailLoginResult

​OauthInfo

​Error

​SocialLoginCompleteCallback

​SecurityQuestion

​Localizations

​Common

​ConfirmPincode

​EnterPincode

​NewPincode

​RecoverPincode

​SecurityConfirm

​SecurityIntros

​SecurityQuestions

​SecuritySummary

​SocialEmailConfirmationUI

​TransactionRequest

​ContractInteraction

​SignatureRequest

​EmailOtp

​ThemeColor

​Resources

​CustomLinks

​Class Definition

​W3SSdk

​Constructor

​Methods

execute

setAppSettings

setAuthentication

updateConfigs

getDeviceId

performLogin

verifyOtp

execute

setCustomSecurityQuestions

setLocalizations

setResources

setThemeColor

setCustomLinks

setOnForgotPin

setOnResendOtpEmail

​Sample code

​React.js

​Vanilla JavaScript

Install the SDKs

SDK architecture

SDK API references: enums

ChallengeType

ChallengeStatus

QuestionType

ErrorCode

SDK API references: interfaces

Configs

AppSettings

Authentication

LoginConfigs

Definitions

SocialLoginProvider

Challenge

ChallengeResult

SignMessageResult

SignTransactionResult

SocialLoginResult

EmailLoginResult

OauthInfo

Error

SocialLoginCompleteCallback

SecurityQuestion

Localizations

Common

ConfirmPincode

EnterPincode

NewPincode

RecoverPincode

SecurityConfirm

SecurityIntros

SecurityQuestions

SecuritySummary

SocialEmailConfirmationUI

TransactionRequest

ContractInteraction

SignatureRequest

EmailOtp

ThemeColor

Resources

CustomLinks

Class Definition

W3SSdk

Constructor

Methods

Sample code

React.js

Vanilla JavaScript