Web2 social networks are irrelevant, instead learn how to build your own Web3 Twitter Clone dApp from scratch.

Build your own web3 Twitter dApp with Solidity

Explore introduction to the project, prerequisites, course overview + all the awesome skills you will learn

Hey fam, Today we (Ismail, Tanishq and Metaschool team) are so excited to be building a new dApp with you today – the Twitter dApp.But why are we building it? Recently, there has been a constant debate regarding data privacy, ownership and advertising revenues of social media platforms. It is indeed true that the top ten tech companies in the world control most of the digital data globally. This means that we don’t have rights and control to our privacy, data and the decisions we make in our daily lives.It is now much more important than ever that we use decentralized internet (web3) as a tool to create a space where users can actually own and control their data rather than being sold by giants for advertising revenue. It is for this very reason I felt like while you are learning about Solidity and the web3 ecosystem, why don’t we attempt to create a decentralized version of Twitter (a Twitter DApp 🐦).<h4 style="margin-left:-15pt;">&nbsp; &nbsp;Course overview</h4>Sooo!! We are building a Twitter dApp today. The app will have the following functionality.<ol><li>Sign-in via Twitter using Web3Auth</li><li>Write a tweet as NFT</li><li>Upvote and Comment on a tweet</li><li>Buy a tweet on OpenSea.</li><li>Interoperability of the DApp with Torus Wallet and Wallet Connect</li></ol>This will be a very informative course on how to deploy an end to end application from scratch!There are 3 main modules to any E2E Application<ol><li>Smart Contracts</li><li>Backend</li><li>Frontend</li></ol>Ours will be a web3 centric course where we will spend most of our time exploring all of the web3 aspects of the DApp.This will majorly fall under the Smart Contract &amp; The Backend section.We will try to keep our discussion about the frontend brief, and focused on the web3 integration.All of the code for any section in this tutorial is available on our <a href="https://github.com/0xmetaschool/" target="_blank" rel="noopener noreferrer">Github</a>.So feel free to consult it if you wish to dive deeper into the frontend!With that out of the way, let’s now talk about what skills we are going to learn today!&nbsp;<h4>Skills you will learn</h4>1. Social Login functionality by Web3Auth2. Using Quicknode&nbsp;RPC . As the name implies, they are quick and easy to set up, and support newer Testnets like Goerli and Mumbai.3. Writing smart contracts in solidity4. Minting NFTs using ERC 7215. Integrating with the OpenSea platform6. Using OpenZeppelin libraries to make our life easier7. Utilizing the power of React to build our very own frontend similar to Twitter’s homepage8. Integrating with Torus Wallet9. Building End To End Applications10. Using Remix IDEAll of this might seem overwhelming to you right now, but don’t worry. This tutorial has very little prerequisites, and we will cover all of the topics discovered above from a beginner’s viewpoint!<h4 style="margin-left:-15pt;">&nbsp; &nbsp;&nbsp;</h4><h4 style="margin-left:-15pt;">&nbsp; &nbsp; Prerequisites</h4>These are the things you should have set up before starting with the tutorial:<ol><li><a href="https://code.visualstudio.com/" target="_blank" rel="noopener noreferrer">VSCode</a> installed and&nbsp;<a href="https://www.youtube.com/watch?v=PX6xb8sRlFc&amp;ab_channel=SmartContractProgrammer" target="_blank" rel="noopener noreferrer">configured</a> for Solidity</li><li><a href="https://nodejs.org/en/" target="_blank" rel="noopener noreferrer">NodeJs</a> installed on your machine</li><li>MetaMask setup and installed on your machine</li><li>Twitter dApp Boilerplate -&nbsp;<a href="https://github.com/0xmetaschool/twitter-dapp-boilerplate" target="_blank" rel="noopener noreferrer">https://github.com/0xmetaschool/twitter-dapp-boilerplate</a> (Git Clone or download it)</li></ol>Note: We will be introducing two different web3 wallets in the tutorial today<ol><li>Metamask - We will use this wallet to deploy our smart contract using the Remix IDE. For the purpose of this tutorial we will assume you have MetaMask already set up in your browser</li><li>Torus Wallet - We will be using the Torus wallet to interact with the frontend, and integrate with the Web3Auth framework. We will be covering Torus Wallet in detail later on, so don’t worry if you don’t know anything about this :)</li></ol>Now before we move forward, let’s set some house rules first:<ol><li>Please do your assignments properly.</li><li>Join our&nbsp;<a href="https://discord.gg/vbVMUwXWgc" target="_blank" rel="noopener noreferrer">Discord server</a> and ask all relevant questions there.</li><li>Stay happy and positive!</li><li>WAGMI!!! 🚀</li></ol><h4>🛠 Contributing to this project</h4>Good news! This is an open source project, you can find the tutorial markdown files&nbsp;<a href="https://github.com/0xmetaschool/twitter-dapp-boilerplate" target="_blank" rel="noopener noreferrer">here</a>. If you find any issues in the code or tutorial, please feel free to resolve it. We love love love contributions by our community and we give acknowledgement to contributors in our discord and GitHub profile too.Also, don’t forget to star ⭐️ our repository! We will be very thankful! ♥️Let me show you how the final app will look like! 😍Are you excited? How about a cherry on the top?You’ll get a very special NFT on completion of this course.&nbsp;Let’s get started!!!

😎 Introduction

<h4>Setting up Quick Node</h4>Ethereum is a distributed network of computers, every time we write, update or transact on the Ethereum blockchain, these computers need to register our transaction and agree on it. Either we can write a program to do this on our own (it can be time and engineering intensive) or we can use a service that makes it super easy and simple for us to achieve it.<a href="https://www.quicknode.com/?utm_source=partner&amp;utm_campaign=metaschool&amp;utm_content=metaschool-guides&amp;utm_medium=partner" target="_blank" rel="noopener noreferrer">Quicknode</a> is a powerful blockchain development suite offering API and node services both of which allow for seamlessly interacting with blockchains (Polygon Mumbai blockchain in our case). Today, we will particularly be using the <a href="https://www.quicknode.com/?utm_source=partner&amp;utm_campaign=metaschool&amp;utm_content=metaschool-guides&amp;utm_medium=partner" target="_blank" rel="noopener noreferrer">Quicknode’s</a> node service for our transactions on blockchain.For now let’s go ahead and set up a node for ourselves. So go and quickly set up your own free <a href="https://www.quicknode.com/?utm_source=partner&amp;utm_campaign=metaschool&amp;utm_content=metaschool-guides&amp;utm_medium=partner" target="_blank" rel="noopener noreferrer">Quicknode</a> account and come back.Let’s sign up at&nbsp;<a href="https://www.quicknode.com/?utm_source=partner&amp;utm_campaign=metaschool&amp;utm_content=metaschool-guides&amp;utm_medium=partner" target="_blank" rel="noopener noreferrer">Quicknode</a>, get your free account, and follow the instructions below.Sign up for your free account and get to create an endpoint.<ol><li>Chain - Polygon</li><li>Network - Polygon Mumbai</li></ol>Your WSS key and HTTP address is important, save it somewhere for now, and now let’s setup your <a href="https://www.quicknode.com/?utm_source=partner&amp;utm_campaign=metaschool&amp;utm_content=metaschool-guides&amp;utm_medium=partner" target="_blank" rel="noopener noreferrer">Quicknode</a> with your metamask<div class="se-component se-image-container __se__float- __se__float-none" contenteditable="false"><figure style="margin: 0px;"><img src="https://lh6.googleusercontent.com/RK6FHtn8tS9NGCxsr1MVddzuCIZVtpd9bXLDH584eWaPH1WWxYQLDE2zAfQoc2IcsS51gBRHQLveWce2xY8zlXVBHmAa_7atYd5I1cNRg74o8ZrrCnOLfDfX4U1nUkhnnuJv8kZbY9OULsvAml2ljqlCVrfEnfMdpnh9PNZsh4kkKGZPtWEov024WQ" alt="image" data-origin="," data-proportion="true" data-align="none" data-file-name="RK6FHtn8tS9NGCxsr1MVddzuCIZVtpd9bXLDH584eWaPH1WWxYQLDE2zAfQoc2IcsS51gBRHQLveWce2xY8zlXVBHmAa_7atYd5I1cNRg74o8ZrrCnOLfDfX4U1nUkhnnuJv8kZbY9OULsvAml2ljqlCVrfEnfMdpnh9PNZsh4kkKGZPtWEov024WQ" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" data-size="," data-percentage="auto,auto" style="" data-index="0"></figure></div> Go to your Metamask Wallet and add new network<ol><li>Network Name - Polygon Mumbai</li><li>New RPC URL - Your <a href="https://www.quicknode.com/?utm_source=partner&amp;utm_campaign=metaschool&amp;utm_content=metaschool-guides&amp;utm_medium=partner" target="_blank" rel="noopener noreferrer">Quicknode</a> HTTP provider</li><li>Chain ID - 80001</li><li>Currency Symbol - MATIC</li><li>Blockchain Explorer -&nbsp;<a href="https://mumbai.polygonscan.com/" target="_blank" rel="noopener noreferrer">https://mumbai.polygonscan.com/</a> &nbsp;</li></ol><div class="se-component se-image-container __se__float- __se__float-none" contenteditable="false"><figure style="margin: 0px;"><img src="https://lh3.googleusercontent.com/uFpnMDm15ES1aIor8hmwXoCWSVYCrm3Qlc7zyBa0qhi1wq0q7WlN1LRqfn0O0im1JlDzm-VSpPBTlkQ7vbuFt4UQf5JLuH_hSNQQwFPwy7ns2pH6ftWYPEAtfit1Bjtkq6wxPuO_bXJ-3CGNIZDmWp2nlH6za-3Qw1eQWG126fR7FJpMseGVKOi4IA" data-origin="," alt="" data-proportion="true" data-align="none" data-file-name="uFpnMDm15ES1aIor8hmwXoCWSVYCrm3Qlc7zyBa0qhi1wq0q7WlN1LRqfn0O0im1JlDzm-VSpPBTlkQ7vbuFt4UQf5JLuH_hSNQQwFPwy7ns2pH6ftWYPEAtfit1Bjtkq6wxPuO_bXJ-3CGNIZDmWp2nlH6za-3Qw1eQWG126fR7FJpMseGVKOi4IA" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" data-size="," data-percentage="auto,auto" style="" data-index="1"></figure></div><h4> </h4>&nbsp;<h4>Let's get some fake MATIC $$ 🤑</h4>Try the following websites and try to get some fake MATICs. This fake money will be used for deploying your contract and doing transactions on your contract. This is not real money, you can’t buy NFTs, or other assets via these MATIC.All you have to do is to drop your public address on the following links and the MATIC will be transferred.<ol><li><a href="https://faucet.polygon.technology/" target="_blank" rel="noopener noreferrer">https://faucet.polygon.technology/</a></li><li><a href="https://mumbaifaucet.com/" target="_blank" rel="noopener noreferrer">https://mumbaifaucet.com/</a></li></ol>Huff, that was a lot of setup! But doing this in the very beginning of the course will be very convenient when we get our hands dirty with the code.So what are we waiting for? Let's get to it!

