🤹♂
Incremental Token Gating
A guide to start incremental token gating anything in minutes.
If you are unfamiliar with token gating, we recommend reading one of the other token gating guides first
To understand the use cases for incremental token gating, read the incremental authorization concept page
You can use Picket to token gate anything. Incremental token gating, also know as incremental authorization, allows you to token gate after the user is logged in. If the user meets the token ownership requirements, we'll automatically handle updating their access token for you. This makes all future checks for the same token ownership lightning fast.
Javascript
React
import Picket from "@picketapi/picket-js";
const picket = new Picket('YOUR_PUBLISHABLE_KEY_HERE');
const { accessToken, user } = await picket.login({
// specify the chain
chain: "polygon"
});
import { PicketProvider, usePicket } from "@picketapi/picket-react";
function MyApp({ children }) {
return (
<PicketProvider apiKey="YOUR_PUBLISHABLE_KEY_HERE">
{children}
</PicketProvider>
);
}
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: "polygon"
)}}>
Login with Wallet
</button>
</div>
)
}
// user is logged in 🎉
const { user } = authState;
const { displayAddress } = user;
return (
<div>
<p>You are logged in as {displayAddress} </p>
<button onClick={() => logout()}>Logout</button>
</div>
)
}
Once the user is logged, you can authorize for specific requirements. This can be used to prevent users from clicking a button or accessing page if they don't have certain tokens.
Javascript
React
// after logging in a user
// authorization automatically happens on the same chain the user logged in on
const allowed = picket.isCurrentUserAuthorized({
requirements: {
contractAddress: "YOU_CONTRACT_ADDRESS"
}
});
console.log("is the current user authorized?", allowed);
import { useEffect } from "react";
const requirements = {
contractAddress: "0x_CONTRACT_ADDRESS"
};
function MyTokenGatedPage() {
const {
isAuthenticating,
isAuthorizing,
isAuthenticated,
authState,
logout,
login
} = usePicket();
// on load check user meets the requirements
useEffect(() => {
// first check cache
// if already authorized, return early
if (isAlreadyAuthorized({requirements})) return;
// asynchronously check requirements
isAuthorized({ requirements });
}, []);
// user is logging in
if (isAuthenticating || isAuthorizing) return "Loading";
// user is not logged in
if (!isAuthenticated) return "You aren't logged in";
if (!isAlreadyAuthorized({requirements})) {
return "You aren't authorized for this page";
}
// user is logged in 🎉
const { user } = authState;
const { displayAddress, tokenBalances } = user;
const tokenBalance = tokenBalances.contractAddress[requirements.contractAddress]
return (
<div>
<p>You are logged in as {displayAddress} and have enough tokens to view this page!</p>
<p>Your token balance is </p>
</div>
)
}
You successfully logged in a user and token gated content!
Every time a user is successfully authorized for a new requirement, their access token will automatically be updated to reflect it.
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 7mo ago