Elevate your SaaS product to login with MetaMask, Firebase, and paywall customers with unlock-protocol.
At Novum we use Unlock to add membership our momentum pairs.
- Use Metamask to log in via Firebase.
- Uses both firebase-admin and firebase v9.
- Firebase custom claims for access to Cloud Firestore.
- Dockerized application.
Clone repo, npm i | pnpm i.
-
Add the
serviceaccount.jsonobtained from firebase console -> Project settings -> Service accounts -> Generate new private and, encode to base64 using any of these commands.openssl base64 < serviceaccount.json -A | xclip -sel clipboardpaste contents of this file to.env(on mac use pbcopy instead of xclip).openssl base64 -in serviceaccount.json -out encoded_serviceaccount.txt -A- copy contents of this file to.envand do not commit thetxtfile.
-
Replace contents of
contract.abi.jsonthat you can get from your deployed contract. Example (etherscan of this sample application) -
Add
firebaseConfigfrom firebase console -> Project settings -> General (scroll down to your apps) tosrc/lib/constants.ts -
Add a JSON-RPC API provider from infura.io or alchemyapi.io to
.env.
pnpm dev and be sure to use MetaMask with RINKEBY as your network. Once you pay for the Unlock key will you be able to fetch the data from Firebase. Otherwise, you will get 403 Permission errors.
- The sample app requests the client to switch to the rinkeby network.
- Have Cloud Firestore enabled on Firebase.
- Have anonymous/Google provider login enabled on authentication on Firebase.
- The
firebase-adminpackage isn't friendly with serverless environments and this sveltekit example uses@sveltejs/adapter-node - The example at https://sveltekit-web3.herokuapp.com/ has a 1-day lock. To set up your lock please head over to https://unlock-protocol.com/.
- This example uses
user_data/user_collectionongetData()inindex.svelteModify this and the claims to fit your need.
A slightly modified version of claims from novum-insights/unlock-protocol-firebase
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if false;
}
function hasBasicSubsViaMetaMask() {
return request.auth != null && request.auth.token.metamask_user == true && request.auth.token.metamask_paid == true;
}
function hasBasicSubs() {
return hasBasicSubsViaMetaMask();
}
match /user_data/user_collection {
allow read: if hasBasicSubs();
}
}
}
- Login with google is implemented as an example and our product integration uses social login with stripe/rapyd.