💻 Setting up your environment

Getting started

<h3>So what is the most important part of any Ethereum DApp?&nbsp;</h3>If you shouted smart contracts then you are absolutely right!Creating the smart contract will give us a concrete base for the rest of the dApp, we will capture all of the functionality of our project in one simple smart contract, and then we will build the rest of the application around it!Now if you have developed any smart contract before then there is a high probability that you have used either the Remix IDE or used VSCode with some 3rd party library like Hardhat or Foundry.To make it easier for our learners, we are going to use the&nbsp;<a href="https://remix.ethereum.org/" target="_blank" rel="noopener noreferrer">Remix IDE</a>, but if you are a fan of VS Code Solidity development then please feel free to use that as well.So first things first, create a new file called&nbsp;TwitterDapp.solWhen you log into the Remix IDE you should see something like this<div class="se-component se-image-container __se__float- __se__float-none" contenteditable="false"><figure style="margin: 0px;"><img src="https://lh4.googleusercontent.com/U-c9lOEvgPBCw6yedqb-UXbaJmR-xktvdLtE-2SoonHovdb78aq9oVK3BaDvazfGybo1voWx81ZIf8VJ47f4HkhuVFGCVnLC0yuPSxM4ky0b-TpIbDUQgK8lD4FsbdbnX4w4sfuGz1B1-MaDEDBGdsAkVMLoUtuto485BA1DGi2n5BpdNB2tD4dYOw" data-origin="," alt="" data-proportion="true" data-align="none" data-index="0" data-file-name="U-c9lOEvgPBCw6yedqb-UXbaJmR-xktvdLtE-2SoonHovdb78aq9oVK3BaDvazfGybo1voWx81ZIf8VJ47f4HkhuVFGCVnLC0yuPSxM4ky0b-TpIbDUQgK8lD4FsbdbnX4w4sfuGz1B1-MaDEDBGdsAkVMLoUtuto485BA1DGi2n5BpdNB2tD4dYOw" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" style="" data-size="," data-percentage="auto,auto"></figure></div> Right click on the contracts folder and create a new file called “TwitterDapp.sol”<div class="se-component se-image-container __se__float- __se__float-none" contenteditable="false"><figure style="margin: 0px;"><img src="https://lh4.googleusercontent.com/PgVmV7R8bki2R1sLXexj1zpJXWNWOxDjkfevBBUO4l8bbMFJJfyOh5OO6_VxFzGOif3Xl-o7zc9-YJJswlaxTds4TBMpMMZrttb8yJIh4LyviWHmW0eZqCTBa8Tg7YQ2bcCDn1w-mGogH62ohcqsb64jnliT-_1bX9WLC0PGKp4XTlwIPSLNAaYPpQ" data-origin="," alt="" data-proportion="true" data-align="none" data-index="1" data-file-name="PgVmV7R8bki2R1sLXexj1zpJXWNWOxDjkfevBBUO4l8bbMFJJfyOh5OO6_VxFzGOif3Xl-o7zc9-YJJswlaxTds4TBMpMMZrttb8yJIh4LyviWHmW0eZqCTBa8Tg7YQ2bcCDn1w-mGogH62ohcqsb64jnliT-_1bX9WLC0PGKp4XTlwIPSLNAaYPpQ" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" style="" data-size="," data-percentage="auto,auto"></figure></div> Now create a skeleton smart contract by adding the following code.<pre><code>// SPDX-License-Identifier: UNLICENSEDpragma solidity &gt;=0.8.0;contract TwitterDapp {}</code></pre>&nbsp;Adding import statementsJust above the contract definition add the following import statements<pre><code>// SPDX-License-Identifier: UNLICENSEDpragma solidity &gt;=0.8.0;import "@openzeppelin/contracts/token/ERC721/ERC721.sol";import "@openzeppelin/contracts/utils/Strings.sol";import "@openzeppelin/contracts/utils/Base64.sol";contract TwitterDapp is ERC721("TwitterDApp", "TDAPP") {}</code></pre>The first line of the contract refers to the License Identifier. Since our contract does not refer to any license, we declare it as UNLICENSED<pre><code>// SPDX-License-Identifier: UNLICENSED</code></pre><ul><li>The second line of the contract should define the Solidity compiler version. Our contract requires a minimum version of&nbsp;0.8.0 and above, and therefore referred as:</li></ul><pre><code>pragma solidity &gt;=0.8.0;</code></pre><ul><li>We now need to import any external contracts and/or libraries required for our project. In our case, we are using OpenZeppelin’s&nbsp;ERC721 to start off with a standard ready-made structure for ERC721. We also need to import OpenZeppelin’s&nbsp;Strings and&nbsp;Base64 libraries. For our NFTs to be vieweable on OpenSea, we require a means to resolve our&nbsp;tokenURI function to return a JSON for our tweet’s metadata.&nbsp;Strings will allow us string manipulation (which does not come built-in Solidity) and&nbsp;Base64 will allow us to format our result to JSON. We add the following lines to import:</li></ul><pre><code>import "@openzeppelin/contracts/token/ERC721/ERC721.sol";import "@openzeppelin/contracts/utils/Strings.sol";import "@openzeppelin/contracts/utils/Base64.sol";</code></pre>Now that the headers are set up, we move on to defining our contract. Our contract will be called twitterDapp and will inherit from Open Zeppelin's ERC721, to be defined with name as&nbsp;TwitterDApp and symbol as&nbsp;TDAPP:<pre><code>contract TwitterDapp is ERC721("TwitterDApp", "TDAPP"){}</code></pre>Creating the state variables and structsBefore writing functions for a smart contract, it is always a good idea to define all of the global entities that you might need.So let’s do exactly that.Add the following code inside your smart contract<pre><code>contract TwitterDapp is ERC721("TwitterDApp", "TDAPP") { &nbsp;&nbsp;&nbsp;uint256 tokenId; &nbsp;&nbsp;&nbsp;tweet[] public tweets; &nbsp;&nbsp;&nbsp;struct tweet{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;string name; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;string description; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;uint256 upvotes; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;string[] comments; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;address fromAddress; &nbsp;&nbsp;&nbsp;}}</code></pre>The very first thing we need is a way to store the metadata of the tweets on our platform, namely, the name (author) of the tweet, its description (the tweet itself), its upvotes, its comments and address of the tweeter. To cater to this requirement, we go ahead and create a&nbsp;struct in our contract:<pre><code>struct tweet{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;string name; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;string description; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;uint256 upvotes; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;string[] comments; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;address fromAddress;}</code></pre>We now need a means to assign a unique&nbsp;tokenId to refer to each distinct tweet. For this purpose, we declare a global variable of integer type as follows:<pre><code>uint256 tokenId;</code></pre>And, in order to store all tweets, we declare a dynamic length array of type&nbsp;tweet:<pre><code>tweet[] public tweets;</code></pre>Whenever a tweet is&nbsp;minted or its&nbsp;metadata updated, we will reference the tweet in our array to update the respective details. Note that our&nbsp;tokenId counter start from&nbsp;0 and therefore, passing in the&nbsp;tokenId as an index to our array will help locate the respective tweet.The FunctionsWe now move over to defining the functionality (functions) of our smart contract. Think of all the actions a user is permitted to take.tokenURI FunctionAt the very core, we need a mechanism for the&nbsp;tokenURI (a standard function to return metadata of NFTs in JSON) to be accessed and resolved by OpenSea.We, therefore, define a function called&nbsp;tokenURI that takes as argument a&nbsp;uint256 integer (for reference to our tokenId). Next, in reference to&nbsp;<a href="https://docs.opensea.io/docs/metadata-standards" target="_blank" rel="noopener noreferrer">OpenSea standards</a> we need to output&nbsp;name,&nbsp;description and&nbsp;attributes (Upvotes in our case).We utilize the&nbsp;Strings library to format our output as per JSON standards and then the&nbsp;Base64 library to resolve it to JSON as follows:<pre><code>function tokenURI(uint256 _tokenId) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;public &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;view &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;override &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;returns (string memory) &nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bytes memory dataURI = abi.encodePacked( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'{', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'"name":', '"', tweets[_tokenId].name, '",'&nbsp; '"description":' , '"',&nbsp; tweets[_tokenId].description, '"', ',' , &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'"attributes":', '[', '{', '"trait_type":', '"Upvotes",' , '"value":', Strings.toString(tweets[_tokenId].upvotes), '}', ']' , '}' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return string( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;abi.encodePacked( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"data:application/json;base64,", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Base64.encode(dataURI) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;); &nbsp;&nbsp;&nbsp;}</code></pre>writeTweet FunctionWe now move on to the&nbsp;writeTweet function for users to be able to&nbsp;mint new tweets. We take as argument&nbsp;name and&nbsp;description of the tweet.We utilize the&nbsp;_safeMint function offered by OpenZeppelin’s ERC721 which we imported for minting purposes.We then initialize our&nbsp;tweet struct with empty values and push to our array of tweets.We also set the&nbsp;fromAddress of the tweeter using&nbsp;msg.sender. The global&nbsp;tokenId is then incremented for keeping unique token ids for future minting:<pre><code>function writeTweet(string memory prefName, string memory prefDesc) public { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_safeMint(msg.sender, tokenId); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tweets.push(tweet({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: prefName, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description: prefDesc, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;upvotes: 0, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;comments: new string[](0), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fromAddress: msg.sender &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tokenId = tokenId + 1; &nbsp;&nbsp;&nbsp;}</code></pre>addComment FunctionSimilarly, we add a function for the user to add comments for a tweet. We take as argument the&nbsp;tokenId as index of the&nbsp;tweets array and the comment they want to add for it and push to the comments array of the respective tweet:<pre><code>function addComment(uint256 tweetIndex, string memory prefComments) public { tweets[tweetIndex].comments.push(prefComments);}</code></pre>upVote FunctionThe&nbsp;Upvote function follows the same strategy as&nbsp;addComment:<pre><code> &nbsp;&nbsp;function upvote(uint tweetIndex) public { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tweets[tweetIndex].upvotes += 1; &nbsp;&nbsp;&nbsp;}</code></pre>getAllTweets FunctionLastly, for the frontend to display all the tweets with their metadata, we require a function to get a list of all tweets. We write a&nbsp;getAllTweets() function without arguments that returns our&nbsp;tweets array:<pre><code> &nbsp;&nbsp;function getAllTweets() public view returns(tweet[] memory) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return tweets; &nbsp;&nbsp;&nbsp;}</code></pre>You did it! You finally did it! You should be proud of making it this far. 🥹<figure class="image"><div class="se-component se-image-container __se__float-none" contenteditable="false"><figure class="image" style="margin: 0px;"><img src="https://lh6.googleusercontent.com/kUQy0fk3tA-PnXjskKtDyERE0EhoH0p6OiHGjpq0gXAgMwXTOsRT4ZRXXa00rQ2IcFxoeiJlVawxh8dR6IOQ3yG4BuRmSsHrOMXd4B-GxG0swO3CreBLPAFrqN4yteIsvIGN4O95z9ITAcwRHUl43hxUXvlmvQ4v6b8s8LkgTyMQ2DRBbUQBHXySDQ" alt="success" data-origin="," data-proportion="true" data-align="none" data-index="2" data-file-name="kUQy0fk3tA-PnXjskKtDyERE0EhoH0p6OiHGjpq0gXAgMwXTOsRT4ZRXXa00rQ2IcFxoeiJlVawxh8dR6IOQ3yG4BuRmSsHrOMXd4B-GxG0swO3CreBLPAFrqN4yteIsvIGN4O95z9ITAcwRHUl43hxUXvlmvQ4v6b8s8LkgTyMQ2DRBbUQBHXySDQ" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" style="" data-size="," data-percentage="auto,auto"></figure></div></figure>&nbsp;Our smart contract is now ready. With everything combined, the smart contract should now look something like this!<pre><code>// SPDX-License-Identifier: UNLICENSEDpragma solidity &gt;=0.8.0;import "@openzeppelin/contracts/token/ERC721/ERC721.sol";import "@openzeppelin/contracts/utils/Strings.sol";import "@openzeppelin/contracts/utils/Base64.sol";contract TwitterDapp is ERC721("TwitterDApp", "TDAPP") { uint256 tokenId; tweet[] public tweets; struct tweet{ string name; string description; uint256 upvotes; string[] comments; address fromAddress; } function tokenURI(uint256 _tokenId) public view override returns (string memory) { bytes memory dataURI = abi.encodePacked( '{', '"name":', '"', tweets[_tokenId].name, '",' '"description":' , '"', tweets[_tokenId].description, '"', ',' , '"attributes":', '[', '{', '"trait_type":', '"Upvotes",' , '"value":', Strings.toString(tweets[_tokenId].upvotes), '}', ']' , '}' ); return string( abi.encodePacked( "data:application/json;base64,", Base64.encode(dataURI) ) ); } function writeTweet(string memory prefName, string memory prefDesc) public { _safeMint(msg.sender, tokenId); tweets.push(tweet({ name: prefName, description: prefDesc, upvotes: 0, comments: new string[](0), fromAddress: msg.sender })); tokenId = tokenId + 1; } function upvote(uint tweetIndex) public { tweets[tweetIndex].upvotes += 1; } function addComment(uint256 tweetIndex, string memory prefComments) public { tweets[tweetIndex].comments.push(prefComments); } function getAllTweets() public view returns(tweet[] memory) { return tweets; }}</code></pre>And that's all for this lesson!Onto the next one. 🤑

