Bonus: Complete a Challenge with WebSDK

How to Verify a Challenge Using Circle’s Web3 SDK

Introduction

In this lesson, we’ll walk through how to verify a challenge when working with user-controlled wallets using Circle’s Web3 SDK. This is a crucial part of securing operations like wallet creation and token transfers.

Step 1: Review Wallet Balance and Initiate Transaction

To begin, we check the wallet balance to ensure there are sufficient funds.

npm run checkWalletBalance

In this example, the wallet contains 20 USDC. For demonstration, we’re transferring tokens to the same wallet.

To initiate the transaction:

npm run initiateTransaction

This command returns three important values:

• userToken
• encryptionKey
• challengeID

Step 2: Verifying the Challenge

We move to the wallet creation interface from the previous project. Although the context is different (user-controlled wallet vs transaction), the verification process remains the same.

You’ll need the following parameters:

• App ID
• User Token
• Encryption Key
• Challenge ID

Once these are filled, clicking "Verify Challenge" and entering your password will initiate the verification process.

After submission, you should see:

• An outbound and inbound transfer on the website
• A state change to "confirmed" and then "complete"

This demonstrates that the challenge flow works successfully for user operations.

Step 3: How Challenge Execution Works

Code Structure: Using the Web3 SDK

All the logic for challenge handling is in createWalletForm.jsx under components. Here’s how it’s implemented:

Install the SDK:

• npm install

Initialize the SDK using useEffect in React. This prepares the SDK for use.

Load Credentials: App ID, User Token, Encryption Key, and Challenge ID are pulled from local storage or passed through props.

Authentication:

• SDK is configured with app settings (appID)
• Authenticated with userToken and encryptionKey

Execute Challenge:

• await sdk.execute(challengeID);
• If successful, you receive a confirmation. If there's an error, it is caught and handled in the catch block.

Step 4: User Interface

The UI includes fields to input:

• App ID
• User Token
• Encryption Key
• Challenge ID

There's a button to "Verify Challenge", linked to the onSubmit function which calls the SDK execution.

Summary

Here’s a high-level summary of the challenge verification workflow:

• Step 1: Initialize the SDK
• Step 2: Set App Settings
• Step 3: Authenticate with User Credentials
• Step 4: Execute Challenge using sdk.execute(challengeID)

This process is straightforward and integrates well with front-end frameworks like React. You already have the code; working through it directly will help you become comfortable using it in your projects.