⛔Restrict Access to Specific Wallets

A guide to restricting access based on a list of allowed wallet addresses

Requirements

Before continuing make sure you've followed the setup guide

⚙️pageStart Here: Setup

Restrict Access to Specific Wallets

You can use Picket to gate access by a list of allowed wallets. All you need to do is pass the allowedWallets requirements to the login() function.

Login User w/ a Allowed Wallet List

Javascript

import Picket from "@picketapi/picket-js";

const picket = new Picket('YOUR_PUBLISHABLE_KEY_HERE');

// Restrict access to a set of predefined wallets 
const requirements = {
    allowedWallets: ["0xYOUR", "0xWALLET", "0xADDRESSES","0xHERE"]
}

const { accessToken,  user } = await picket.login(requirements);
console.log(user);

React

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

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

// Restrict access to a set of predefined wallets
const requirements = {
    allowedWallets: ["0xYOUR", "0xWALLET", "0xADDRESSES","0xHERE"]
}


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(requirements)}>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",
      "allowedWallets": ["0xYOUR", "0xWALLET", "0xADDRESSES","0xHERE"]
    }'

You successfully restricted access to specific wallets

The returned access token can now act as secure proof of wallet ownership until expiration. It can be passed server side and verified there in order to restrict resources to specific wallets

Allowed Wallets and Token Ownership Requirements

Allowed wallet lists can be used in combination with token ownership requirements.

If both allowedWallets and token ownership requirements are passed to the login function, then the user will be granted access if they either are on the allowed wallets list or meet the token ownership requirements.

Testing Tip

Using both allowedWallets and token ownership requirements can be helpful for testing a token-gating page, which you are developing, but don't own the necessary tokens for.

Javascript

import Picket from "@picketapi/picket-js";

const picket = new Picket("YOUR_PUBLISHABLE_KEY_HERE");

// Restrict access to a set of predefined wallets or token holders
const requirements = {
    // optional. The default chain is the Ethereum Mainnet
    chain: "ethereum",
    // Replace this example address with whichever contract you are verifying ownership for
    contractAddress: "0x8a90cab2b38dba80c64b7734e58ee1db38b8992e", 
    // Replace with minimum balance you want to verify users' currently hold, 
    // or omit if any number of tokens is sufficient
    minTokenBalance: 1, 
    allowedWallets: ["0xYOUR", "0xWALLET", "0xADDRESSES","0xHERE"]
}

const { accessToken,  user } = await picket.login(requirements);
console.log(user);

React

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

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

// Restrict access to a set of predefined wallets
// Restrict access to a set of predefined wallets or token holders
const requirements = {
    // optional. The default chain is the Ethereum Mainnet
    chain: "ethereum",
    // Replace this example address with whichever contract you are verifying ownership for
    contractAddress: "0x8a90cab2b38dba80c64b7734e58ee1db38b8992e", 
    // Replace with minimum balance you want to verify users' currently hold, 
    // or omit if any number of tokens is sufficient
    minTokenBalance: 1, 
    allowedWallets: ["0xYOUR", "0xWALLET", "0xADDRESSES","0xHERE"]
}


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(requirements)}>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",
      "chain": "ethereum",
      "contractAddress": "0xCONTRACT_ADDRESS",
      "minTokenBalance": 1
      "allowedWallets": ["0xYOUR", "0xWALLET", "0xADDRESSES","0xHERE"]
    }'

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