✍🏼 Writing your smart contract

This is where the real power of the Remix IDE will shine. Creating &amp; deploying simple independent smart contracts is super simple with Remix!<h3>Let’s now try to deploy our newly constructed smart contract on the Polygon Mumbai Network</h3>Before we start, make sure you have MetaMask installed on your browser. If you don’t know how to do this you can refer to our tutorial&nbsp;<a href="https://metaschool.so/course/understand-and-setup-metamask-account" target="_blank" rel="noopener noreferrer">here</a>Once you have got all this setup we are ready to deploy our contractGo to the compile tab of the Remix IDE and click on “Compile TwitterDapp.sol”<figure class="image"><div class="se-component se-image-container __se__float-none" contenteditable="false"><figure class="image" style="margin: 0px;"><img src="https://lh5.googleusercontent.com/m0RbmK9a6c1tBbGIcVp0GQ3xkIkCc86LSNEbIpurWKcTiMp_meTmKpNX0BpTzAzTmHuRKtGxkiUnzJk4b7lyJKM69PH4bgEuJT_AajL3XcR3RHWZhq_gihRpIBeb4p4IjnvXKjr2y51zO6WNGWddiKEQCyozqd73xauYuscDMSwyKipo1IFkIZbYoA" data-origin="," alt="" data-proportion="true" data-align="none" data-index="0" data-file-name="m0RbmK9a6c1tBbGIcVp0GQ3xkIkCc86LSNEbIpurWKcTiMp_meTmKpNX0BpTzAzTmHuRKtGxkiUnzJk4b7lyJKM69PH4bgEuJT_AajL3XcR3RHWZhq_gihRpIBeb4p4IjnvXKjr2y51zO6WNGWddiKEQCyozqd73xauYuscDMSwyKipo1IFkIZbYoA" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" style="" data-size="," data-percentage="auto,auto"></figure></div></figure>When the contract compiles, go to the deploy tab right below the compile tab, and change environment to “Injected Provider - Metamask”<figure class="image"><div class="se-component se-image-container __se__float-none" contenteditable="false"><figure class="image" style="margin: 0px;"><img src="https://lh3.googleusercontent.com/X7Rr9mZQK41bu7moLw44fJiWjPnbS0jDfPPUgbLBiSN87ZMJEnnagb6MrJ4DlvyH5wxRqHLI1B5nvvP3Q7V6xiSUu7RNmugK66BQPvcYR-BSFkoN7jfS9_j_Y_M7lpcYw68k9RpICymad6klyUQ8594Q7r8V3OGJcyd7M2CVeCOZH9iFLvONHCjZSA" data-origin="," alt="" data-proportion="true" data-align="none" data-index="1" data-file-name="X7Rr9mZQK41bu7moLw44fJiWjPnbS0jDfPPUgbLBiSN87ZMJEnnagb6MrJ4DlvyH5wxRqHLI1B5nvvP3Q7V6xiSUu7RNmugK66BQPvcYR-BSFkoN7jfS9_j_Y_M7lpcYw68k9RpICymad6klyUQ8594Q7r8V3OGJcyd7M2CVeCOZH9iFLvONHCjZSA" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" style="" data-size="," data-percentage="auto,auto"></figure></div></figure>After you do this the MetaMask window will pop up now you have to do 3 things:<ol><li>Make sure you are connected to Remix</li><li>Make sure you are on the Polygon Testnet Network</li><li>Make sure you have some Testnet, MATIC, if you don’t have any MATIC you can get it from a&nbsp;<a href="https://mumbaifaucet.com/" target="_blank" rel="noopener noreferrer">faucet</a> &nbsp;</li></ol><figure class="image"><div class="se-component se-image-container __se__float-none" contenteditable="false"><figure class="image" style="margin: 0px;"><a href="https://mumbaifaucet.com/"><img src="https://lh3.googleusercontent.com/OH98INhUgiPLb7oDUUXN6Sy1cRkYEdnNwO7P5jTH6GgSC3gJ64BaIQKAlCebjwS1jkVoIUxDDOQr4kg-YIdCawFr_4izmWxWDAfA0K_trrqN1R3JQuCrezyvw8x4tHPrrcXUyhwqK4t3QaU0389VF9onAzUfSwtOEFt5qiVngYKt9e-blZhGcPkDKg" data-origin="," alt="" data-proportion="true" data-align="none" data-index="2" data-file-name="OH98INhUgiPLb7oDUUXN6Sy1cRkYEdnNwO7P5jTH6GgSC3gJ64BaIQKAlCebjwS1jkVoIUxDDOQr4kg-YIdCawFr_4izmWxWDAfA0K_trrqN1R3JQuCrezyvw8x4tHPrrcXUyhwqK4t3QaU0389VF9onAzUfSwtOEFt5qiVngYKt9e-blZhGcPkDKg" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" style="" data-size="," data-percentage="auto,auto"></a></figure></div></figure>Once you are ready just choose the TwitterDapp contract in your contract tab, and click on Deploy<figure class="image"><div class="se-component se-image-container __se__float-none" contenteditable="false"><figure class="image" style="margin: 0px;"><img src="https://lh3.googleusercontent.com/EhEFLGKG1M25JgaR0_dGEy9s4LPA0HFRgbBkx2sQh1OdTGdQpXjc80hIYw-_FE76QjdMVh6ORfsJDLzjtWJkIEgWw5zA4JZXDOaQlJr3BhDLvEvmsX07JvFEV81flV3Z3sM0r4rwgwl49wNHOh9irxigyRcxukIt1mjvterURFxcqm9TpVONUkf5ew" data-origin="," alt="" data-proportion="true" data-align="none" data-index="3" data-file-name="EhEFLGKG1M25JgaR0_dGEy9s4LPA0HFRgbBkx2sQh1OdTGdQpXjc80hIYw-_FE76QjdMVh6ORfsJDLzjtWJkIEgWw5zA4JZXDOaQlJr3BhDLvEvmsX07JvFEV81flV3Z3sM0r4rwgwl49wNHOh9irxigyRcxukIt1mjvterURFxcqm9TpVONUkf5ew" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" style="" data-size="," data-percentage="auto,auto"></figure></div></figure>Confirm the MetaMask transaction and wait for 10-15 seconds and you should see your contract deployed on the left bar.<figure class="image"><div class="se-component se-image-container __se__float-none" contenteditable="false"><figure class="image" style="margin: 0px;"><img src="https://lh6.googleusercontent.com/e4scfPj333hYZmq04PSpGhLapxmiU9vctXlilGCbe7EAUUzo8wuMdgpCa6G6iau86AyHmd6CcxrhpfsOQjza7WaY7p-fM13ha5m0Gcrdxl74RnFambwauoAaooNLZ312wsxk-GkW_aDfKgA1rsLCkkHuzfzighE6SOZtlosETjA5wL27gZ26YhjVkA" data-origin="," alt="" data-proportion="true" data-align="none" data-index="4" data-file-name="e4scfPj333hYZmq04PSpGhLapxmiU9vctXlilGCbe7EAUUzo8wuMdgpCa6G6iau86AyHmd6CcxrhpfsOQjza7WaY7p-fM13ha5m0Gcrdxl74RnFambwauoAaooNLZ312wsxk-GkW_aDfKgA1rsLCkkHuzfzighE6SOZtlosETjA5wL27gZ26YhjVkA" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" style="" data-size="," data-percentage="auto,auto"></figure></div></figure>Note: Make sure to copy your contract address from the bottom and store it somewhere. Also better not to close your Remix browser yet :)We will be needing all of this soon when we create the frontend!And with that we have successfully deployed a smart contract on the Polygon Mumbai Blockchain!Congratulations!!Maybe, let's go back to our <a href="https://www.quicknode.com/?utm_source=partner&amp;utm_campaign=metaschool&amp;utm_content=metaschool-guides&amp;utm_medium=partner" target="_blank" rel="noopener noreferrer">Quicknode</a> dashboard and check if our node is working or not?Go to your Quicknode dashboard and click on metrics and check if you have any activity<figure class="image"><div class="se-component se-image-container __se__float-none" contenteditable="false"><figure class="image" style="margin: 0px;"><img src="https://metaschool.s3-ap-southeast-1.amazonaws.com/images/wMLM1FGFDOVwZ2FNG6jUSjzhi4UNApZeNSe1hkg3.png" data-origin="," alt="" data-proportion="true" data-align="none" data-index="5" data-file-name="wMLM1FGFDOVwZ2FNG6jUSjzhi4UNApZeNSe1hkg3.png" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" style="" data-size="," data-percentage="auto,auto"></figure></div></figure>Now let’s create a matching frontend for this application!

