🔐Wallet Login

A guide to start authenticating wallets in minutes.

Requirements

Before continuing make sure you've followed the setup guide

⚙️pageStart Here: Setup

Wallet Authentication

The easiest way to authenticate a wallet is with one of our client libraries. Simply call the login() method and everything will be handled for you. A successful wallet authentication will return an access token.

Take a look at how you can initiate the authentication flow by using our official libraries, or via curl:

Javascript

import Picket from "@picketapi/picket-js";
const picket = new Picket('YOUR_PUBLISHABLE_KEY_HERE');
 
const { accessToken, user } = await picket.login({ chain: "ethereum" });

console.log(user);//Logs the user object for your inspection.

React

import { PicketProvider, usePicket } from "@picketapi/picket-react";

function MyApp({ children }) {
  return (
    <PicketProvider apiKey="YOUR_PUBLISHABLE_KEY_HERE">
      {children}
    </PicketProvider>
  );
}

// set this to the chain you want to authenticate users for
// if the chain parameters is omitted, it will default to the ethereum mainnet
const chain = "ethereum"; // "solana"

function MySecurePage() {
  const { 
          isAuthenticating, 
          isAuthenticated, 
          authState, 
          logout,
          login
          } = usePicket();
  
  // user is logging in
  if (isAuthenticating) return "Loading";

  // user is not logged in
  if (!isAuthenticated) {
      return (
        <div>
            <p>You are not logged in!</p>
            <button onClick={() => login({ chain })}>
                Login with Wallet
            </button>
        </div>
      )
  }

  // user is logged in 🎉
  const { user } = authState;
  const { walletAddress } = user;
  
  return (
    <div>
       <p>You are logged in as {walletAddress} </p>
       <button onClick={() => logout()}>Logout</button>
    </div>
  )
}

curl

curl https://picketapi.com/api/v1/auth \
    -X POST \
    -u PROJECT_SECRET_KEY \
    -H 'Content-Type: application/json' \
    -d '{
      "walletAddress": "0xWALLET_ADDRESS",
      "signature": "SUPER_SECRET_SIGNATURE"
    }'

To authenticate users on other blockchains, simply change out the chain parameter within the picket.login() call from "ethereum" to whichever chain you want to authenticate users on. To see which other chains you can choose to authenticate users on, check out our supported blockchains.

You successfully authenticated a user!

The user has proven ownership of their wallet.

You can now also use the access token in future requests to your backend to verify wallet ownership without requiring any future user interaction (until token expiration).

To validate the token from your backend you can call /auth/validate with the accessToken in the body of the request.

Good to know: The login() method can be used to both authenticate wallets and verify token ownership for token gating.

• To verify ownership, simply include a contract address and minimum balance as parameters.

• To only authenticate the wallet, call the method with no parameters.

Using Authenticated Wallets for On Chain Interactions

(Optional) Obtaining a Provider for Future On Chain Interactions

The above example verifies that the user owns their wallet and provides you with a JWT to repeatedly validate without further user interaction. If your app needs to use the users wallet for any other on chain interactions, you can optionally connect the users wallet to your site. Simply add picket.connect() before you call which returns a reference to a provider that can be used for further on-chain operations via your web3 library of choice.

import Picket from "@picketapi/picket-js"
const picket = new Picket('YOUR_PUBLISHABLE_KEY_HERE')
import { ethers } from "ethers";


const { walletAddress, signature, provider } = await picket.connect();
const { accessToken } = await picket.login({ walletAddressess, signature });

// use provider for other on-chain operation
const wallet = new ethers.providers.Web3Provider(provider);
const signer = wallet.getSigner();
const balance = await signer.getBalance();

Using Access Tokens

Congrats 🎉 your user is now successfully logged in. After authenticated/authorizing a user, you get an access token. You can use this access token to make secure requests to your backend. Read more in the working with access tokens guide

🔑pageWorking with Access Tokens