Launching Drop-in UI support for Web3 Logins with Ethereum and Solana in the Stytch SDK

Latest

Product

May 31, 2022

Author: Reed McGinley-Stempel

Today, the Stytch JavaScript SDK is launching UI support for Web3 authentication for all wallets built on the Ethereum or Solana blockchains. As the future of online identity and experiences take shape, our goal is to equip your product with straightforward tools to interact with these new means of authentication. Web3 login support in the Stytch SDK is the simplest way to build crypto wallet authentication into any Web2 or Web3 application.

This product update includes headless SDK methods you can attach to your auth flows for crypto wallet auth as well as customizable UX flows we’ve designed to easily guide your end users through the process.

Supporting crypto wallet auth could mean you aim to incorporate blockchain elements into your core product or simply want to provide login routes for early technology adopters — whatever your Web3 appetite, the JavaScript SDK can help assist.

Building for user-owned identity

A focal point of Web3 is shifting the ownership of data that defines our online selves from companies back to the individual, as opposed to the many accounts and credentials that we hand off to sites and apps. Digital wallets running on protocols like Ethereum and Solana have paved a path to moving around the internet in a new way. For products supporting these Web3 logins, one’s wallet acts as the single touchpoint they need to provide for various authentication, identity, and payment actions required throughout your UX.

By the numbers, popular wallets like Coinbase, Metamask, and Phantom account for over 13 million users on Chrome browsers alone, with an even broader base of wallet extensions and mobile apps beyond that. As consumers develop more opinions on who has access to their data and when, supplying a wallet auth option can help users log in on their own terms.

Designing wallet detection for Web3 logins

Connecting to apps via a wallet also presents a new frontier in auth UX, as users might own one of any number of the crypto wallets in circulation. With lightweight, high-converting experiences as our design focus at Stytch, we’ve built automatic wallet detection that will present only Web3 logins that are relevant to each individual user, rather than imposing an exhaustive wallet catalog. 

Knowing that your end users will vary widely in terms of what wallets they carry — and whether they’re yet involved enough with Web3 to have a wallet at all — we’ve designed flows that account for a diverse set of scenarios while preventing clutter.

Putting it all together

Let’s look at an example of combining crypto wallet logins with the SDK’s user management functions to determine whether we render a login experience or present the logged in user’s wallet address:

import { useStytchUser, SDKProductTypes, Stytch } from '@stytch/stytch-react';

const App = () => {
  const loginOrSignupViewConfig = {
    products: [SDKProductTypes.crypto],
  };

  const user = useStytchUser();

  if (!user) {
    return (
      <Stytch
        loginOrSignupView={loginOrSignupViewConfig}
        publicToken={'YOUR PUBLIC TOKEN'}
      />
    );
  } else {
    return <div>{user.crypto_wallets[0].crypto_wallet_address}</div>;
  }
};

Use the all-in-one Stytch component for a UX flow you can modify and insert directly into your application, or attach the SDK methods to UI elements you’ve designed to create your own experience.

Getting Started

The Stytch docs contain the full SDK reference and associated guides on how to get up and running with this new implementation route. If you’re looking for a low-friction way to get up and running with password-free auth, you can register a developer account here or contact support@stytch.com.

SHARE

Get started with Stytch