🚀 How to deploy your smart contract

Let’s work on the smart contract

Enough of Remix already, it is time to open everyone’s favorite way to code - VS Code!!Now before we move on to the frontend let’s download our boilerplate or clone the boilerplate of twitter dApp.&nbsp;<a href="https://github.com/0xmetaschool/twitter-dapp-boilerplate" target="_blank" rel="noopener noreferrer">CLICK HERE</a>Once you have the boilerplate, open the folder in VS code.Now go to your package.json file and populate that file with the following code<pre><code>{ "name": "twitter-dapp", "version": "0.1.0", "private": true, "dependencies": { "@alch/alchemy-web3": "^1.4.6", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.5.2", "@types/node": "^16.11.60", "@types/react": "^18.0.21", "@types/react-dom": "^18.0.6", "@web3auth/base": "^2.1.2", "@web3auth/openlogin-adapter": "^2.1.2", "@web3auth/torus-wallet-connector-plugin": "^2.1.2", "@web3auth/web3auth": "^2.1.2", "react": "^18.2.0", "react-bootstrap": "^2.5.0", "react-dom": "^18.2.0", "react-icons": "^4.4.0", "react-app-rewired": "5.0.1", "react-toastify": "^9.0.8", "typescript": "^4.8.3", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-app-rewired eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ "&gt;0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "assert": "^2.0.0", "buffer": "^6.0.3", "crypto-browserify": "^3.12.0", "https-browserify": "^1.0.0", "os-browserify": "^0.3.0", "process": "^0.11.10", "react-app-rewired": "^2.2.1", "stream-browserify": "^3.0.0", "stream-http": "^3.2.0", "url": "^0.11.0" }}</code></pre>And then go to your terminal and run<pre><code>npm install</code></pre>Great, now in the root directory create a file called config-overrides.js and paste the following code in this file<pre><code>const webpack = require('webpack'); module.exports = function override(config) { &nbsp;const fallback = config.resolve.fallback || {}; &nbsp;Object.assign(fallback, { &nbsp;&nbsp;&nbsp;crypto: require.resolve("crypto-browserify"), &nbsp;&nbsp;&nbsp;stream: require.resolve("stream-browserify"), &nbsp;&nbsp;&nbsp;assert: require.resolve("assert"), &nbsp;&nbsp;&nbsp;http: require.resolve("stream-http"), &nbsp;&nbsp;&nbsp;https: require.resolve("https-browserify"), &nbsp;&nbsp;&nbsp;os: require.resolve("os-browserify"), &nbsp;&nbsp;&nbsp;url: require.resolve("url"), &nbsp;}); &nbsp;config.resolve.fallback = fallback; &nbsp;config.plugins = (config.plugins || []).concat([ &nbsp;&nbsp;&nbsp;new webpack.ProvidePlugin({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;process: "process/browser", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Buffer: ["buffer", "Buffer"], &nbsp;&nbsp;&nbsp;}), &nbsp;]); &nbsp;config.ignoreWarnings = [/Failed to parse source map/]; &nbsp;return config;};</code></pre>Now have a peek inside the src/ folder , you should see a lot of files inside it already.We need 2 important files<ol><li>App.css</li><li>App.tsx (We will come to this later) &nbsp;</li></ol>&nbsp; &nbsp; &nbsp;App.cssThis is a simple CSS styling file, this styling isn’t relevant to this tutorial, so we are not going to go into detail.Just remove everything in this file and copy-paste all of the code which we have already made for you!You can find the link to the App.css here<a href="https://github.com/0xmetaschool/Twitter-Dapp/blob/main/src/App.css" target="_blank" rel="noopener noreferrer">https://github.com/0xmetaschool/Twitter-Dapp/blob/main/src/App.css</a>Before moving on, we now need to discuss the concepts that are involved in integrating with the Web3Auth Libraries and the Torus Wallet.Note: The next section is just to introduce you to the concepts involved using some basic code snippets, you don’t need to add any of this code to your projects until we reach the “Getting back to the Twitter DApp” section.

☑️ Setting up dependencies

