
Unlock is a protocol. Like any other protocol, it should not belong to anyone but its community of users and adopters. Today, we're very excited to introduce Unlock Discount Tokens and start the journey toward a fully decentralized protocol, where users co-own the protocol, as well as earn rewards for their use!

Don't forget to check the [step-by-step upgrades and deployments as documented on our wiki](https://github.com/unlock-protocol/unlock/wiki/The-Path-to-UDT!)!

![Decentralizing Unlock](/images/blog/launching-unlock-discount-tokens/decentralized-unlock.jpg)

# How does UDT work?

The Unlock Discount Token (UDT) is an **optional** ERC20 token that exists to add incentives to actors who are willing to grow and use the Unlock Protocol and network as well as progressively give them control of future upgrades. The smart contract which mints UDT has been deployed to the Ethereum main network and can be found at [`0x90de74265...`](https://etherscan.io/token/0x90de74265a416e1393a450752175aed98fe11517).

Unlock Discount Tokens are minted and granted as rewards upon key purchases to an address designated in the key purchase call, as shown on [this transaction for example](https://etherscan.io/tx/0xb0e5f95ea980c1f096a841e5507f465827411cc29f80f8b95971a5241d9e81bb). Like all of our contracts, it is fully verified on Etherscan and you can access the full [source code on GitHub](https://github.com/unlock-protocol/unlock/)!

We pre-mined 1,000,000 tokens and we'll distribute some of them to early investors and adopters soon, but this pre-mine will also quickly become a minority stake as the supply of tokens will grow as the network grows, since new tokens can be minted for every new key purchase.

As of now, the Unlock and UDT contracts are upgradable using OpenZeppelin and "owned" by a Gnosis multisig wallets whose signers are Unlock employees. Our goal is to soon decentralize that mechanism so that upgrades can only be triggered by UDT holders, after a voting process through a DAO, where votes are weighted by UDT ownership!

**Additionally, the first upgrade that we will then submit will add a mechanism that lets UDT holders claim discounts on their key purchases!**

Our [wiki provides a long description](https://github.com/unlock-protocol/unlock/wiki/The-Unlock-Discount-Tokens) of how UDT works.

# How can I earn UDT?

From now on, there is only a single way to create (and earn) new tokens: making key purchases. The number of tokens minted is based on the value of the purchase relative to the size of the overall network. This means that when the network is small, the number of tokens minted will be relatively larger than when the network is getting large. **This rewards early adopters more**!

The number of tokens minted is also capped to the gas spent by the transaction, so that it is always cheaper to purchase UDT from an exchange [such as Uniswap](https://app.uniswap.org/#/add/ETH/0x90DE74265a416e1393A450752175AED98fe11517) than it would be to purchase keys for yourself and earn tokens doing it.

It's important to note that even though the supply of tokens will grow forever as the network grows, the growth of the supply will slow down forever as well, which means that it is much easier to accumulate tokens in the early days of the network than once it will be larger.

# What is next?

The next step toward a fully decentralized Unlock Protocol is to start working on moving away from our multisignature based upgrades to upgrades driven by a Decentralized Autonomous Organization. This will be our focus in the next few months.

We will also work on allowing token holders to claim discounts on their purchases as we think it is important to add financial rewards to stakeholders.

Do you want to learn more? Are you interested in joining us? [Reach out on Discord](https://discord.gg/Ah6ZEJyTDp)!


As an open protocol for memberships, we want Unlock to belong to its users. Today we are introducing the protocol's native token.

Starting the decentralization of Unlock!

Launching Unlock Discount Tokens

<p>Unlock is a protocol. Like any other protocol, it should not belong to anyone but its community of users and adopters. Today, we're very excited to introduce Unlock Discount Tokens and start the journey toward a fully decentralized protocol, where users co-own the protocol, as well as earn rewards for their use!</p>
<p>Don't forget to check the <a href="https://github.com/unlock-protocol/unlock/wiki/The-Path-to-UDT!">step-by-step upgrades and deployments as documented on our wiki</a>!</p>
<p><img src="/images/blog/launching-unlock-discount-tokens/decentralized-unlock.jpg" alt="Decentralizing Unlock"></p>
<h1>How does UDT work?</h1>
<p>The Unlock Discount Token (UDT) is an <strong>optional</strong> ERC20 token that exists to add incentives to actors who are willing to grow and use the Unlock Protocol and network as well as progressively give them control of future upgrades. The smart contract which mints UDT has been deployed to the Ethereum main network and can be found at <a href="https://etherscan.io/token/0x90de74265a416e1393a450752175aed98fe11517"><code>0x90de74265...</code></a>.</p>
<p>Unlock Discount Tokens are minted and granted as rewards upon key purchases to an address designated in the key purchase call, as shown on <a href="https://etherscan.io/tx/0xb0e5f95ea980c1f096a841e5507f465827411cc29f80f8b95971a5241d9e81bb">this transaction for example</a>. Like all of our contracts, it is fully verified on Etherscan and you can access the full <a href="https://github.com/unlock-protocol/unlock/">source code on GitHub</a>!</p>
<p>We pre-mined 1,000,000 tokens and we'll distribute some of them to early investors and adopters soon, but this pre-mine will also quickly become a minority stake as the supply of tokens will grow as the network grows, since new tokens can be minted for every new key purchase.</p>
<p>As of now, the Unlock and UDT contracts are upgradable using OpenZeppelin and "owned" by a Gnosis multisig wallets whose signers are Unlock employees. Our goal is to soon decentralize that mechanism so that upgrades can only be triggered by UDT holders, after a voting process through a DAO, where votes are weighted by UDT ownership!</p>
<p><strong>Additionally, the first upgrade that we will then submit will add a mechanism that lets UDT holders claim discounts on their key purchases!</strong></p>
<p>Our <a href="https://github.com/unlock-protocol/unlock/wiki/The-Unlock-Discount-Tokens">wiki provides a long description</a> of how UDT works.</p>
<h1>How can I earn UDT?</h1>
<p>From now on, there is only a single way to create (and earn) new tokens: making key purchases. The number of tokens minted is based on the value of the purchase relative to the size of the overall network. This means that when the network is small, the number of tokens minted will be relatively larger than when the network is getting large. <strong>This rewards early adopters more</strong>!</p>
<p>The number of tokens minted is also capped to the gas spent by the transaction, so that it is always cheaper to purchase UDT from an exchange <a href="https://app.uniswap.org/#/add/ETH/0x90DE74265a416e1393A450752175AED98fe11517">such as Uniswap</a> than it would be to purchase keys for yourself and earn tokens doing it.</p>
<p>It's important to note that even though the supply of tokens will grow forever as the network grows, the growth of the supply will slow down forever as well, which means that it is much easier to accumulate tokens in the early days of the network than once it will be larger.</p>
<h1>What is next?</h1>
<p>The next step toward a fully decentralized Unlock Protocol is to start working on moving away from our multisignature based upgrades to upgrades driven by a Decentralized Autonomous Organization. This will be our focus in the next few months.</p>
<p>We will also work on allowing token holders to claim discounts on their purchases as we think it is important to add financial rewards to stakeholders.</p>
<p>Do you want to learn more? Are you interested in joining us? <a href="https://discord.gg/Ah6ZEJyTDp">Reach out on Discord</a>!</p>



The most exciting aspects of Ethereum is its composability. For example, locks can use stable coins such as DAI or USDc for their pricing. These coins are both using the ERC20 token standard. Today we're showing how we leverage another characteristic of the ERC20 specification to make recurring memberships.

# Introducing the Key Purchaser contract

Locks have a pretty simple mechanism to "purchase" memberships, which has one handy characteristic: **the sender of the transaction can specify the recipient of the membership**. It means that someone can buy a key
(membership) for themselves or, for someone else. We already use this mechanism for [our credit card support](/blog/unlock-with-credit-cards), for example.

We created a new contract, called the **Key Purchaser**, whose sole purpose is to purchase keys to a specific lock. This contract enables recurring memberships!

# How does it work?

1. The lock owner **deploys a Key Purchaser** contract dedicated to their lock. When they do so, they define some characteristics for the recurring memberships:

   - the frequency at which keys can be renewed,
   - the earliest an existing key can be renewed (before it expires),
   - the maximum price to pay per key (in case the lock's key price was increased)
   - a reward for the transaction sender (see below!)

2. Rather than buying keys immediately, prospective members use the ERC20 allowance mechanism to **allow the Key Purchaser** contract to spend some of their ERC20 tokens. The amount that they approve should cover multiple renewals, based on the use case.

3. A third party application should monitor these approvals, and, for each of them, if the approver does not have a valid key to the lock, it should call the Key Purchaser contract to **perform a purchase**. That transaction will only succeed if all of the following pre-requisites are met:

   - The approver has approved an amount that is large enough
   - The approver has enough ERC20 to perform the purchase
   - The key price has changed significantly
   - The approver does not have a key or has a key which is soon to be expired

4. If the transaction succeeds, the member will see their ERC20 being spent. Some of the tokens are used to purchase the key and the balancer to provide a reward to the 3rd party application, which sends the transaction. The reward's goal is to cover for the gas spent to perform the transaction.

# A full example

A lock priced in DAI was deployed at this address: [`0x72ef8d4a4...`](https://etherscan.io/address/0x72ef8d4a46c94fe739f880b690bff2a825113abf). The lock's name is _v7 DAI Lock_. The key price is 1 DAI, and the duration is 1 day.

A Key Purchaser was deployed at this address: [`0xa1c718312fd0...`](https://etherscan.io/address/0xa1c718312fd0252540e5ecf6b4cd83fdbfa06acb). This Key Purchaser allows for a maximum price of 1 DAI (in other words, all renewals would fail if the price was increased). The Key Purchaser enables for renewals every 20 hours (72000 seconds) and would only succeed if it was mined at most 1 hour (3600 seconds) before the expiration of a previous key. Finally, there is a reward of 0.1 DAI for the address which sent the transaction.

A user [approved the key purchaser](https://etherscan.io/tx/0x5d3fb6902a3272651460d1ada2abe3b2ab8433f24c9378853b6a4095afc127ce) to spend up to 10 DAI to cover multiple renewals.

Another user then [sent a transaction to the key purchaser](https://etherscan.io/tx/0xfd5f8dd28cd9f20da00435a562eda0171ecdfa21c8cb0f2367d888f407465aed) to perform the actual purchase. The Etherscan UI provides a good understanding of what happened.

![key purchase](/images/blog/recurring-memberships/transaction.png)

We can see 1.1 DAI transferred from the member's address, 1 DAI sent to the lock, 0.1 DAI sent to the sender.
Additionally, a new NFT for the lock was minted and granted to the members!

Easter egg: The membership has now expired, which means it can be renewed... and there is a 0.1 DAI reward to whoever sends it!

## Next steps

We are [working](https://github.com/unlock-protocol/unlock/issues/6736) on running a 3rd party service that would issue transactions to execute key purchases. This service will monitor deployments of new key purchasers and the corresponding ERC20 approvals. For each of these, it will check whether the user should get a new key and issue a transaction on that case. This service will only execute transactions where the reward covers the gas we would spend.

Another next step is to update our paywall application to support recurring memberships.


Leveraring the ERC20 approach to allowances lets creators easily create a recurring membership!

The Unlock Protocol supports recurring memberships!

Recurring Memberships

<p>The most exciting aspects of Ethereum is its composability. For example, locks can use stable coins such as DAI or USDc for their pricing. These coins are both using the ERC20 token standard. Today we're showing how we leverage another characteristic of the ERC20 specification to make recurring memberships.</p>
<h1>Introducing the Key Purchaser contract</h1>
<p>Locks have a pretty simple mechanism to "purchase" memberships, which has one handy characteristic: <strong>the sender of the transaction can specify the recipient of the membership</strong>. It means that someone can buy a key
(membership) for themselves or, for someone else. We already use this mechanism for <a href="/blog/unlock-with-credit-cards">our credit card support</a>, for example.</p>
<p>We created a new contract, called the <strong>Key Purchaser</strong>, whose sole purpose is to purchase keys to a specific lock. This contract enables recurring memberships!</p>
<h1>How does it work?</h1>
<ol>
<li>
<p>The lock owner <strong>deploys a Key Purchaser</strong> contract dedicated to their lock. When they do so, they define some characteristics for the recurring memberships:</p>
<ul>
<li>the frequency at which keys can be renewed,</li>
<li>the earliest an existing key can be renewed (before it expires),</li>
<li>the maximum price to pay per key (in case the lock's key price was increased)</li>
<li>a reward for the transaction sender (see below!)</li>
</ul>
</li>
<li>
<p>Rather than buying keys immediately, prospective members use the ERC20 allowance mechanism to <strong>allow the Key Purchaser</strong> contract to spend some of their ERC20 tokens. The amount that they approve should cover multiple renewals, based on the use case.</p>
</li>
<li>
<p>A third party application should monitor these approvals, and, for each of them, if the approver does not have a valid key to the lock, it should call the Key Purchaser contract to <strong>perform a purchase</strong>. That transaction will only succeed if all of the following pre-requisites are met:</p>
<ul>
<li>The approver has approved an amount that is large enough</li>
<li>The approver has enough ERC20 to perform the purchase</li>
<li>The key price has changed significantly</li>
<li>The approver does not have a key or has a key which is soon to be expired</li>
</ul>
</li>
<li>
<p>If the transaction succeeds, the member will see their ERC20 being spent. Some of the tokens are used to purchase the key and the balancer to provide a reward to the 3rd party application, which sends the transaction. The reward's goal is to cover for the gas spent to perform the transaction.</p>
</li>
</ol>
<h1>A full example</h1>
<p>A lock priced in DAI was deployed at this address: <a href="https://etherscan.io/address/0x72ef8d4a46c94fe739f880b690bff2a825113abf"><code>0x72ef8d4a4...</code></a>. The lock's name is <em>v7 DAI Lock</em>. The key price is 1 DAI, and the duration is 1 day.</p>
<p>A Key Purchaser was deployed at this address: <a href="https://etherscan.io/address/0xa1c718312fd0252540e5ecf6b4cd83fdbfa06acb"><code>0xa1c718312fd0...</code></a>. This Key Purchaser allows for a maximum price of 1 DAI (in other words, all renewals would fail if the price was increased). The Key Purchaser enables for renewals every 20 hours (72000 seconds) and would only succeed if it was mined at most 1 hour (3600 seconds) before the expiration of a previous key. Finally, there is a reward of 0.1 DAI for the address which sent the transaction.</p>
<p>A user <a href="https://etherscan.io/tx/0x5d3fb6902a3272651460d1ada2abe3b2ab8433f24c9378853b6a4095afc127ce">approved the key purchaser</a> to spend up to 10 DAI to cover multiple renewals.</p>
<p>Another user then <a href="https://etherscan.io/tx/0xfd5f8dd28cd9f20da00435a562eda0171ecdfa21c8cb0f2367d888f407465aed">sent a transaction to the key purchaser</a> to perform the actual purchase. The Etherscan UI provides a good understanding of what happened.</p>
<p><img src="/images/blog/recurring-memberships/transaction.png" alt="key purchase"></p>
<p>We can see 1.1 DAI transferred from the member's address, 1 DAI sent to the lock, 0.1 DAI sent to the sender.
Additionally, a new NFT for the lock was minted and granted to the members!</p>
<p>Easter egg: The membership has now expired, which means it can be renewed... and there is a 0.1 DAI reward to whoever sends it!</p>
<h2>Next steps</h2>
<p>We are <a href="https://github.com/unlock-protocol/unlock/issues/6736">working</a> on running a 3rd party service that would issue transactions to execute key purchases. This service will monitor deployments of new key purchasers and the corresponding ERC20 approvals. For each of these, it will check whether the user should get a new key and issue a transaction on that case. This service will only execute transactions where the reward covers the gas we would spend.</p>
<p>Another next step is to update our paywall application to support recurring memberships.</p>



Locks are primitives which manage access control. When a creator deploys a lock, they can integrate it with other primitives on the Ethereum chain, [such as any ERC20](https://unlock-protocol.com/blog/erc20-locks) (including stable coins or personal tokens).

When deploying them, a creator can customize their parameters (price and duration of the keys, maximum number of keys... etc). At a lower level, they are also _programmable_ through the use callbacks.

Any lock manager (learn more about roles for locks) can point to a 3rd party contract which would implement the `ILockKeyPurchaseHook` [interface](https://github.com/unlock-protocol/unlock/blob/master/smart-contracts/contracts/interfaces/hooks/ILockKeyPurchaseHook.sol) and/or the `ILockKeyCancelHook` [interface](https://github.com/unlock-protocol/unlock/blob/master/smart-contracts/contracts/interfaces/hooks/ILockKeyCancelHook.sol). The first one is invoked when a key purchase is performed, while the second would be called when a key has been cancelled.

![Setting hooks](/images/blog/hooks/settings-hooks.png)

# Key Purchase Hook

The Key purchase hook actually has 2 entry points:

- `keyPurchasePrice` which is invoked _before_ the key purchase itself
- `onKeyPurchase` which is invoked _after_ the key purchase.

The first hook `keyPurchasePrice` can be used to alter the price which is actually paid by the member to purchase a membership, or even prevent it completely. For example, you would use this hook to apply a discount code, or even prevent someone from buying a membership unless they are, say an accredited investor.

One of the thing that excites us the most about this is the ability to "chain" memberships. For example, someone would pay less for a membership if they already have a membership to another lock.

The second hook, `onKeyPurchase`, should be used to update the state of the system, as it will not alter the actual key purchase transaction. This is useful for example, if you want to create a bonding curve for the key price of a lock. The hook can then be invoked to change the lock's key price for every purchase... etc.

# Key Cancel Hook

This hook only has a single entry point, `onKeyCancel`, which is invoked when a member cancels (burns) their key. Even though it could revert to prevent refunds, we recommend that it is only used to alter state as the cancellation parameters (including the amount to be refunded can be altered using other mechanisms)

# Examples

Our docs provide 2 examples for how to use callback hooks. The first one shows how to create a discount code for key purchases on a hook. This hook is quite interesting because it solves the challenge of keeping the discount code secret (it is not submitted when performing the purchase!). The second example shows an example where key purchases are restricted to people who have a special access code.

With Ethereum, smart contracts are all running in the same "computer" which opens the door for very deep integrations between different components which provide different features.


Our Public Lock contracts implements a hook pattern to let lock owners customize the behavior of their lock upon key purchases and key cancellations.

The "callback" pattern is a very good way to customize a lock's behavior!

Hooks

<p>Locks are primitives which manage access control. When a creator deploys a lock, they can integrate it with other primitives on the Ethereum chain, <a href="https://unlock-protocol.com/blog/erc20-locks">such as any ERC20</a> (including stable coins or personal tokens).</p>
<p>When deploying them, a creator can customize their parameters (price and duration of the keys, maximum number of keys... etc). At a lower level, they are also <em>programmable</em> through the use callbacks.</p>
<p>Any lock manager (learn more about roles for locks) can point to a 3rd party contract which would implement the <code>ILockKeyPurchaseHook</code> <a href="https://github.com/unlock-protocol/unlock/blob/master/smart-contracts/contracts/interfaces/hooks/ILockKeyPurchaseHook.sol">interface</a> and/or the <code>ILockKeyCancelHook</code> <a href="https://github.com/unlock-protocol/unlock/blob/master/smart-contracts/contracts/interfaces/hooks/ILockKeyCancelHook.sol">interface</a>. The first one is invoked when a key purchase is performed, while the second would be called when a key has been cancelled.</p>
<p><img src="/images/blog/hooks/settings-hooks.png" alt="Setting hooks"></p>
<h1>Key Purchase Hook</h1>
<p>The Key purchase hook actually has 2 entry points:</p>
<ul>
<li><code>keyPurchasePrice</code> which is invoked <em>before</em> the key purchase itself</li>
<li><code>onKeyPurchase</code> which is invoked <em>after</em> the key purchase.</li>
</ul>
<p>The first hook <code>keyPurchasePrice</code> can be used to alter the price which is actually paid by the member to purchase a membership, or even prevent it completely. For example, you would use this hook to apply a discount code, or even prevent someone from buying a membership unless they are, say an accredited investor.</p>
<p>One of the thing that excites us the most about this is the ability to "chain" memberships. For example, someone would pay less for a membership if they already have a membership to another lock.</p>
<p>The second hook, <code>onKeyPurchase</code>, should be used to update the state of the system, as it will not alter the actual key purchase transaction. This is useful for example, if you want to create a bonding curve for the key price of a lock. The hook can then be invoked to change the lock's key price for every purchase... etc.</p>
<h1>Key Cancel Hook</h1>
<p>This hook only has a single entry point, <code>onKeyCancel</code>, which is invoked when a member cancels (burns) their key. Even though it could revert to prevent refunds, we recommend that it is only used to alter state as the cancellation parameters (including the amount to be refunded can be altered using other mechanisms)</p>
<h1>Examples</h1>
<p>Our docs provide 2 examples for how to use callback hooks. The first one shows how to create a discount code for key purchases on a hook. This hook is quite interesting because it solves the challenge of keeping the discount code secret (it is not submitted when performing the purchase!). The second example shows an example where key purchases are restricted to people who have a special access code.</p>
<p>With Ethereum, smart contracts are all running in the same "computer" which opens the door for very deep integrations between different components which provide different features.</p>



# ABI

We write our smart contracts using the [Solidity](https://solidity.readthedocs.io/) language. Once compiled they are deployed to the Ethereum chain. Ethereum nodes, such as the ones from [Alchemy](https://alchemyapi.io/) (which we use and love!), provide RPC endpoints to retrieve or alter the state of the contracts.

The "description" of the method calls is inside of the Application Binary Interface (ABI). The Contract ABI is the standard way to interact with contracts in the Ethereum ecosystem, both from outside the blockchain and for contract-to-contract interaction. Data is encoded according to its type, as described in this specification. The encoding is not self describing and thus requires a schema in order to decode.

We verify all of our contract on Etherscan, which means that creators and consumers can easily inspect each implementation and ensure that the protocol works as they expect. You can also use Etherscan to inspect the ABI themselves. See for example [the ABI of the lock on this blog](https://etherscan.io/address/0xCE62D71c768aeD7EA034c72a1bc4CF58830D9894#code).

# npm modules

3rd party developers can use our ABIs directly, but, for convenience, we also provide npm modules. These modules can be used inside of JavaScript applications, either front-end or backend! The module can also be used with other Solidity applications since several solidity developer tools, such as Truffle! For example, you can look at [our very own smart contract extensions](https://github.com/unlock-protocol/unlock/tree/master/smart-contract-extensions)!

We publish [each and every Unlock ABI](https://docs.unlock-protocol.com/core-protocol/) as module for every version that we publish: `@unlock-protocol/contracts`

The Unlock contract, which is a factory contract will always deploy locks from the _latest_ version, but older locks are, by design, not updagradable by us, which means that they will remain on the version at the time of their deployment. You should use etherscan to inspect which version a specific lock uses!


We publish our ABI as npm modules

Unlock ABI modules

<h1>ABI</h1>
<p>We write our smart contracts using the <a href="https://solidity.readthedocs.io/">Solidity</a> language. Once compiled they are deployed to the Ethereum chain. Ethereum nodes, such as the ones from <a href="https://alchemyapi.io/">Alchemy</a> (which we use and love!), provide RPC endpoints to retrieve or alter the state of the contracts.</p>
<p>The "description" of the method calls is inside of the Application Binary Interface (ABI). The Contract ABI is the standard way to interact with contracts in the Ethereum ecosystem, both from outside the blockchain and for contract-to-contract interaction. Data is encoded according to its type, as described in this specification. The encoding is not self describing and thus requires a schema in order to decode.</p>
<p>We verify all of our contract on Etherscan, which means that creators and consumers can easily inspect each implementation and ensure that the protocol works as they expect. You can also use Etherscan to inspect the ABI themselves. See for example <a href="https://etherscan.io/address/0xCE62D71c768aeD7EA034c72a1bc4CF58830D9894#code">the ABI of the lock on this blog</a>.</p>
<h1>npm modules</h1>
<p>3rd party developers can use our ABIs directly, but, for convenience, we also provide npm modules. These modules can be used inside of JavaScript applications, either front-end or backend! The module can also be used with other Solidity applications since several solidity developer tools, such as Truffle! For example, you can look at <a href="https://github.com/unlock-protocol/unlock/tree/master/smart-contract-extensions">our very own smart contract extensions</a>!</p>
<p>We publish <a href="https://docs.unlock-protocol.com/core-protocol/">each and every Unlock ABI</a> as module for every version that we publish: <code>@unlock-protocol/contracts</code></p>
<p>The Unlock contract, which is a factory contract will always deploy locks from the <em>latest</em> version, but older locks are, by design, not updagradable by us, which means that they will remain on the version at the time of their deployment. You should use etherscan to inspect which version a specific lock uses!</p>



The latest release of the Unlock Paywall includes a feature that allows the host page to share the provider it uses with the embedded iframe. Let's take a look at why that's important, and what this enables.

# Not All Dapp Browsers Behave The Same

This isn't the first code we've written to share the provider in use on the host page with the paywall. The very first iteration of this feature was a dirrect response to browser compatibility issues. Our paywall is itself a dapp that gets embedded in an iframe on a host page (which may or may not be a dapp). Some browsers, like Metamask on desktop, will inject a provider into the global environment of an iframe just like they do on any other page. However, some other browsers, like Trust Wallet on mobile devices, do not. For those users, our paywall would appear to be broken because it does not have full functionality without a provider.

Our earliest solution to this challenge was perhaps a bit more complicated than necessary, but it did resolve the problem. The latest iteration keeps this important functionality, but does so in a simpler, easier to maintain way.

# It's Not Enough to Have _Just Any_ Provider

As the Web3 ecosystem has matured, new options for providers have become available, and our app wasn't quite ready for them. We don't necessarily want to always use the provider at `window.ethereum`, because if the host site wants to implement Web3Modal or WalletConnect (which usually return a provider object but do not inject them into the global environment), the paywall won't have access to them without some extra manual work from the implementer.

To that end, the latest version of Unlock's delegated provider has fewer baked-in assumptions about how your app or site is constructed. It's more flexible, which makes it work in a broader set of environments. Stay tuned for a blog post coming soon to see how you can use some advanced paywall integration techniques to enable one of these provider solutions!


The delegated provider allows the embedded paywall to synchronize with the provider used on the host page

Enabling richer provider interactions

Unlock's Delegated Provider

<p>The latest release of the Unlock Paywall includes a feature that allows the host page to share the provider it uses with the embedded iframe. Let's take a look at why that's important, and what this enables.</p>
<h1>Not All Dapp Browsers Behave The Same</h1>
<p>This isn't the first code we've written to share the provider in use on the host page with the paywall. The very first iteration of this feature was a dirrect response to browser compatibility issues. Our paywall is itself a dapp that gets embedded in an iframe on a host page (which may or may not be a dapp). Some browsers, like Metamask on desktop, will inject a provider into the global environment of an iframe just like they do on any other page. However, some other browsers, like Trust Wallet on mobile devices, do not. For those users, our paywall would appear to be broken because it does not have full functionality without a provider.</p>
<p>Our earliest solution to this challenge was perhaps a bit more complicated than necessary, but it did resolve the problem. The latest iteration keeps this important functionality, but does so in a simpler, easier to maintain way.</p>
<h1>It's Not Enough to Have <em>Just Any</em> Provider</h1>
<p>As the Web3 ecosystem has matured, new options for providers have become available, and our app wasn't quite ready for them. We don't necessarily want to always use the provider at <code>window.ethereum</code>, because if the host site wants to implement Web3Modal or WalletConnect (which usually return a provider object but do not inject them into the global environment), the paywall won't have access to them without some extra manual work from the implementer.</p>
<p>To that end, the latest version of Unlock's delegated provider has fewer baked-in assumptions about how your app or site is constructed. It's more flexible, which makes it work in a broader set of environments. Stay tuned for a blog post coming soon to see how you can use some advanced paywall integration techniques to enable one of these provider solutions!</p>



The blockchain movement started with crypto-currencies. Bitcoin became the first permission-less and decentralized money. Money balances are "state" stored in a ledger. Ethereum went further by becoming the first blockchain which can store any kind of "state". At Unlock, we think it's a great [platform to store memberships](https://unlock-protocol.com/blog/protocol-for-membership/).

About 6 months ago, we introduced our [Unlock accounts](https://unlock-protocol.com/blog/unlock-user-accounts/), which are easy ways for people who do no have a crypto wallet, or not do own crypto-currencies to easily and **instantly** purchase their memberships. We hide the "crypto" complexity under the hood (seed phrases, gas fees... etc) so that internet users can easily Unlock content, without having to learn new paradigms... until [they actually want to](https://unlock-protocol.com/blog/ejecting-account/)!

Today, I am very proud to introduce the next iteration of our work on supporting credit cards. Starting now, **crypto users can also purchase memberships using their credit cards** on selected locks.

We believe that wallets are great to store money and access keys, but that they are also a very good identity mechanism. In other words, you should be able to [login into any website using your wallet](https://www.nickgrossman.is/2020/digital-bearer-assets/), rather than using an email address and password. Whether the wallet actually holds money could almost be irrelevant. As such, we think memberships should be attached to the wallet, whether they have actually been purchased _from_ the wallet, or using another payment mechanism, such as credit cards!

1. When a user finds a lock with credit cards enabled, they can select _Credit Card_ as their payment mechanism.
2. The price will be slightly higher to cover credit card fees.
3. The user is then asked to enter their credit card number and sign it with their crypto wallet
4. Once submitted, our backend will then charge the card, and issue the corresponding NFT!

This is by far the easiest way to purchase your first crypto asset. Want to try by yourself? Check these locked sites:

- [Livepeer dashboards on Scout](https://medium.com/@scout_cool/announcing-livepeer-orchestrator-dashboard-with-an-unlock-fca60750843b), like [this one](https://scout.cool/livepeer/mainnet/dashboards/5e28c582bfbf6c00177109e0?&nodeaddress=0xE9E284277648fcdb09B8EfC1832c73c09b5Ecf59)
- Ben's free [startup feedback sessions](https://werd.io/2020/free-startup-feedback-sessions-for-members) (only for members!)
- Stake for the [HackMoney hackathon](https://hack.ethglobal.co/online/hacker)

Soon, we will introduce another iteration of our work on the credit card front. Our goal is to enable credit card purchase for any user (who have their own wallets or not), on any lock, whether they use stable coins or not. We believe this will unlock the next 10M crypto users ;)


Unlock memberships with credit cards, whether you use a crypto wallet, or not!

Unlock memberships with credit cards, whether you use a crypto wallet, or not.

Unlocking with a credit card

<p>The blockchain movement started with crypto-currencies. Bitcoin became the first permission-less and decentralized money. Money balances are "state" stored in a ledger. Ethereum went further by becoming the first blockchain which can store any kind of "state". At Unlock, we think it's a great <a href="https://unlock-protocol.com/blog/protocol-for-membership/">platform to store memberships</a>.</p>
<p>About 6 months ago, we introduced our <a href="https://unlock-protocol.com/blog/unlock-user-accounts/">Unlock accounts</a>, which are easy ways for people who do no have a crypto wallet, or not do own crypto-currencies to easily and <strong>instantly</strong> purchase their memberships. We hide the "crypto" complexity under the hood (seed phrases, gas fees... etc) so that internet users can easily Unlock content, without having to learn new paradigms... until <a href="https://unlock-protocol.com/blog/ejecting-account/">they actually want to</a>!</p>
<p>Today, I am very proud to introduce the next iteration of our work on supporting credit cards. Starting now, <strong>crypto users can also purchase memberships using their credit cards</strong> on selected locks.</p>
<p>We believe that wallets are great to store money and access keys, but that they are also a very good identity mechanism. In other words, you should be able to <a href="https://www.nickgrossman.is/2020/digital-bearer-assets/">login into any website using your wallet</a>, rather than using an email address and password. Whether the wallet actually holds money could almost be irrelevant. As such, we think memberships should be attached to the wallet, whether they have actually been purchased <em>from</em> the wallet, or using another payment mechanism, such as credit cards!</p>
<ol>
<li>When a user finds a lock with credit cards enabled, they can select <em>Credit Card</em> as their payment mechanism.</li>
<li>The price will be slightly higher to cover credit card fees.</li>
<li>The user is then asked to enter their credit card number and sign it with their crypto wallet</li>
<li>Once submitted, our backend will then charge the card, and issue the corresponding NFT!</li>
</ol>
<p>This is by far the easiest way to purchase your first crypto asset. Want to try by yourself? Check these locked sites:</p>
<ul>
<li><a href="https://medium.com/@scout_cool/announcing-livepeer-orchestrator-dashboard-with-an-unlock-fca60750843b">Livepeer dashboards on Scout</a>, like <a href="https://scout.cool/livepeer/mainnet/dashboards/5e28c582bfbf6c00177109e0?&#x26;nodeaddress=0xE9E284277648fcdb09B8EfC1832c73c09b5Ecf59">this one</a></li>
<li>Ben's free <a href="https://werd.io/2020/free-startup-feedback-sessions-for-members">startup feedback sessions</a> (only for members!)</li>
<li>Stake for the <a href="https://hack.ethglobal.co/online/hacker">HackMoney hackathon</a></li>
</ul>
<p>Soon, we will introduce another iteration of our work on the credit card front. Our goal is to enable credit card purchase for any user (who have their own wallets or not), on any lock, whether they use stable coins or not. We believe this will unlock the next 10M crypto users ;)</p>



The Unlock Paywall has evolved substantially over the past year, from a more traditional paywall that blocked a page to a configurable and embeddable tool that enabled all kinds of memberships. Here's our latest release, crafted in direct response to our customers' needs and our own experience.

# Subtracting Weight Makes You Faster Everywhere

Modern web apps are usually quite large, which makes them less usable on mobile networks or low-bandwidth connections. The Unlock Paywall feels this issue more acutely than most applications because it's intended to be embedded on another page, which itself is probably quite large. As adoption of our protocol grew, we identified several key challenges we'd have to solve:

- Too large a bundle size
- Too many network requests
- Too many dependencies

## Bundle Size

The previous iteration of our paywall consisted of several subsytems. We did load these separately to avoid having one huge blob that needed to come down before anything could start, but it was clear to us that we could go further. We were able to shrink our architecture to only require a very slim wrapper script loaded into the client page and one iframe to handle key purchases. Because the key purchase iframe is lazy-loaded, most interactions with a locked page don't need to download it at all.

## Too Many Network Requests

Previously, our application did a lot of polling to various places to maintain an accurate picture of a member's status. Over time we've managed to shrink this dramatically by choosing more carefully what information we really need for a good checkout experience, and being more clever about how to get that subset of data. This has been an ongoing process for some time now, but it culminates in the latest paywall release which prunes some of the chattiest parts of the application.

## Too Many Dependencies

We previously used a library to handle Web3 calls on the paywall (to some extent we still do, but only in the lazy-loaded checkout iframe). We found that this library contributed some substantial weight to our application, when it was only being used for a handful of calls. We found that it wasn't hard for us to manually implement methods to make these calls to the chain, which saved us both time and space.

# Greater Capabilities With Less Code

We've managed to make these changes without compromising the functionality of our paywall application at all. In fact, this rearchitecture made it possible to move more quickly while implementing new features that previously would have taken a lot more effort. The first and most visible update is a UI overhaul that takes up less space and works a lot better on mobile devices. We'll have more news on what's next in the pipeline in future blog posts.

# An Evergreen Deployment Model

If you've integrated Unlock on your site before, you'll have noticed that you load the script `unlock.1.0.min.js`. So is today's announcement about `unlock.2.0.min.js`? Nope! Because we aren't making any breaking changes to the Paywall API and we want to ensure that consumers can smoothly and quickly get the latest and greatest code, we've moved to an explicitly "evergreen" model. Loading `unlock.latest.min.js` on your page will ensure that you're always up-to-date and get continuous improvements with every production deploy we do. [Our docs](https://docs.unlock-protocol.com) have been updated to this effect.


Unlock introduces a new paywall architecture in response to customer needs

Leaner, faster, and evergreen

Introducing the Latest Unlock Paywall

<p>The Unlock Paywall has evolved substantially over the past year, from a more traditional paywall that blocked a page to a configurable and embeddable tool that enabled all kinds of memberships. Here's our latest release, crafted in direct response to our customers' needs and our own experience.</p>
<h1>Subtracting Weight Makes You Faster Everywhere</h1>
<p>Modern web apps are usually quite large, which makes them less usable on mobile networks or low-bandwidth connections. The Unlock Paywall feels this issue more acutely than most applications because it's intended to be embedded on another page, which itself is probably quite large. As adoption of our protocol grew, we identified several key challenges we'd have to solve:</p>
<ul>
<li>Too large a bundle size</li>
<li>Too many network requests</li>
<li>Too many dependencies</li>
</ul>
<h2>Bundle Size</h2>
<p>The previous iteration of our paywall consisted of several subsytems. We did load these separately to avoid having one huge blob that needed to come down before anything could start, but it was clear to us that we could go further. We were able to shrink our architecture to only require a very slim wrapper script loaded into the client page and one iframe to handle key purchases. Because the key purchase iframe is lazy-loaded, most interactions with a locked page don't need to download it at all.</p>
<h2>Too Many Network Requests</h2>
<p>Previously, our application did a lot of polling to various places to maintain an accurate picture of a member's status. Over time we've managed to shrink this dramatically by choosing more carefully what information we really need for a good checkout experience, and being more clever about how to get that subset of data. This has been an ongoing process for some time now, but it culminates in the latest paywall release which prunes some of the chattiest parts of the application.</p>
<h2>Too Many Dependencies</h2>
<p>We previously used a library to handle Web3 calls on the paywall (to some extent we still do, but only in the lazy-loaded checkout iframe). We found that this library contributed some substantial weight to our application, when it was only being used for a handful of calls. We found that it wasn't hard for us to manually implement methods to make these calls to the chain, which saved us both time and space.</p>
<h1>Greater Capabilities With Less Code</h1>
<p>We've managed to make these changes without compromising the functionality of our paywall application at all. In fact, this rearchitecture made it possible to move more quickly while implementing new features that previously would have taken a lot more effort. The first and most visible update is a UI overhaul that takes up less space and works a lot better on mobile devices. We'll have more news on what's next in the pipeline in future blog posts.</p>
<h1>An Evergreen Deployment Model</h1>
<p>If you've integrated Unlock on your site before, you'll have noticed that you load the script <code>unlock.1.0.min.js</code>. So is today's announcement about <code>unlock.2.0.min.js</code>? Nope! Because we aren't making any breaking changes to the Paywall API and we want to ensure that consumers can smoothly and quickly get the latest and greatest code, we've moved to an explicitly "evergreen" model. Loading <code>unlock.latest.min.js</code> on your page will ensure that you're always up-to-date and get continuous improvements with every production deploy we do. <a href="https://docs.unlock-protocol.com">Our docs</a> have been updated to this effect.</p>



Some of you may have noticed a huge leap in our version numbers; the last release was v1.3 and now we've jumped to v7. Let me explain the reasoning for this. Since our first release, we've been using 2 different version numbering systems. We've followed semver standards in our published modules, but our smart-contracts (which can be queried for their current version) have used the type `uint` to store this value for simplicity. We've decided to make things more straightforward by using the `uint`-style versioning consistently, which means we don't need to map between 2 different systems internally. Moving forward, version numbers will simply increment each version. The name of the npm-module and the version number returned when querying our contracts for their version will be identical. We've just released v7 of our contracts, and so the newly published module has been cleverly named "unlock-abi-7".

## What's Changed

### Hooks

A feature common to many areas of programming, code hooks give us a way to extend the functionality of a smart contract to meet changing needs & new use-cases. We're adding 2 hooks with v7: A `KeyPurchaseHook` and a `KeyCancelHook`. These are included in the new npm module (`unlock-abi-7`) as interfaces, allowing a vast amount of flexibility in how they're implemented. A couple of example use-cases include adding custom cancellation logic, and adding support for discount codes!

### Support for direct ETH tips

We've modified the fallback function in the PublicLock contract to allow for tips (paid in ETH) to be sent directly to a Lock's address. This was previously not something we allowed. Before v7, `PublicLock.sol` contained a `destroyLock(...)` function which would invoke the built-in `selfdestruct` functionality. The decision to include this function was based on our desire to be good citizens of the ethereum ecosystem, allowing deprecated locks to be destroyed and free up space on the blockchain. Under these conditions, we didn't want anyone to be able to send eth to a Lock which had been self-destructed as these funds would be unrecoverable.
However, it is now generally considered somewhat of an antipattern to use `selfdestruct` in a contract. This is not to say there are no valid use-cases, but for us, the security concerns outweighed the potential benefits and we made the call to remove `selfdestruct` from v7. With this change, there is no reason to block direct eth transfers to a lock anymore, so feel free to tip your creators and show your appreciation!

### Access-Control

We've been using the Ownable pattern for access control since the beginning of the project. If you're not familiar with this, it is often implemented by inheriting from openzeppelin's `Ownable.sol` contract, which gives us some basic functionality to control who may access certain functionality in the derived contract. It works and is probably the simplest way to get started when beginning a project (which is why it's used so often).
As is often the case with the simplest solution, it has its limitations. The main one for us at Unlock is that the Ownable pattern doesn't provide granular control of access. For this reason, we've migrated to using a more role-based access control system (RBAC), based on another openzeppelin contract `Roles.sol`. We're introducing LockManagers, KeyGranters and KeyManagers with v7. We'll be updating our docs in more detail around these changes, but here's an overview.

- LockManagers: This is a new role we've added to replace `owner`. The lock creator becomes the only LockManager by default, granting them the highest level of permissions for their lock. Unlike `owner`, there may be more than 1 LockManager.

* KeyGranters: Also implemented as a role, the lock creator is also the default KeyGranter.The primary reason for this role is to support additional purchase mechanisms beyond direct key purchases (think credit-card purchases, where a user pays Unlock with a credit card, Unlock buys the key from the lock, and then grants it to the user).

- KeyManagers: This is not a role in the same way the previous 2 are. It is more of an internal "title" assigned to a user, and there can only be 1 key manager per key. Only the key manager is authorized to transfer, share or cancel keys, and may or may not be the same entity as the key owner depending on how the key was originally acquired. This enables new use cases, such as the ability to "loan" your key to someone temporarily, while retaining the right to take it back when/if needed, or possibly putting keys (NFTs) inside of a vault contract as collateral by retaining ownership, but transfering the keyManager role to the vault itself!

### General Improvements

One of the underlying themes for this release has been to simplify where possible. On this front, we've moved to Solidity 0.5.17, fixed some minor bugs & compiler warnings, merged similar functions, updated & extended documentation, merged a couple of sub-contracts(Mixins), and added, fixed and refactored several tests.

Overall we think it's a great release with many improvements for internal developers, lock creators and external developers wanting to integrate locks onto their products. We hope you like it and feel free to check out the [code](https://github.com/unlock-protocol/unlock/) anytime!


V7 focuses on adding new features, revamping our access-control system, & general improvements to the codebase.

Improvements to the Unlock-Protocol

Smart Contract Upgrade: Version 7

<p>Some of you may have noticed a huge leap in our version numbers; the last release was v1.3 and now we've jumped to v7. Let me explain the reasoning for this. Since our first release, we've been using 2 different version numbering systems. We've followed semver standards in our published modules, but our smart-contracts (which can be queried for their current version) have used the type <code>uint</code> to store this value for simplicity. We've decided to make things more straightforward by using the <code>uint</code>-style versioning consistently, which means we don't need to map between 2 different systems internally. Moving forward, version numbers will simply increment each version. The name of the npm-module and the version number returned when querying our contracts for their version will be identical. We've just released v7 of our contracts, and so the newly published module has been cleverly named "unlock-abi-7".</p>
<h2>What's Changed</h2>
<h3>Hooks</h3>
<p>A feature common to many areas of programming, code hooks give us a way to extend the functionality of a smart contract to meet changing needs &#x26; new use-cases. We're adding 2 hooks with v7: A <code>KeyPurchaseHook</code> and a <code>KeyCancelHook</code>. These are included in the new npm module (<code>unlock-abi-7</code>) as interfaces, allowing a vast amount of flexibility in how they're implemented. A couple of example use-cases include adding custom cancellation logic, and adding support for discount codes!</p>
<h3>Support for direct ETH tips</h3>
<p>We've modified the fallback function in the PublicLock contract to allow for tips (paid in ETH) to be sent directly to a Lock's address. This was previously not something we allowed. Before v7, <code>PublicLock.sol</code> contained a <code>destroyLock(...)</code> function which would invoke the built-in <code>selfdestruct</code> functionality. The decision to include this function was based on our desire to be good citizens of the ethereum ecosystem, allowing deprecated locks to be destroyed and free up space on the blockchain. Under these conditions, we didn't want anyone to be able to send eth to a Lock which had been self-destructed as these funds would be unrecoverable.
However, it is now generally considered somewhat of an antipattern to use <code>selfdestruct</code> in a contract. This is not to say there are no valid use-cases, but for us, the security concerns outweighed the potential benefits and we made the call to remove <code>selfdestruct</code> from v7. With this change, there is no reason to block direct eth transfers to a lock anymore, so feel free to tip your creators and show your appreciation!</p>
<h3>Access-Control</h3>
<p>We've been using the Ownable pattern for access control since the beginning of the project. If you're not familiar with this, it is often implemented by inheriting from openzeppelin's <code>Ownable.sol</code> contract, which gives us some basic functionality to control who may access certain functionality in the derived contract. It works and is probably the simplest way to get started when beginning a project (which is why it's used so often).
As is often the case with the simplest solution, it has its limitations. The main one for us at Unlock is that the Ownable pattern doesn't provide granular control of access. For this reason, we've migrated to using a more role-based access control system (RBAC), based on another openzeppelin contract <code>Roles.sol</code>. We're introducing LockManagers, KeyGranters and KeyManagers with v7. We'll be updating our docs in more detail around these changes, but here's an overview.</p>
<ul>
<li>LockManagers: This is a new role we've added to replace <code>owner</code>. The lock creator becomes the only LockManager by default, granting them the highest level of permissions for their lock. Unlike <code>owner</code>, there may be more than 1 LockManager.</li>
</ul>
<ul>
<li>KeyGranters: Also implemented as a role, the lock creator is also the default KeyGranter.The primary reason for this role is to support additional purchase mechanisms beyond direct key purchases (think credit-card purchases, where a user pays Unlock with a credit card, Unlock buys the key from the lock, and then grants it to the user).</li>
</ul>
<ul>
<li>KeyManagers: This is not a role in the same way the previous 2 are. It is more of an internal "title" assigned to a user, and there can only be 1 key manager per key. Only the key manager is authorized to transfer, share or cancel keys, and may or may not be the same entity as the key owner depending on how the key was originally acquired. This enables new use cases, such as the ability to "loan" your key to someone temporarily, while retaining the right to take it back when/if needed, or possibly putting keys (NFTs) inside of a vault contract as collateral by retaining ownership, but transfering the keyManager role to the vault itself!</li>
</ul>
<h3>General Improvements</h3>
<p>One of the underlying themes for this release has been to simplify where possible. On this front, we've moved to Solidity 0.5.17, fixed some minor bugs &#x26; compiler warnings, merged similar functions, updated &#x26; extended documentation, merged a couple of sub-contracts(Mixins), and added, fixed and refactored several tests.</p>
<p>Overall we think it's a great release with many improvements for internal developers, lock creators and external developers wanting to integrate locks onto their products. We hope you like it and feel free to check out the <a href="https://github.com/unlock-protocol/unlock/">code</a> anytime!</p>



As part of its CDN architecture, [Cloudflare](https://cloudflare.com) recently introduced the concept of "[Workers](https://workers.cloudflare.com/)"... These are lambda functions which get executed on every requests going through Cloudflare's CDN. It's very similar to the **middleware architecture** popularized in several HTTP frameworks such as ruby's [Rack](https://github.com/rack/rack) or Node.js's Express.

A Worker can be used to alter a request or a response, or even completely rewrite these. Their [boilerplate section](https://developers.cloudflare.com/workers/templates) shows several interesting use cases which can be added to your website or application today.

# Token gating with a lock

As the web is [moving away from ads as its only business model](https://medium.com/unlock-protocol/the-end-of-the-ad-supported-web-d4d093fb462f), many websites are adding paywalls or other kinds of memberships to restrict access to some content or features. _Unfortunately, from a developer perspective, adding a a membership to a website is non-trivial_. Publishers have to first add a database of user accounts, then, they have to add mechanisms to collect payments, and finally they have to add logic to each of their webpage to enforce access control.

This amount of work not only takes times and resources, but often, it is not even not compatible with some other architectural constraints: static sites for examples, cannot implement this kind of access control... Similarly, for end users, a web where users have to create accounts with every single web site is only going to mean that we'll user even fewer websites: the friction would be just too high.

## Inroducing the Unlock Cloudflare Worker!

By now, you know that Unlock is a **protocol for memberships** as NFT. It _decouples_ the membership itself from the website to which these memberships apply. This means that the website does not have to implement mechanisms itself to enforce access control, as they can be implemented at a different layer, and the CDN is actually a great place to do this, with the help of the [Unlock Cloudflare Worker](https://github.com/unlock-protocol/cloudflare-worker)!

### How to token-gate a website with Cloudflare

#### Clone the repo:

```bash
git clone git@github.com:unlock-protocol/cloudflare-worker.git
```

#### Configure worker

Update its `.src/config.js` file to match your needs. Importantly, you need to keep the `pessimistic` mode to be `true` .

#### Install dependencies

```bash
yarn
```

#### Push to cloudflare

```bash
yarn wrangler publish
```

(You will likely be prompted to login to CloudFlare first)

#### Configure website

Now that the worker is deployed, you need to link it to your CloudFlare sites. Your mileage may vary but here is howe we did it for https://token-gated.com. From the Cloudflare Dashboard, select your website, in the left column, click on "Workers". Click the `Add Route` button. Enter the route(s) you want to "token-gate". In the `Service` select, pick the `unlock-cloudflare-worker` and select the environment of choice. Hit `Save`. You're all set!

![Screen Recording 2022-02-05 at 05 38 31 PM](https://user-images.githubusercontent.com/17735/152661436-347c9ccf-a9fb-4d1e-8b3a-817ecfb2a887.gif)

# Closing thoughts

Our approach in this example is fairly brute-force: every request to a domain is intercepted by our worker and,
the content is locked unless the visitor is a member. One could easily implement other kinds of locking,
maybe by rewriting the CSS files and enabling a completely different version of the website. Another option would be to automatically remove all ads from the content if the user is a member... etc. You could easily lock video content as well, by rendering a preview video, rather than the full version.

> Since Unlock **supports credit cards**, using an Unlock Worker is the simplest way to start monetizing your content for anyone on the web!

The [web is an operating system](https://unlock-protocol.com/blog/access-control-primitive/), Unlock is its access control layer, and Cloudflare, as a middleware is the perfect place to implement it!

PS: to the Workers team at Cloudflare: thank you... and maybe one feature request: please let workers creators like us "package" our workers so that they can be installed and configured from inside of the Cloudflare UI by other website owners!


Cloudflare is a leading Content Delivery Network provider. Web sites and application can use Cloudflare to add a layer between consumers and their applications in order to increase delivery speed, reduce the impact of attacks... or, add an Unlock lock!

Or, how to put a lock on any website without changing its code!

The Unlock Cloudflare Worker

<p>As part of its CDN architecture, <a href="https://cloudflare.com">Cloudflare</a> recently introduced the concept of "<a href="https://workers.cloudflare.com/">Workers</a>"... These are lambda functions which get executed on every requests going through Cloudflare's CDN. It's very similar to the <strong>middleware architecture</strong> popularized in several HTTP frameworks such as ruby's <a href="https://github.com/rack/rack">Rack</a> or Node.js's Express.</p>
<p>A Worker can be used to alter a request or a response, or even completely rewrite these. Their <a href="https://developers.cloudflare.com/workers/templates">boilerplate section</a> shows several interesting use cases which can be added to your website or application today.</p>
<h1>Token gating with a lock</h1>
<p>As the web is <a href="https://medium.com/unlock-protocol/the-end-of-the-ad-supported-web-d4d093fb462f">moving away from ads as its only business model</a>, many websites are adding paywalls or other kinds of memberships to restrict access to some content or features. <em>Unfortunately, from a developer perspective, adding a a membership to a website is non-trivial</em>. Publishers have to first add a database of user accounts, then, they have to add mechanisms to collect payments, and finally they have to add logic to each of their webpage to enforce access control.</p>
<p>This amount of work not only takes times and resources, but often, it is not even not compatible with some other architectural constraints: static sites for examples, cannot implement this kind of access control... Similarly, for end users, a web where users have to create accounts with every single web site is only going to mean that we'll user even fewer websites: the friction would be just too high.</p>
<h2>Inroducing the Unlock Cloudflare Worker!</h2>
<p>By now, you know that Unlock is a <strong>protocol for memberships</strong> as NFT. It <em>decouples</em> the membership itself from the website to which these memberships apply. This means that the website does not have to implement mechanisms itself to enforce access control, as they can be implemented at a different layer, and the CDN is actually a great place to do this, with the help of the <a href="https://github.com/unlock-protocol/cloudflare-worker">Unlock Cloudflare Worker</a>!</p>
<h3>How to token-gate a website with Cloudflare</h3>
<h4>Clone the repo:</h4>
<pre><code class="language-bash">git clone git@github.com:unlock-protocol/cloudflare-worker.git
</code></pre>
<h4>Configure worker</h4>
<p>Update its <code>.src/config.js</code> file to match your needs. Importantly, you need to keep the <code>pessimistic</code> mode to be <code>true</code> .</p>
<h4>Install dependencies</h4>
<pre><code class="language-bash">yarn
</code></pre>
<h4>Push to cloudflare</h4>
<pre><code class="language-bash">yarn wrangler publish
</code></pre>
<p>(You will likely be prompted to login to CloudFlare first)</p>
<h4>Configure website</h4>
<p>Now that the worker is deployed, you need to link it to your CloudFlare sites. Your mileage may vary but here is howe we did it for https://token-gated.com. From the Cloudflare Dashboard, select your website, in the left column, click on "Workers". Click the <code>Add Route</code> button. Enter the route(s) you want to "token-gate". In the <code>Service</code> select, pick the <code>unlock-cloudflare-worker</code> and select the environment of choice. Hit <code>Save</code>. You're all set!</p>
<p><img src="https://user-images.githubusercontent.com/17735/152661436-347c9ccf-a9fb-4d1e-8b3a-817ecfb2a887.gif" alt="Screen Recording 2022-02-05 at 05 38 31 PM"></p>
<h1>Closing thoughts</h1>
<p>Our approach in this example is fairly brute-force: every request to a domain is intercepted by our worker and,
the content is locked unless the visitor is a member. One could easily implement other kinds of locking,
maybe by rewriting the CSS files and enabling a completely different version of the website. Another option would be to automatically remove all ads from the content if the user is a member... etc. You could easily lock video content as well, by rendering a preview video, rather than the full version.</p>
<blockquote>
<p>Since Unlock <strong>supports credit cards</strong>, using an Unlock Worker is the simplest way to start monetizing your content for anyone on the web!</p>
</blockquote>
<p>The <a href="https://unlock-protocol.com/blog/access-control-primitive/">web is an operating system</a>, Unlock is its access control layer, and Cloudflare, as a middleware is the perfect place to implement it!</p>
<p>PS: to the Workers team at Cloudflare: thank you... and maybe one feature request: please let workers creators like us "package" our workers so that they can be installed and configured from inside of the Cloudflare UI by other website owners!</p>



[Glitch](https://glitch.com/) is a modern web development tool wich lets you build fast, full-stack web apps in your browser. It's not only a developer tool which can prove very useful for prototyping applications very fast, but can also be used to actually host these applications.

In this article, I will show you how to easily add a lock to a Glitch application to monetize it! First, [try the application](https://unlock-example.glitch.me/), or check the embedded version below! You can click on the Fishes in the top right corner to <em>View Source</em> or <em>Remix on Glitch</em>, if you want to edit the code (it's a great way to start building your own application!).

<div class="glitch-embed-wrap" style="height: 486px; width: 100%; margin-bottom: 50px">
  <iframe
    allow="geolocation; microphone; camera; midi; encrypted-media"
    src="https://glitch.com/embed/#!/embed/unlock-example?previewSize=100&previewFirst=true&sidebarCollapsed=true"
    alt="unlock-example on Glitch"
    style="height: 100%; width: 100%; border: 0;">
  </iframe>
</div>

Let's start by clicking on the **View Source** button. Use the little ▶️ button in the top right corner to view the list of files. Our application is very trivial and includes the following files `index.html`, `index.js`, `style.css` and `unlock.js`.

# Index.html

The `index.html` file includes the markup which is displayed by the web browser, as well as "loads" the other relevant files, such as the styles from the `style.css` file and the JavaScript code from both `index.js` and `unlock.js`.

The markup on the page includes 3 important elements. They all have the class `unlock-protocol`. We will use this class in our script to identify what needs to be shown or hidden based on the status of the visitor (member or not!).

1. The first paragraph with the class `loading` acts as a placeholder and it will only be visible while the rest of the page is being loaded.

```
<p class="unlock-protocol loading">
  Loading!
</p>
```

2. The second paragraph is hidden by default (see `style="display:none"`), and has the class `unlocked`. This one will be only shown when the visitor is a member.

```
<p class="unlock-protocol unlocked" style="display:none">
  Thanks for being a member ;)
</p>
```

3. The 3rd paragraph is also hidden by default, but this time it has the class `locked`, which means it will be shown when the visitor is not a member. That's in this paragraph that we will add a button for the user to purchase their membership, through the `unlockProtocol.loadCheckoutModal()` method.

```
<p class="unlock-protocol locked" style="display:none">
  <button onclick="window.unlockProtocol.loadCheckoutModal()">
    Please, become a member now!
  </button>
</p>
```

# Unlock.js

Let's now look at the `unlock.js` script. This script has several purposes:

1. It loads the unlock paywall application

```
// Load Unlock
var js = document.createElement("script")
sc = document.getElementsByTagName("script")[0]
js.src="https://paywall.unlock-protocol.com/unlock.latest.min.js"
sc.parentNode.insertBefore(js, sc)
```

2. It configures the behavior of the paywall application

```
// Configure Unlock
var unlockProtocolConfig = {
  locks: {
    '0xb77030a7e47a5eb942a4748000125e70be598632': {
      network: 137,
    },
  },
}
```

3. And finally, it handles the events to show or hide elements based on the state of the visitor. By default, it hides all elements with the `unlock-protocol` class, and just shows the ones which are relevant to the event which was emitted.

```
// Handle unlock events to hide/show element based on state
window.addEventListener('unlockProtocol', function(e) {
  var state = e.detail

  document.querySelectorAll('.unlock-protocol').forEach((element) => {
    element.style.display = 'none';
  })
  document.querySelectorAll(`.${state}`).forEach((element) => {
    element.style.display = 'block';
  })
})
```

That's it!

# What are you building?

Unlock should be a very small part of any application because it is just about _access control_. What your application grants to users is completely up to you! Here are a few applications which you might be interested in looking at:

- A [chat room application](https://ethcc-chat.glitch.me/) where only members can participate! I built this application for [EthCC](https://ethcc.io/) to show how easy to re-use a locks used to sell tickets in a different context!
- A [locked Typeform](https://locked-typeform.glitch.me/). Typeform is an application which lets you build surveys and forms. This example shows how you can build a way to collect information only from your members!

What would you build?


Glitch is a modern web development tool which lets you build fast, full-stack web apps in your browser. Here's how to add locks to these applications!

Locking Glitch

<p><a href="https://glitch.com/">Glitch</a> is a modern web development tool wich lets you build fast, full-stack web apps in your browser. It's not only a developer tool which can prove very useful for prototyping applications very fast, but can also be used to actually host these applications.</p>
<p>In this article, I will show you how to easily add a lock to a Glitch application to monetize it! First, <a href="https://unlock-example.glitch.me/">try the application</a>, or check the embedded version below! You can click on the Fishes in the top right corner to <em>View Source</em> or <em>Remix on Glitch</em>, if you want to edit the code (it's a great way to start building your own application!).</p>
<div class="glitch-embed-wrap" style="height: 486px; width: 100%; margin-bottom: 50px">
  <iframe
    allow="geolocation; microphone; camera; midi; encrypted-media"
    src="https://glitch.com/embed/#!/embed/unlock-example?previewSize=100&previewFirst=true&sidebarCollapsed=true"
    alt="unlock-example on Glitch"
    style="height: 100%; width: 100%; border: 0;">
  </iframe>
</div>
<p>Let's start by clicking on the <strong>View Source</strong> button. Use the little ▶️ button in the top right corner to view the list of files. Our application is very trivial and includes the following files <code>index.html</code>, <code>index.js</code>, <code>style.css</code> and <code>unlock.js</code>.</p>
<h1>Index.html</h1>
<p>The <code>index.html</code> file includes the markup which is displayed by the web browser, as well as "loads" the other relevant files, such as the styles from the <code>style.css</code> file and the JavaScript code from both <code>index.js</code> and <code>unlock.js</code>.</p>
<p>The markup on the page includes 3 important elements. They all have the class <code>unlock-protocol</code>. We will use this class in our script to identify what needs to be shown or hidden based on the status of the visitor (member or not!).</p>
<ol>
<li>The first paragraph with the class <code>loading</code> acts as a placeholder and it will only be visible while the rest of the page is being loaded.</li>
</ol>
<pre><code>&#x3C;p class="unlock-protocol loading">
  Loading!
&#x3C;/p>
</code></pre>
<ol start="2">
<li>The second paragraph is hidden by default (see <code>style="display:none"</code>), and has the class <code>unlocked</code>. This one will be only shown when the visitor is a member.</li>
</ol>
<pre><code>&#x3C;p class="unlock-protocol unlocked" style="display:none">
  Thanks for being a member ;)
&#x3C;/p>
</code></pre>
<ol start="3">
<li>The 3rd paragraph is also hidden by default, but this time it has the class <code>locked</code>, which means it will be shown when the visitor is not a member. That's in this paragraph that we will add a button for the user to purchase their membership, through the <code>unlockProtocol.loadCheckoutModal()</code> method.</li>
</ol>
<pre><code>&#x3C;p class="unlock-protocol locked" style="display:none">
  &#x3C;button onclick="window.unlockProtocol.loadCheckoutModal()">
    Please, become a member now!
  &#x3C;/button>
&#x3C;/p>
</code></pre>
<h1>Unlock.js</h1>
<p>Let's now look at the <code>unlock.js</code> script. This script has several purposes:</p>
<ol>
<li>It loads the unlock paywall application</li>
</ol>
<pre><code>// Load Unlock
var js = document.createElement("script")
sc = document.getElementsByTagName("script")[0]
js.src="https://paywall.unlock-protocol.com/unlock.latest.min.js"
sc.parentNode.insertBefore(js, sc)
</code></pre>
<ol start="2">
<li>It configures the behavior of the paywall application</li>
</ol>
<pre><code>// Configure Unlock
var unlockProtocolConfig = {
  locks: {
    '0xb77030a7e47a5eb942a4748000125e70be598632': {
      network: 137,
    },
  },
}
</code></pre>
<ol start="3">
<li>And finally, it handles the events to show or hide elements based on the state of the visitor. By default, it hides all elements with the <code>unlock-protocol</code> class, and just shows the ones which are relevant to the event which was emitted.</li>
</ol>
<pre><code>// Handle unlock events to hide/show element based on state
window.addEventListener('unlockProtocol', function(e) {
  var state = e.detail

  document.querySelectorAll('.unlock-protocol').forEach((element) => {
    element.style.display = 'none';
  })
  document.querySelectorAll(`.${state}`).forEach((element) => {
    element.style.display = 'block';
  })
})
</code></pre>
<p>That's it!</p>
<h1>What are you building?</h1>
<p>Unlock should be a very small part of any application because it is just about <em>access control</em>. What your application grants to users is completely up to you! Here are a few applications which you might be interested in looking at:</p>
<ul>
<li>A <a href="https://ethcc-chat.glitch.me/">chat room application</a> where only members can participate! I built this application for <a href="https://ethcc.io/">EthCC</a> to show how easy to re-use a locks used to sell tickets in a different context!</li>
<li>A <a href="https://locked-typeform.glitch.me/">locked Typeform</a>. Typeform is an application which lets you build surveys and forms. This example shows how you can build a way to collect information only from your members!</li>
</ul>
<p>What would you build?</p>
