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
  • Link a Wallet to an Existing Account
  • Steps
  • 1. Setup Picket
  • Get your API keys
  • Install the Picket SDK
  • 2. Verify Wallet Ownership Client-Side with picket-js or picket-react
  • 4. Validate the user's access token server-side
  • 5. Link the wallet to the user's account
  1. Tutorials

Link a Wallet to a Web 2.0 Account

Picket can be used to verify wallet ownership for a user in an existing application. Once you've linked a wallet to a user's account, you start integrating web3 information into your app!

PreviousToken Gated Photo Board (React)NextIncremental Authorization (React)

Last updated 3 years ago

Link a Wallet to an Existing Account

In addition to enabling you to build new web3 native experiences from scratch, Picket can adapt your existing traditional web applications to the modern web3 world. Picket's authentication flow verifies wallet ownership, which allows you to link a wallet address to a user's profile. Once you've connected a wallet address to a user, you can integrate web3 information, like NFTs, into the user's profile by querying the blockchain all while knowing that the user is the owner of the verified wallet!

Steps

  1. Setup Picket

  2. Verify Wallet Ownership Client-Side with picket-js or picket-react

  3. Make a request to the app's server with the Picket access token

  4. Validate the user's access token server-side

  5. Link the wallet to the user's account

1. Setup Picket

Get your API keys

Join the Waitlist

To manage demand, we set up a waitlist for API key access. We're granting developers access as fast as we can. If you haven't already signed up, you can add yourself to the waitlist at .

Picket uses API keys to authorize your requests. Requests without an API key will result in an error. You can get your API key from your account There are two types of API keys

  • Publishable keys: These keys are used client-side and are meant for client-side libraries, like .

  • Secret keys: As the name suggests, these must be kept secret. They are meant for server-side libraries, like

curl https://picketapi.com/v1/{any_endpoint}
    -u pk_123_456_your_key 
import Picket from "@picketapi/picket-js"
const picket = new Picket('YOUR_PUBLISHABLE_KEY_HERE')

Install the Picket SDK

The best way to interact with our API is to use one of our official libraries:

Client-side (Browser) Libraries

Server-side Libraries

# Install via NPM
npm install --save "@picketapi/picket-js"
# Install via NPM
npm install --save "@picketapi/picket-react" 
# Install via NPM
npm install --save "@picketapi/picket-node"

Want to use Picket with other web-frameworks? Let us know at team@picketapi.com

2. Verify Wallet Ownership Client-Side with picket-js or picket-react

3. Make a request to the app's server with the Picket access token

Replace example.com and the example access token with your app's server route

curl example.com \
 -H 'Authorization: Bearer x.y.z'
const accessToken = "x.y.z"

await fetch("example.com", {
    method: "GET",
    headers: {
        Authorization: `Bearer ${accessToken}`
    }
});

4. Validate the user's access token server-side

Server-side libraries, like picket-node, require a secret API key and must only be used in a secure, server-side environment.

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

const picket = new Picket("sk_demo123");

// REPLACE code to get access token from client request
const accessToken = "";

try {
    const { walletAddress } = await picket.validate(accessToken);
    // save user's wallet address to the DB
} catch (err) {
    console.error("invalid access token!");
}

If there isn't a Picket server-side SDK for you language of choice, you can still use the Picket API

import requests

# REPLACE code to get access token from client request
access_token = '';

resp = requests.get(
    'https://picketapi.com/api/v1/auth/validate', 
    auth=('YOUR_PROJECT_SECRET_KEY', '')
)

# check for HTPP status code OK 
# extract wallet address

5. Link the wallet to the user's account

// Psuedo-code for saving a wallet address to a user's profile
const { walletAddress } = accessToken; 
db.updateUserProfile({ walletAddress });

Authorization to the API is performed via . Provide your API key as the basic auth username value. You do not need to provide a password. API Authorization is handled for you in any of Picket's SDKs.

Follow the guide

๐Ÿ•น๏ธ
๐Ÿ”—
picketapi.com
dashboard.
picket-js
picket-node
HTTP Basic Auth
picket-js
picket-react
picket-node
Wallet Authentication