In order to use this new world Twitter app (Web3 Twitter), we need to make it a service that recognises unique users and their identities. Conventionally, this is done by creating or associating user accounts in the app. We’ll take a safer approach and associate user accounts instead of creating and managing them in-app. 🤔Ever heard of SSO (Single Sign-On) ? SSO makes the user experience much safer and more reliable. Since, in this tutorial, we’re cloning an MVP of Twitter in Web3, we’ll be using Twitter social login (Login/Sign Up via Twitter) to log the user into the app.In this section, we’ll explore the Web3Auth library and look at how its underlying functionalities can help us create a secure SSO connection with Twitter. Web3Auth offers a secure full suite of libraries to integrate social logins across all the major third party platforms, in addition to, integration with your own custom authentication and wallet connectivity. Considering it is purpose built for authentication infrastructure of dApps and wallets, it reduces the onboarding time to seconds and goes a step further to offer non-custodial multi-factor authentication, removal of seed phrases (users losing access to their keys is no more a hassle) and integration support with third party APIs (such as FIAT to Crypto conversion). 🤩First let’s create a Torus Wallet which will be useful to integrate with the web3auth library<h4 style="margin-left:-15pt;">&nbsp; &nbsp; Creating Torus wallet</h4>Your Torus wallet is your key to the web3 world. You can interact with the blockchain via a Torus account. And of course, generally, it is your digital wallet to store, swap and buy cryptocurrencies, tokens, NFTs, and other amazing things in the web3 world.One cool thing about Torus wallet, compared to MetaMask, Trust Wallet and other popular options is its Social Login Sign On. This allows you to simply Sign In via a Social Profile without worrying about managing your private keys and/or remembering your Seed Phrases. In case the keys are required, they are viewable on the Torus Wallet and are interoperable with most other wallet providers.So, let’s go!Here are the installation steps:<ul><li>Go to&nbsp;<a href="https://app.tor.us/" target="_blank" rel="noopener noreferrer">app.tor.us</a></li><li>Sign Up via your preferred Social Login such as Twitter, Google, etc</li></ul><div class="se-component se-image-container __se__float- __se__float-none" contenteditable="false"><figure style="margin: 0px;"><img src="https://lh4.googleusercontent.com/uUimAriZa6ALg44ZyQdTDBk4vWs0CTauXovjHJ44zwZ0WV4v5vynxlRLEjk140nsW-upZgCYTav2vHJJI2T8ba6KJnCh2kBUMhJxLoYUqQbcedWHwV5T_hgt-yfg_Wnp94tVYzASkg-uT1l8hrj14Ul-3uVe-8_MzmNrRMlrWdaGBp7ljqHQdJd8" alt="TorusWalletLogin" data-origin="," data-proportion="true" data-align="none" data-index="0" data-file-name="uUimAriZa6ALg44ZyQdTDBk4vWs0CTauXovjHJ44zwZ0WV4v5vynxlRLEjk140nsW-upZgCYTav2vHJJI2T8ba6KJnCh2kBUMhJxLoYUqQbcedWHwV5T_hgt-yfg_Wnp94tVYzASkg-uT1l8hrj14Ul-3uVe-8_MzmNrRMlrWdaGBp7ljqHQdJd8" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" style="" data-size="," data-percentage="auto,auto"></figure></div> <ul><li>And, you are done! Quite easy, right?</li></ul>Congrats! your account is created and you must have received a public address. The public address will be on the top-right of the Torus Wallet Home in the pattern of:Example: 0x37EA9984481459885141F571907992e7261E837C<figure class="image"><div class="se-component se-image-container __se__float-none" contenteditable="false"><figure class="image" style="margin: 0px;"><img src="https://lh6.googleusercontent.com/IQTqTguac36emOR0m3m9VeKgLikUWDlKsSI4UdCNGgAECVkIBAmOq86kICsIHl3c3Wjcz7nYzYkc7VBTF9mqxT5NtAsX6ORQsB510Qsv7vqQIGLz-vFRwieNruVJ5eOQWOwo1_QtXPqYj0o9OflRJAJ0TvC6QO3ufwgnt4GVyM_3CGve6SvTX5xY" alt="TorusPubAddress" data-origin="," data-proportion="true" data-align="none" data-index="1" data-file-name="IQTqTguac36emOR0m3m9VeKgLikUWDlKsSI4UdCNGgAECVkIBAmOq86kICsIHl3c3Wjcz7nYzYkc7VBTF9mqxT5NtAsX6ORQsB510Qsv7vqQIGLz-vFRwieNruVJ5eOQWOwo1_QtXPqYj0o9OflRJAJ0TvC6QO3ufwgnt4GVyM_3CGve6SvTX5xY" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" style="" data-size="," data-percentage="auto,auto"></figure></div></figure>&nbsp;You can use this public address to buy, trade, and store Ethereum based tokens, cryptos, NFTs and you can even use it to sign in to websites like OpenSea. But are you wondering if it is safe to share this cryptic long address?Yes, it is completely safe to share your public address! You can share this address publicly to accept, buy, trade or store Ethereum based crypto.&nbsp;<h4 style="margin-left:-15pt;">&nbsp; &nbsp; Changing your network on Torus</h4>We will not be using the live/production environment at the moment because it will be expensive to deploy a contract. You will need some real MATIC to do that! And of course, learning and deploying contracts on production for the purpose of learning is not sustainable.<div class="se-component se-image-container __se__float- __se__float-none" contenteditable="false"><figure style="margin: 0px;"><img src="https://lh4.googleusercontent.com/acBAfkKzFqKa5AIaOG3_lqY5cPMKG8JLo6NEK656R3o7HGJZyNu8Fd517DnQRHvC5n44Amz38bV104S539ew9_0IsZndAI2Q911v5Q7Jp752mn1oLSjv3g6igsnRQXccnuVqacHkmrkGrXfMkKLUH0D3FrMeY-AZZroh1-oz7R9SfMZlG77lvcda" alt="MaticNetworkChange" data-origin="," data-proportion="true" data-align="none" data-index="2" data-file-name="acBAfkKzFqKa5AIaOG3_lqY5cPMKG8JLo6NEK656R3o7HGJZyNu8Fd517DnQRHvC5n44Amz38bV104S539ew9_0IsZndAI2Q911v5Q7Jp752mn1oLSjv3g6igsnRQXccnuVqacHkmrkGrXfMkKLUH0D3FrMeY-AZZroh1-oz7R9SfMZlG77lvcda" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" style="" data-size="," data-percentage="auto,auto"></figure></div> &nbsp;We will switch to Matic Mumbai (Polygon Testnet) Network, which is a test network that pretty much is a simulation of Polygon blockchain production. Just navigate to the Settings page of Torus Wallet and switch your network to Mumbai. Just like in the above image.&nbsp;<h4 style="margin-left:-15pt;">&nbsp; &nbsp; Get your private Torus Wallet key</h4>Private keys can be accessed from the Settings page in the menu of Torus Wallet:<div class="se-component se-image-container __se__float- __se__float-none" contenteditable="false"><figure style="margin: 0px;"><img src="https://lh6.googleusercontent.com/u7h9APxgawFQDMIzhEREKn681VhG7dDuqkjvfZJA8r2_Xzg33Igd36kxeInu-V5RTD3bvAA7rTK1v4TCdYC0xSVlSg7Igu0s9QuwzhLxTlOw_We1cSDnUow8vitgDtjxlH2lWNFsrFkLmbLTxK03DrhxaJH-4hVhq_SY4uaWJMyY-5xcqDj_gwKq" alt="PrivateKeys" data-origin="," data-proportion="true" data-align="none" data-index="3" data-file-name="u7h9APxgawFQDMIzhEREKn681VhG7dDuqkjvfZJA8r2_Xzg33Igd36kxeInu-V5RTD3bvAA7rTK1v4TCdYC0xSVlSg7Igu0s9QuwzhLxTlOw_We1cSDnUow8vitgDtjxlH2lWNFsrFkLmbLTxK03DrhxaJH-4hVhq_SY4uaWJMyY-5xcqDj_gwKq" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" style="" data-size="," data-percentage="auto,auto"></figure></div> &nbsp;Important note: Never ever share your private keys with anyone. It is the master access to your walletKeep your account and private key safe in the next steps. For now, export the private key and paste it somewhere secure.🚨 DON’T COMMIT YOUR PRIVATE KEY ON GITHUB, DON’T SHARE IT ON DISCORD, DON’T SHARE IT ANYWHERE!🚨 IF YOUR PRIVATE KEY IS PUBLIC, HACKERS AND STEALERS WILL TAKE ALL YOUR FUND AND EVERYTHING THAT IS ASSOCIATED WITH THAT ACCOUNT.🚨BE EXTRAAA VIGILANT!!

🚴🏻 A quick tour about Web3Auth

