Crypto Wallets

Crypto wallets allow users to hold digital assets, like cryptocurrencies and NFTs, and easily cryptographically authenticate themselves on a blockchain.

Methods

The SDK provides methods that can be used to authenticate a user via their crypto wallet.

To call these methods, Crypto Wallets must be enabled in the SDK configuration page of the Stytch dashboard.

Authenticate start

Wraps Stytch's Crypto Wallet Authenticate Start endpoint. Call this method to prompt the user to sign a challenge using their crypto wallet.

Load the challenge data by calling cryptoWallets.authenticateStart().

You'll then pass this challenge to the user's wallet for signing, you can pass this challenge by using the crypto provider's built-in API and by including the crypto_wallet_address and challenge that is provided from cryptoWallets.authenticateStart(). See Ethereum's EIP-1193 for an example of Ethereum's provider API.

Method parameters

crypto_wallet_type* string
crypto_wallet_address* string
import React, { useCallback } from 'react';
import { useStytch } from '@stytch/react';

export const Login = () => {
  const stytchClient = useStytch();

  const trigger = useCallback(async () => {
    /* Request user's address */
    const [crypto_wallet_address] = await ethereum.request({
      method: 'eth_requestAccounts',
    });

    /* Ask Stytch to generate a challenge for the user */
    const { challenge } = await stytchClient.cryptoWallets.authenticateStart({
      crypto_wallet_address,
      crypto_wallet_type: 'ethereum',
    });

    /* Ask the user to sign the challenge, this takes place on your frontend and uses the browser's built-in crypto provider API. */
    const signature = await ethereum.request({
      method: 'personal_sign',
      params: [challenge, crypto_wallet_address],
    });
  });

  /* Send the signature back to Stytch for validation */
  /* await stytchClient.cryptoWallets.authenticate({
      crypto_wallet_address,
      crypto_wallet_type: 'ethereum',
      signature,
      session_duration_minutes: 60,
    });
  }, [stytchClient]); */

  return <button onClick={trigger}>Sign in with Ethereum</button>;
};

RESPONSE

200
{
  "challenge": "Signing in with Project: 7_EPetPqfdEiDCJtgad6-xsXytN3Ee9tx6mdRTQK3fC7-J2PDxpP1GAvYB9Ic4E09h-K88STiRIzKSGP",
  "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141"
  "status_code": 200
}

Authenticate

Wraps Stytch's Crypto Wallet Authenticate Start endpoint. Call this method to prompt the user to sign a challenge using their crypto wallet.

Load the challenge data by calling cryptoWallets.authenticateStart().

You'll then pass this challenge to the user's wallet for signing, you can pass this challenge by using the crypto provider's built-in API and by including the crypto_wallet_address and challenge that is provided from cryptoWallets.authenticateStart(). See Ethereum's EIP-1193 for an example of Ethereum's provider API.

Method parameters

crypto_wallet_type* string
crypto_wallet_address* string
signature* string
session_duration_minutes* string
import React, { useCallback } from 'react';
import { useStytch } from '@stytch/react';

export const Login = () => {
  const stytchClient = useStytch();

  const trigger = useCallback(async () => {
    /* Request user's address */
    /* const [crypto_wallet_address] = await ethereum.request({ 
      method: 'eth_requestAccounts',
    }); */

    /* Ask Stytch to generate a challenge for the user */
    /* const { challenge } = await stytchClient.cryptoWallets.authenticateStart({
      crypto_wallet_address,
      crypto_wallet_type: 'ethereum',
    }); */

    /* Ask the user to sign the challenge, this takes place on your frontend and uses the browser's built-in crypto provider API. */
    /* const signature = await ethereum.request({
      method: 'personal_sign', 
      params: [challenge, crypto_wallet_address],
    }); */

    /* Send the signature back to Stytch for validation */
    await stytchClient.cryptoWallets.authenticate({
      crypto_wallet_address,
      crypto_wallet_type: 'ethereum',
      signature,
      session_duration_minutes: 60,
    });
  }, [stytchClient]);

  return <button onClick={trigger}>Sign in with Ethereum</button>;
};

RESPONSE

200
{
  "challenge": "Signing in with Project: 7_EPetPqfdEiDCJtgad6-xsXytN3Ee9tx6mdRTQK3fC7-J2PDxpP1GAvYB9Ic4E09h-K88STiRIzKSGP",
  "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141"
  "status_code": 200
}

UI components

The SDK also comes with a pre-built UI component for our Crypto wallets product. It wraps our authenticate_start and authenticate Crypto wallet API endpoints, which finds an existing user or creates a new user and authenticates them with their wallet.

To add Crypto wallets to the login UI, add SDKProductTypes.crypto to the products array in the configuration.

To see all authentication and customization options, see the UI config section below.

import React from 'react';
import { Products } from '@stytch/vanilla-js';
import { StytchLogin } from '@stytch/react';

const config = {
  products: [Products.crypto],
};

export const Login = () => {
  return <StytchLogin config={config} />;
};