Gated Content

A gated content mechanism can be used to limit access to some content based on the membership users have. Here is a simple flow chart of the purchase process. You can click on the item to see the code.

User clicks on the buy button to purchaseSmart Contract record user purchase
Purchase Request javascript
const purchaseMembership = async (
) => {
const provider = new ethers.providers.Web3Provider(window.ethereum);
const signer = provider.getSigner();
const contract = new ethers.Contract(contractAddress, contractAbi, provider);
const signedContract = contract.connect(signer);
const options = { value: ethers.utils.parseEther(price) };
const tx = await signedContract.purchaseMembership(membershipId, options);
await tx.wait();

After the purchase when clicking on the content we need to decide if the user actually has the access to content. We need to test two things here

  • The address user sends actually belongs to them
  • User has bought that content with their address

You can check if that address has access to the content they request by checking the record on the smart contract. To verify the address belongs to them. We need to sign the message use sends to BE. In ethers.js signer.signMessage function can be used to do this. Here is the flow for user accessing the content.

User tries to access the contentRequest signature if not presentVerify signed messageCreate a signed messageRetrive address purchased itemsSend content to FE if has accessBE
Create signed javascript
const signMessage = async (message) => {
const provider = new ethers.providers.Web3Provider(window.ethereum);
const signer = provider.getSigner();
const signedMessage = await signer.signMessage(message);
return signedMessage

The sign process only needs to happen once and you can keep it until the user changes account.

Try buying membership and switching account here. When you are using the same account you only need to sign once. After switching the account you will need to sign again

Purchase Membership

You can purchase a membership by clicking on Buy button

Red Membership


Blue Membership


Green Membership

To purchase a membership please connect to MetaMask and choose Rinkby network

After purchasing a membership releated content will be unlocked. (User can click on the link anyway. But the content will not be loaded if the user does not have that membership)

Full Contract

Memberships solidity

Deployed Contract

Contract - Memberships