Web3AuthCore is a class that comes with the Web3Auth library. The instance of Web3AuthCore can be configured to manage a full-fledged SSO connection.In order to create the instance of Web3AuthCore, we need to specify the backend configurations; the chain at which the contract is deployed, in this case. Let’s look at the following code snippet.<pre><code>import { Web3AuthCore } from "@web3auth/core";import { CHAIN_NAMESPACES } from "@web3auth/base";const web3auth = new Web3AuthCore({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;chainConfig: { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;chainNamespace: CHAIN_NAMESPACES.EIP155, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;chainId: "0x13881", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rpcTarget: "https://sleek-rough-uranium.matic-testnet.discover.quiknode.pro/c7c16b97e7b45a469878ee260ad13a130010e26d/", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},});web3auth.init();</code></pre>If you look at the code snippet above, the three important attributes that we are passing in chainConfig are chainNamespace, chainId, and rpcTarget. All these fields are responsible for letting Web3AuthCore know about the blockchain where our contract is deployed.chainId = 0x13881 - this is the chain identifier for Polygon (Mumbai) test networkchainNamespace = CHAIN_NAMESPACES.EIP155 - this specifies that the chain is EVM compatible.rpcTarget = https://sleek-rough-uranium.matic-testnet.discover.quiknode.pro/c7c16b97e7b45a469878ee260ad13a130010e26d/ - makes it possible to communicate with the contract deployed on a chain that is hosted on an Quicknode node.Finally, the init() function on the Web3AuthCore instance initializes it so that it can be used for further interactions.You might be thinking we did not discuss any SSO or Twitter login in the above flow. Well, that’s true. Web3AuthCore indeed has the capability to initiate an SSO connection but it cannot do it alone 😀. It needs an OpenLogin adapter to be configured.&nbsp; &nbsp;&nbsp; &nbsp; Working with Web3Auth Developer Portal to Configure OpenLoginThe above code snippet in the parent section was just general interaction of Web3AuthCore with the blockchain. Now, in order to configure SSO, we need to add an OpenLogin adapter.Go to&nbsp;<a href="https://dashboard.web3auth.io/" target="_blank" rel="noopener noreferrer">https://dashboard.web3auth.io/</a> and log in with your credentials. Once logged in, you should have a screen similar to the one shown in the screenshot below.<div class="se-component se-image-container __se__float- __se__float-none" contenteditable="false"><figure style="margin: 0px;"><img src="https://lh3.googleusercontent.com/nQ_XGgE1bq8x1Gl7yubcggY-dKVii0bWpH_so91E7xc1J9NYnOiOJcKu49ZEG41hE-jvh_qp6Ib8dkO109P-zVwPYiUh13QWMdFIyclm43MKKMnGcCwQLSvAk8qE5QGU1HXjutpGVSDb7osVU68oxS1DwOFPwydZoSeC8rtQFaST-LOJ_lPJcZMF" data-origin="," alt="" data-proportion="true" data-align="none" data-index="0" data-file-name="nQ_XGgE1bq8x1Gl7yubcggY-dKVii0bWpH_so91E7xc1J9NYnOiOJcKu49ZEG41hE-jvh_qp6Ib8dkO109P-zVwPYiUh13QWMdFIyclm43MKKMnGcCwQLSvAk8qE5QGU1HXjutpGVSDb7osVU68oxS1DwOFPwydZoSeC8rtQFaST-LOJ_lPJcZMF" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" style="" data-size="," data-percentage="auto,auto"></figure></div> Click on Plug and play.<div class="se-component se-image-container __se__float- __se__float-none" contenteditable="false"><figure style="margin: 0px;"><img src="https://lh5.googleusercontent.com/ZkiZlZOlK7HMHIzvBNZXlPpzHrZhE6jBbXYxV5oHoo5gW0O9QqY7aEj5Rl0CCKc17uBNh7rMwtV-RdwcrhOpjqf3KXmdlPSCHo_X1IYRN0mVOB9a1Pc8Eg5RO4569yUuX5hJc7g-LZNXN41JIVjde8_1Qsf20gDX3WGTXN_nia_I5ABmK2akujns" data-origin="," alt="" data-proportion="true" data-align="none" data-index="1" data-file-name="ZkiZlZOlK7HMHIzvBNZXlPpzHrZhE6jBbXYxV5oHoo5gW0O9QqY7aEj5Rl0CCKc17uBNh7rMwtV-RdwcrhOpjqf3KXmdlPSCHo_X1IYRN0mVOB9a1Pc8Eg5RO4569yUuX5hJc7g-LZNXN41JIVjde8_1Qsf20gDX3WGTXN_nia_I5ABmK2akujns" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" style="" data-size="," data-percentage="auto,auto"></figure></div> Click on Create Project. It will open up a modal.<div class="se-component se-image-container __se__float- __se__float-none" contenteditable="false"><figure style="margin: 0px;"><img src="https://lh5.googleusercontent.com/xHI-7FmjFa-SsqOSShjeVVsRGJWZjqtnavMRee0zyxtJXVTcRMEu7wOqZk1X-SI3wWFvP9ad-m-oRi5inKBruDArNMWpTmAi61HIOPRM8uPMoU7erzaQq2jxbpfzcTK00_Mu18sM-8x6bSnEkvCWDw0Wkbsadot9G_hpskTvvn5v9Yl-yCIqDPBi" data-origin="," alt="" data-proportion="true" data-align="none" data-index="2" data-file-name="xHI-7FmjFa-SsqOSShjeVVsRGJWZjqtnavMRee0zyxtJXVTcRMEu7wOqZk1X-SI3wWFvP9ad-m-oRi5inKBruDArNMWpTmAi61HIOPRM8uPMoU7erzaQq2jxbpfzcTK00_Mu18sM-8x6bSnEkvCWDw0Wkbsadot9G_hpskTvvn5v9Yl-yCIqDPBi" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" style="" data-size="," data-percentage="auto,auto"></figure></div> Set the modal values as shown in the screenshot below.<div class="se-component se-image-container __se__float- __se__float-none" contenteditable="false"><figure style="margin: 0px;"><img src="https://lh4.googleusercontent.com/1UbkghLbzsul9bWrwqMJ0Uy7-YbhJAHvneE8HKOedUQMpb8DzCEqWobiqvRZrSO5HYBhj_BGvMEiJtfV_Os7pml_-ZSx4JCTnLXb76bZ9Qpo8r9ActhCbeOpRFU1V2uwF0x8oO4_UfweClQxB3pfyC2DQUjHT1Z6eNi0vxHKtEFFL59-OS2mY8Jk" data-origin="," alt="" data-proportion="true" data-align="none" data-index="3" data-file-name="1UbkghLbzsul9bWrwqMJ0Uy7-YbhJAHvneE8HKOedUQMpb8DzCEqWobiqvRZrSO5HYBhj_BGvMEiJtfV_Os7pml_-ZSx4JCTnLXb76bZ9Qpo8r9ActhCbeOpRFU1V2uwF0x8oO4_UfweClQxB3pfyC2DQUjHT1Z6eNi0vxHKtEFFL59-OS2mY8Jk" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" style="" data-size="," data-percentage="auto,auto"></figure></div> Click Create.Once the project is created, click on Custom Auth from the side menu.<div class="se-component se-image-container __se__float- __se__float-none" contenteditable="false"><figure style="margin: 0px;"><img src="https://lh6.googleusercontent.com/eyQhIuPKNRj1TOgyoGj2ewbJyyK0A3e1url3jt4GwlDVJ6eeiDz38lhe-1wlZ-sW-FEfdl3M7OQh9OtGYrzlqThFC6Dkv_gIIYObV6CtMF2R3q8y4zYVCUQzNWIiBJOVGUpij80rFKTLF4Oms80UGUinp9l7UzW4Fq61ssNQo-DRcrrR68i_-RR6" data-origin="," alt="" data-proportion="true" data-align="none" data-index="4" data-file-name="eyQhIuPKNRj1TOgyoGj2ewbJyyK0A3e1url3jt4GwlDVJ6eeiDz38lhe-1wlZ-sW-FEfdl3M7OQh9OtGYrzlqThFC6Dkv_gIIYObV6CtMF2R3q8y4zYVCUQzNWIiBJOVGUpij80rFKTLF4Oms80UGUinp9l7UzW4Fq61ssNQo-DRcrrR68i_-RR6" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" style="" data-size="," data-percentage="auto,auto"></figure></div> The Custom Auth screen will allow you to create a verifier. We need to create this verifier so that OpenLogin can talk to our Web3AuthCore instance using the verifier credentials.Let’s look at how to create a verifier.Click on the Create Verifier button. It will open up a modal like follows.<div class="se-component se-image-container __se__float- __se__float-none" contenteditable="false"><figure style="margin: 0px;"><img src="https://lh5.googleusercontent.com/mtMnJBL3ZdIuyksrctNRiWS9Z8xvW81laEj_C9rnS3d9PJOVuGVaitFUI-Z_mGOq4pY6cslBdekdbKB1uv7IDzUnq7ruYfasnkBkXmpUtkY3BnPlK6_rkM9IK2MtMVQ8jpZ3BJmhBpfBEWZNtEaAY8Ei8TCivuqWqR6YYIkvsYYLuS34EQI5CB9O" data-origin="," alt="" data-proportion="true" data-align="none" data-index="5" data-file-name="mtMnJBL3ZdIuyksrctNRiWS9Z8xvW81laEj_C9rnS3d9PJOVuGVaitFUI-Z_mGOq4pY6cslBdekdbKB1uv7IDzUnq7ruYfasnkBkXmpUtkY3BnPlK6_rkM9IK2MtMVQ8jpZ3BJmhBpfBEWZNtEaAY8Ei8TCivuqWqR6YYIkvsYYLuS34EQI5CB9O" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" style="" data-size="," data-percentage="auto,auto"></figure></div> Enter the verifier name/identifier of your choice.Select Auth0 from the Login Provider dropdown. Once you select Auth0 from the dropdown, it will ask for further authentication info.<div class="se-component se-image-container __se__float- __se__float-none" contenteditable="false"><figure style="margin: 0px;"><img src="https://lh4.googleusercontent.com/wMQEDjcrSGC1XqHuRtkkz7KQK9JBsec1KctpFZKUDP5ChJtFjXpRQhU5URzCWq5k2D62t58Jq-yBrHE4CFJujLSBq8HbdvoBqYrt-XFJ6czOd1aTjupehRdP7t8l4e5BDFrbVqasvrLvGT02enU8oXgBdkCV9SwG8FBRaSOKyMbkV4caExkwKDEi" data-origin="," alt="" data-proportion="true" data-align="none" data-index="6" data-file-name="wMQEDjcrSGC1XqHuRtkkz7KQK9JBsec1KctpFZKUDP5ChJtFjXpRQhU5URzCWq5k2D62t58Jq-yBrHE4CFJujLSBq8HbdvoBqYrt-XFJ6czOd1aTjupehRdP7t8l4e5BDFrbVqasvrLvGT02enU8oXgBdkCV9SwG8FBRaSOKyMbkV4caExkwKDEi" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" style="" data-size="," data-percentage="auto,auto"></figure></div> Choose Twitter from the Authentication Type. For Auth0 Client Id and Auth0 Domain, we need to go Auth0 developer dashboard and create a project. We’ll do that in the next section. For now, add the dummy values in there and click Create.Clicking on create will make your verifier and show it in the list as shown in the screenshot below. Wooooohoo! 😄<div class="se-component se-image-container __se__float- __se__float-none" contenteditable="false"><figure style="margin: 0px;"><img src="https://lh4.googleusercontent.com/c4kcxAQcBpv73G8Gw_v1Ekoh75XYRKgdY5kQ81hJKv2HpYLNbeD0fYyTI2t273Obodxo_turAwLWZVaD13cWYWXbaR3AHSHsuzOj1iNi1ZXi5-G5Rw0yCojbeRWMaXDT69XJ7NbygFYuecutahMUUZ9GjJfRF1Nth3r_FmMeT-03kB92Rsm7juUG" data-origin="," alt="" data-proportion="true" data-align="none" data-index="7" data-file-name="c4kcxAQcBpv73G8Gw_v1Ekoh75XYRKgdY5kQ81hJKv2HpYLNbeD0fYyTI2t273Obodxo_turAwLWZVaD13cWYWXbaR3AHSHsuzOj1iNi1ZXi5-G5Rw0yCojbeRWMaXDT69XJ7NbygFYuecutahMUUZ9GjJfRF1Nth3r_FmMeT-03kB92Rsm7juUG" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" style="" data-size="," data-percentage="auto,auto"></figure></div> &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;Working with Auth0 Developer PortalGo to&nbsp;<a href="https://auth0.com/" target="_blank" rel="noopener noreferrer">https://auth0.com/</a> and log in with your credentials.<div class="se-component se-image-container __se__float- __se__float-none" contenteditable="false"><figure style="margin: 0px;"><img src="https://lh4.googleusercontent.com/qje8zOLUBPjkTabVR-Ax29otQ7rctyIiShpu8Fspcv16jhRsBunXygOpA32avFIvbzWV4_cqp-PKeb4ecBJDebS8O-64HmQXamDv3vptcZy0ljtn6UE8QfUliP27zOMvyiHgqAMoqDmnqCjDsMKpAgIa6_aLhDFzbosNoYPrRFvAgxJ2EEUKzWYk" data-origin="," alt="" data-proportion="true" data-align="none" data-index="8" data-file-name="qje8zOLUBPjkTabVR-Ax29otQ7rctyIiShpu8Fspcv16jhRsBunXygOpA32avFIvbzWV4_cqp-PKeb4ecBJDebS8O-64HmQXamDv3vptcZy0ljtn6UE8QfUliP27zOMvyiHgqAMoqDmnqCjDsMKpAgIa6_aLhDFzbosNoYPrRFvAgxJ2EEUKzWYk" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" style="" data-size="," data-percentage="auto,auto"></figure></div> Click on Create Application.<div class="se-component se-image-container __se__float- __se__float-none" contenteditable="false"><figure style="margin: 0px;"><img src="https://lh4.googleusercontent.com/r3MPPVKe6vIoo2x3et0qDcAPtfGfWVS0XwBMHX7P0xcBQ3_m83nGFzOeMFSKnUwyY5emkGR0Z-byGnxXvPyyCI7guf1qF98OHraE97UZH8Mz05P_bvnYatvg4ABChf4wdyKn_9OoziJDpBe6WXUshZlkou-RC4Yyg8tdw-xSn7s64q1IIGfzzCki" data-origin="," alt="" data-proportion="true" data-align="none" data-index="9" data-file-name="r3MPPVKe6vIoo2x3et0qDcAPtfGfWVS0XwBMHX7P0xcBQ3_m83nGFzOeMFSKnUwyY5emkGR0Z-byGnxXvPyyCI7guf1qF98OHraE97UZH8Mz05P_bvnYatvg4ABChf4wdyKn_9OoziJDpBe6WXUshZlkou-RC4Yyg8tdw-xSn7s64q1IIGfzzCki" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" style="" data-size="," data-percentage="auto,auto"></figure></div> Give a name to your application and select Single Page Web Applications from the list of options. Click Create.<div class="se-component se-image-container __se__float- __se__float-none" contenteditable="false"><figure style="margin: 0px;"><img src="https://lh6.googleusercontent.com/nxqN6OqAD75E7fyQLQE74BCf2EFU7vGfVHYvgGiU-iEdLb2jTmKItK6xfrAI3fm8wmW_ywSop7Ysm5kayFH1V9_vq9fgwIcGKBA2N3G1idgU0NdN26QBvLJAGsJywKPBEKSSELu-nbh5CAaeR-yZbVSBCiec6kkmGkPE2yRXVNDV_n-7n_Ro49A2" data-origin="," alt="" data-proportion="true" data-align="none" data-index="10" data-file-name="nxqN6OqAD75E7fyQLQE74BCf2EFU7vGfVHYvgGiU-iEdLb2jTmKItK6xfrAI3fm8wmW_ywSop7Ysm5kayFH1V9_vq9fgwIcGKBA2N3G1idgU0NdN26QBvLJAGsJywKPBEKSSELu-nbh5CAaeR-yZbVSBCiec6kkmGkPE2yRXVNDV_n-7n_Ro49A2" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" style="" data-size="," data-percentage="auto,auto"></figure></div> Once your application is created, it will give you all the information including client ID and domain. You can now copy these values and replace the dummy values with these actual values in the verifier on the Web3Auth developer portal.One final thing on the Auth0 developer portal before we wrap it up, scroll down and look for Application Login URI and Allowed Web Origins. Add&nbsp;<a href="https://beta.openlogin.com/auth/" target="_blank" rel="noopener noreferrer">https://beta.openlogin.com/auth/</a> to both of them. This is required to establish a smooth connection of Web3AuthCore with Auth0 using the OpenLogin adapter.<div class="se-component se-image-container __se__float- __se__float-none" contenteditable="false"><figure style="margin: 0px;"><img src="https://lh6.googleusercontent.com/ByAPvd-99pyJJ2ySGPWHJqSsFlM_xLA5fz7jwIlLpGRIj1uOM455NvS9fPori8lQrfiK1tpYtcBjhwOuct-wHQxdmR1hTEde4fp8laJo7BUb32DFprOc-0o6iB9TAPMSjpyKRNUZH7A7oSRaE-ZQkFfDlDmSzq3iBRWx81HhY-8o40FfZWMLAOEf" data-origin="," alt="" data-proportion="true" data-align="none" data-index="11" data-file-name="ByAPvd-99pyJJ2ySGPWHJqSsFlM_xLA5fz7jwIlLpGRIj1uOM455NvS9fPori8lQrfiK1tpYtcBjhwOuct-wHQxdmR1hTEde4fp8laJo7BUb32DFprOc-0o6iB9TAPMSjpyKRNUZH7A7oSRaE-ZQkFfDlDmSzq3iBRWx81HhY-8o40FfZWMLAOEf" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" style="" data-size="," data-percentage="auto,auto"></figure></div> After all these configurations on these developer portals, we can now go back to our app and add the necessary code to establish an SSO connection in App.tsx<pre><code>import { OpenloginAdapter } from "@web3auth/openlogin-adapter";const clientId = "&lt;client_id_from_the_web3auth_dashboard_plug_n_play_project&gt;";const openloginAdapter = new OpenloginAdapter({ adapterSettings: { &nbsp;&nbsp;&nbsp; clientId, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; network: "testnet", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;uxMode: "popup", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;whiteLabel: { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; name: "Twitter DApp", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; logoLight: "&lt;hosted-logo-image-link&gt;", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; logoDark: "&lt;hosted-logo-image-link&gt;", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; defaultLanguage: "en", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dark: true, // whether to enable dark mode. defaultValue: false &nbsp;&nbsp;&nbsp;&nbsp; }, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;loginConfig: { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Add login configs corresponding to the providers on modal &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Twitter login &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;	jwt: { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 	name: "Custom Auth Login", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;	Verifier: "&lt;client_verifier_from_Auth0_dashboard&gt;", // Please create a verifier on the developer dashboard and pass the name here &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;	typeOfLogin: "twitter", // Pass on the login provider of the verifier you've created &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;	clientId: "&lt;clientId_from_Auth_0_dashboard&gt;", // Pass on the clientId of the login provider here - Please note this differs from the Web3Auth ClientID. This is the JWT Client ID &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;},});web3auth.configureAdapter(openloginAdapter);</code></pre>The above code snippet sets up the OpenLogin adapter using the IDs and names and configures it with the Web3AuthCore instance. Quite technical, eh? 😐

