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

Sign-In with Wallet (React)

PreviousOAuth 2.0NextToken Gated Photo Board (React)

Last updated 2 years ago

For a step by step tutorial for allowing users to sign in to your app with their wallet, follow the README on .

Alternatively, you can and run the example to preview the final results by following these instructions:

Step 1: Clone the repository

Paste the following into your terminal and hit enter:

git clone git@github.com:picketapi/picket-example-hello-world.git

Step 2: Install dependencies

Cd into the cloned directory

cd picket-example-hello-world/

Install dependencies from package.json by running the following command in your terminal.

npm install

Step 3: Insert your publishable API key

Open the repository in any code editor and locate the file named _app.tsx

Within that file you'll see a line of code that looks like this:

const apiKey = "YOUR_PUBLISHABLE_KEY_GOES_HERE";

Replace YOUR_PUBLISHABLE_KEY_GOES_HERE with your publishable key, which you can find on your picket once you have logged in.

Step 4: Run App and Test

Run the following in your terminal to run the app:

npm run dev

To test the app go to any browser and go to localhost:3000 to see the following:

You can now click on that button to experience log in for yourself. You also have the cloned repository on your computer for inspection. You can mess with it to learn and start building your next project.

If you have any issues getting to this point, feel free to reach out to us at

๐Ÿ•น๏ธ
๐ŸŒŽ
Github
clone the repository
dashboard
team@picketapi.com