How to Add Extra Security to Your Wallet with WalletKit Verify

Learn how to use Reown AppKit to Add Extra Security to Your Wallet with WalletKit Verify

App Verification is a first-of-its-kind layered security solution that enables wallets to help users protect themselves from phishing attacks, with robust architecture enabling wallets to support users in better identifying the veracity of a domain they are attempting to connect to.

In this tutorial, you will learn how to:

  1. Set up and Verify your domain on Reown Cloud.
  2. Configure WalletKit’s Verify API.

This guide takes approximately 10 minutes to complete.

Setup

In this section, you’ll learn how to set up and verify your domain on Reown Cloud.

Verify your Domain

First, navigate to cloud.reown.com and click on “Dashboard” in the sidebar. Then, scroll down to the “Project Domains” section. Finally, click “Configure Domains” to proceed.

Now, click on “Add Domain” and enter your domain’s URL. I will be using a URL that I deployed with Vercel.

After you have entered your domain’s URL, click on “Verify”.

A verification code will now be generated, which you need to update in your DNS records. Alternatively, you can upload a .txt file named walletconnect.txt that contains the verification code. After completing this step, click “Verify”.

You will now see that your domain has been verified.

Use Verify API with WalletKit

With WalletKit, you can provide a simple, secure way for your users to easily connect with thousands of apps and enjoy unbeaten experiences across connectivity, security, and communication.

For the purpose of this tutorial, the code snippet below assumes you are using a web-based framework or programming language to demonstrate how the Verify API works.

To check the Verify API validations and whether or not your user is interacting with potentially malicious app, you can do so by accessing the verifyContext included in the request payload.

...
walletKit.on("auth_request", async (authRequest) => {
  const { verifyContext } = authRequest
  const validation = verifyContext.verified.validation // can be VALID, INVALID or UNKNOWN
  const origin = verifyContext.verified.origin // the actual verified origin of the request
  const isScam = verifyContext.verified.isScam // true if the domain is flagged as malicious

  // if the domain is flagged as malicious, you should warn the user as they may lose their funds - check the `Threat` case for more info
  if(isScam) {
    // show a warning screen to the user
    // and proceed only if the user accepts the risk
  }

  switch(validation) {
    case "VALID":
      // proceed with the request - check the `Domain match` case for more info
      break
    case "INVALID":
      // show a warning dialog to the user - check the `Mismatch` case for more info
      // and proceed only if the user accepts the risk
      break
    case "UNKNOWN":
      // show a warning dialog to the user - check the `Unverified` case for more info
      // and proceed only if the user accepts the risk
      break
  }
})

There is a lot going on in the code snippet above, so let’s break it down and understand what is happening.

1. Listening for Authentication Requests:

The walletKit.on("auth_request", ...) event listener is designed to handle incoming authentication requests.

When the "auth_request" event is triggered, it executes an asynchronous callback function with an authRequest object containing details about the request.

2. Extracting Verification Context:

The authRequest object includes a verifyContext that holds key information about the request's origin and its validation status:

validation: Indicates the status of the domain’s verification. It can be:

"VALID": The request’s origin matches the expected domain.

"INVALID": There’s a mismatch between the origin and the expected domain.

"UNKNOWN": The origin could not be verified.

origin: The actual verified source of the request (e.g., domain or URL).

isScam: A flag (true/false) indicating whether the domain is marked as malicious.

Malicious Domain Handling:

If the domain is flagged as malicious (isScam === true), the code advises showing a warning screen to the user.

This warning highlights the potential risk of interacting with the request, such as losing funds.

3. Validation Handling via switch Statement: a. "VALID": b. "INVALID": c. "UNKNOWN":

The validation status determines the appropriate response to the request:

If the validation is "VALID", it means the origin is trusted, and the app can safely process the request.

If the validation is "INVALID", there’s a mismatch between the origin and the expected domain.

The application should display a warning dialog to alert the user about the potential risk.

If the validation is "UNKNOWN", the domain could not be verified. This might occur due to insufficient information or unsupported verification methods.

Like the "INVALID" case, a warning dialog should be shown to the user, and the request should proceed only with their explicit consent.

4. Security-Focused Flow:

This code is structured to prioritize security:

By flagging malicious domains (isScam) and halting automatic progression.

By requiring explicit user consent in cases where domain validation is either "INVALID" or "UNKNOWN".

This approach reduces the likelihood of users falling victim to scams or phishing attempts while maintaining flexibility for users to override warnings if they trust the origin.

You can read more about how Verify API works in-depth by reading our docs here.

Verify API Demo

You can explore examples of the intended Verify API flows using the following demo apps:

  • Demo Wallet
  • Demo App – You can toggle between the verification states by clicking on the gear icon and selecting the desired validation state before connecting to the wallet.
  • Demo Malicious App – This app is flagged as malicious, and the isScam parameter will be set to true in the verifyContext of the request.

Conclusion

And that’s it! You’ve now learned how to use the Verify API to determine whether the domain a user is trying to connect to is malicious.

What's Next?

If you're wondering how to use Reown for various use cases and build apps with great UX, feel free to check out our other blogs here.

Need help?

For support, please join the official Reown Discord Server.

Related articles

More articles