🖇 Creating an SSO Connection with Web3AuthCore

One final thing before we wrap up connection/init configuration is to connect the Torus wallet with our app so that the users can pay for the tweets in-app.This section is not about coding but a basic understanding of how the code will work.Connecting the Torus wallet is pretty simple. We just need to create an instance of TorusWalletConnectorPlugin and associate it with the Web3AuthCore instance.<pre><code>import { TorusWalletConnectorPlugin } from "@web3auth/torus-wallet-connector-plugin";const torusPlugin = new TorusWalletConnectorPlugin({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;torusWalletOpts: {}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;walletInitOptions: { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;whiteLabel: { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;theme: { isDark: true, colors: { primary: "#00a8ff" } }, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;logoDark: "https://cryptologos.cc/logos/ethereum-eth-logo.png", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;logoLight: "https://cryptologos.cc/logos/ethereum-eth-logo.png", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;useWalletConnect: true, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;enableLogging: true, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;await web3auth.addPlugin(torusPlugin);</code></pre>All in all, our initial configuration setup should look like follows :<pre><code>import { Web3AuthCore } from "@web3auth/core";import { CHAIN_NAMESPACES } from "@web3auth/base";import { OpenloginAdapter } from "@web3auth/openlogin-adapter";const clientId = "client id from the web3auth dashboard plug n play project"const web3auth = new Web3AuthCore({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;chainConfig: { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;chainNamespace: CHAIN_NAMESPACES.EIP155, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;chainId: "0x13881", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rpcTarget: "https://sleek-rough-uranium.matic-testnet.discover.quiknode.pro/c7c16b97e7b45a469878ee260ad13a130010e26d/", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},});const openloginAdapter = new OpenloginAdapter({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;adapterSettings: { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clientId, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;network: "testnet", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;uxMode: "popup", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;whiteLabel: { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: "Twitter DApp", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;logoLight: "&lt;hosted_logo_image_link&gt;", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;logoDark: "&lt;hosted_logo_image_link&gt;", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;defaultLanguage: "en", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dark: true, // whether to enable dark mode. defaultValue: false &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;loginConfig: { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Add login configs corresponding to the providers on modal &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Twitter login &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jwt: { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: "Custom Auth Login", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Verifier: "&lt;client_verifier_from_Auth0_dashboard&gt;", // Please create a verifier on the developer dashboard and pass the name here &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;typeOfLogin: "twitter", // Pass on the login provider of the verifier you've created &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clientId: "&lt;clientId_from_Auth_0_dashboard&gt;", // Pass on the clientId of the login provider here - Please note this differs from the Web3Auth ClientID. This is the JWT Client ID &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;});web3auth.configureAdapter(openloginAdapter);const torusPlugin = new TorusWalletConnectorPlugin({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;torusWalletOpts: {}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;walletInitOptions: { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;whiteLabel: { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;theme: { isDark: true, colors: { primary: "#00a8ff" } }, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;logoDark: "https://cryptologos.cc/logos/ethereum-eth-logo.png", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;logoLight: "https://cryptologos.cc/logos/ethereum-eth-logo.png", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;useWalletConnect: true, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;enableLogging: true, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;await web3auth.addPlugin(torusPlugin);web3auth.init();</code></pre>We’re done with all of our backend parts by now. Kudos! 🙌 &nbsp;Time to set up the Frontend flow in the next section.

👛 Connecting Torus Wallet to our wallet app

Let’s work on the backend now

🧮 Writing the framework

🖥 Some more frontend

Let’s work on the frontend now

Woooohoo! We are done. Now let’s run the project and see how our dApp looks like.Run your project by simply running this command<pre><code>npm start</code></pre><div class="se-component se-image-container __se__float- __se__float-none" contenteditable="false"><figure style="margin: 0px;"><img src="https://lh4.googleusercontent.com/dxlEODAOSf7IWcqMK1TDAKR2Vs_B-_OrL06WQJCLzHxaB5DV3ay2-A-3-8FHOAxHg3ppdY_W9q4Yaq9F-ZHnLHsNlRqFpY9rxVMe1re85ouZkiwG32JVxMS0oZFknkWWtTfG_9Dm6rSWmBIRuw5IXg1Rcfv9j6jKjzwZlDg-j8FtT-kQnHhDeQz8" alt="image" data-origin="," data-proportion="true" data-align="none" data-index="0" data-file-name="dxlEODAOSf7IWcqMK1TDAKR2Vs_B-_OrL06WQJCLzHxaB5DV3ay2-A-3-8FHOAxHg3ppdY_W9q4Yaq9F-ZHnLHsNlRqFpY9rxVMe1re85ouZkiwG32JVxMS0oZFknkWWtTfG_9Dm6rSWmBIRuw5IXg1Rcfv9j6jKjzwZlDg-j8FtT-kQnHhDeQz8" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" style="" data-size="," data-percentage="auto,auto"></figure></div>

👩🏻‍💻 Using NPM to run the frontend

<div class="se-component se-image-container __se__float- __se__float-none" contenteditable="false"><figure style="margin: 0px;"><img src="https://lh5.googleusercontent.com/IhEDi3rBFiwfO2BwZ2Q-L7vQpXP1RTEO0Vd0inRcit2ljJOLkYwSE5gt4OVLUI5bklh4QPc8dJY-cNGF0KBhSDXKnMZIxFnMDws-0UgJ2ibXAWAIrvNx5ldtgqg7HcDdd2tDt0DY4NnusL7gPYmfFL1OLLMsFymkjSg9fh5auAMnhVl_YolUBz6z" alt="image" data-origin="," data-proportion="true" data-align="none" data-index="0" data-file-name="IhEDi3rBFiwfO2BwZ2Q-L7vQpXP1RTEO0Vd0inRcit2ljJOLkYwSE5gt4OVLUI5bklh4QPc8dJY-cNGF0KBhSDXKnMZIxFnMDws-0UgJ2ibXAWAIrvNx5ldtgqg7HcDdd2tDt0DY4NnusL7gPYmfFL1OLLMsFymkjSg9fh5auAMnhVl_YolUBz6z" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" style="" data-size="," data-percentage="auto,auto"></figure></div> Now that we have connected the Torus Wallet plugin to our DApp, you should be able to view the logged in wallet on Torus by clicking on the icon on bottom-left and then choose the option&nbsp;Open Wallet. The user can now access their&nbsp;private key from the Torus Wallet interface and can proceed to connect with&nbsp;Wallet Connect using the&nbsp;Get Started with Wallet Connect option on the Torus Wallet App.<div class="se-component se-image-container __se__float- __se__float-none" contenteditable="false"><figure style="margin: 0px;"><img src="https://lh3.googleusercontent.com/QTSCtJESJAdo56ENfmqUcXJ1UWfIA6vZIjmkGs3oS60O8Ao_RJ5Cx8_J69uDNZq7ppt262IIqs9a4FjYGIF8PFgd8oS7MJlImDProD-yB7uuCgP7RAneNNW1zmn0OPeveCqBlNeEGTIGjLgFzStGCu-kdQ1vpwW-z__c6v0q1HxhjM1BjR-_-FVm" alt="torus wallet app" data-origin="," data-proportion="true" data-align="none" data-index="1" data-file-name="QTSCtJESJAdo56ENfmqUcXJ1UWfIA6vZIjmkGs3oS60O8Ao_RJ5Cx8_J69uDNZq7ppt262IIqs9a4FjYGIF8PFgd8oS7MJlImDProD-yB7uuCgP7RAneNNW1zmn0OPeveCqBlNeEGTIGjLgFzStGCu-kdQ1vpwW-z__c6v0q1HxhjM1BjR-_-FVm" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" style="" data-size="," data-percentage="auto,auto"></figure></div> SummaryIn this rollercoaster of a tutorial we learned how to ship an End to End application.<ul><li>We started off by creating our own smart contract using solidity and the Remix IDE.</li><li>We then did some backend exploring with web3auth and also learned how to use the Torus Wallet and Wallet Connect.</li><li>After that we set up a pretty detailed react project which helped us to integrate everything and play around with our DApp!</li></ul>We encourage you to run this DApp on your local server and play around with it much more. Try to see different functionalities and understand the codebase better on your own.Armed with this knowledge you should be ready to go out and create any dApp of your choosing with a fully functional frontend!And of course, if you liked the tutorial, show it some love on our <a href="https://discord.gg/vbVMUwXWgc" target="_blank" rel="noopener noreferrer">Discord</a>.See you in the next one!

Build your own web3 Twitter dApp with Solidity

Project Curriculum

Getting started

Let’s work on the smart contract

Let’s work on the backend now

Let’s work on the frontend now

Let’s run our dApp

🎉 Completion

Get your NFT Image

Why metaschool?

NFT Certificates

Free of cost

Expert Trainer

Self Paced

Frequently asked questions