⛔
Restrict Access to Specific Wallets
A guide to restricting access based on a list of allowed wallet addresses
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. Javascript
React
Curl
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);
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 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
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
React
Curl
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);
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 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"]
}'
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.
Last modified 10mo ago