Picket Docs
  • ๐Ÿ‘‹Welcome to Picket
  • Quick Start Guides
    • ๐Ÿš€Quick Start Guides
      • โš™๏ธStart Here: Setup
      • ๐Ÿ”Wallet Login
      • ๐Ÿช™Token Gating (Ethereum / EVM)
      • ๐ŸคบToken Gating (Solana)
      • ๐Ÿคนโ€โ™‚๏ธIncremental Token Gating
      • โ›”Restrict Access to Specific Wallets
      • ๐Ÿ”‘Working with Access Tokens
  • Reference
    • ๐ŸŽ“Concepts
      • ๐ŸŒŠAuth Flow
      • ๐Ÿ—ƒ๏ธConnect
      • โœ๏ธSignatures
      • ๐Ÿ”Authentication and Authorization
      • ๐ŸคนIncremental Authorization
      • ๐Ÿช™Access Tokens
      • ๐ŸงชTesting
      • โ‰๏ธErrors
      • โ›“๏ธSupported Blockchains
      • ๐ŸŒSupported Languages (Localization)
      • ๐ŸŽจModal Themes
      • ๐Ÿ’ฟOpen Source Web3 Client Libraries
    • ๐Ÿ“šLibraries and SDKs
      • Javascript Library - picket-js
      • React SDK - picket-react
      • Node.js Library - picket-node
      • Go Library - picket-go
      • Python Library - picket-python
    • ๐Ÿ”ฅIntegrations
      • ๐ŸŒˆPicket Authentication with RainbowKit
      • โšกSupabase
      • โ˜๏ธAmazon Cognito
      • ๐Ÿ›๏ธPicket Shopify App - Merchant Documentation
      • ๐Ÿ›’Picket BigCommerce App - Merchant Documentation
    • ๐Ÿ“–API Reference
      • Projects & API Keys
      • Auth
      • Chains
      • Wallets
      • Contracts
      • OAuth 2.0
  • ๐Ÿ•น๏ธTutorials
    • ๐ŸŒŽSign-In with Wallet (React)
    • ๐ŸฐToken Gated Photo Board (React)
    • ๐Ÿ”—Link a Wallet to a Web 2.0 Account
    • ๐ŸคIncremental Authorization (React)
Powered by GitBook
On this page
  • Requirements
  • Wallet Authentication
  • Using Authenticated Wallets for On Chain Interactions
  • Using Access Tokens
  1. Quick Start Guides
  2. Quick Start Guides

Wallet Login

A guide to start authenticating wallets in minutes.

PreviousStart Here: SetupNextToken Gating (Ethereum / EVM)

Last updated 2 years ago

Requirements

Before continuing make sure you've followed the

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 .

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

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.
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 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 .

You successfully authenticated a user!

The user has proven ownership of their wallet.

You can now also use the 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 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

๐Ÿš€
๐Ÿ”
setup guide
โš™๏ธStart Here: Setup
access token
supported blockchains
access token
/auth/validate
working with access tokens guide
๐Ÿ”‘Working with Access Tokens