In this series of three articles, we are going to build a decentralized application with a back-end. We will use rLogin suite, developed by team, which will allow us to build a secure, reliable and scalable application from scratch. RIF Identity The first article is an introduction and explains . It also shows how to perform different operations and interactions with the wallet: send transactions, digitally sign messages, and so on. This will be a pure front-end app at first. Users will be able to join the application with any RSK or Ethereum compatible wallet, even using a mobile phone wallet. This will be powered by library. how to connect to the user’s digital wallet rLogin In the second article, we will build a back-end for this app, using a library, which allows us to . The library enables a secure and simple authentication model where the user needs to digitally sign a message with their wallet. This optimizes the user experience avoiding the need to remember passwords, or receive any emails to validate identity. Express DID Auth authenticate users using their wallet address as a unique identifier Finally, in the third article, we will work with something a little bit more complex: the . This service allows users to have . We make use of the user’s wallet to encrypt files, empowering users with real privacy for their information. This means that even the Data Vault server cannot decrypt your data. The service allows us, for example, to store Verifiable Credentials that can be requested at the time as part of authentication. rLogin and DID Auth integrate this service and make use of this feature, enabling developers to do things that were never possible in the crypto world. RIF Data Vault a user-centric cloud storage for free, where saved files are encrypted on the client side How to connect to the user’s digital wallet In this first article, as mentioned before, we are going to connect to the user’s wallet from a React.js application. To summarize, we are going to: Create a front-end app Add a that requests user’s account and wallet access login button Describe some operations that can be done with user’s wallet Some tiny prerequisites: React.js for the front-end A compatible wallet - you can try with any of – we recommend trying this with a browser wallet and a mobile wallet, to have both experiences these supported providers Let’s start! The app we are going to build is published in this repo: https://github.com/rsksmart/rlogin-sample Create the front-end npx create-react-app rlogin-sample cd rlogin-sample We have a React.js front-end already created! If you want you can first clean-up a little bit of the UI removing React logo and such. Install rLogin Let’s install . With this library, we are going to display a pop-up that lets users pick any compatible wallet of choice. rLogin yarn add @rsksmart/rlogin @walletconnect/web3-provider With a quick setup, we can enable users to connect to our app using any browser wallet or even any mobile wallet. Connect to RSK Testnet with your wallet (or pick another set of supported networks in the setup). I recommend trying first with that has an easy setup for RSK (just switch network in the top left corner of the wallet), and that support RSK by default. Nifty browser wallet Defiant mobile wallet RLogin, { RLoginButton } WalletConnectProvider { useState } ; ; rLogin = RLogin({ : , providerOptions: { walletconnect: { : WalletConnectProvider, options: { : { : } } } }, : [ ] }) { [provider, setProvider] = useState( ) [account, setAccount] = useState( ) connect = rLogin.connect() .then( { setProvider(provider) provider.request({ : }).then( setAccount(account)) }) ( <RLoginButton onClick={connect}>Connect wallet</RLoginButton> <p>wallet address: {account}</p> ); } App; import from '@rsksmart/rlogin' import from '@walletconnect/web3-provider' import from 'react' import './App.css' // construct rLogin pop-up in DOM const new cachedProvider false // change to true to cache user's wallet choice // read more about providers setup in https://github.com/web3Modal/web3modal/ package // setup wallet connect for mobile wallet support rpc 31 'https://public-node.testnet.rsk.co' // use RSK public nodes to connect to the testnet supportedChains 31 // enable rsk testnet network ( ) function App const null const null // display pop up const => () ( ) => { provider } // the provider is used to operate with user's wallet // request user's account method 'eth_accounts' ( ) => [account] return < = > div className "App" </ > div export default We now have a simple button that, when clicked, displays a pop-up. This pop-up will let user pick their wallet of choice. Once the user accepts, their wallet address will be displayed in the front. Easy!! Operate user’s wallet We are now connected to our user’s wallet and we want to do three things: Get user’s balance Send blockchain transactions Digitally sign messages The last two operations will prompt a notification in the user’s wallet asking for permission to do so. Let’s go for it! Get user’s balance This is one of the most common queries we can do to the blockchain. To do so we are going to execute another RPC request. I also added some code for setting the tx hash to React state. [balance, setBalance] = useState( ) getBalance = provider.request({ : , : [account] }).then(setBalance) const '' const => () method 'eth_getBalance' params <button onClick={getBalance} disabled={!account}>get balance< p> /button> <p>balance: {balance}</ Get some funds in the and try it out. RSK Testnet faucet Sending transactions As an example, we are just going to send a basic transaction with no data. It is simple: [txHash, setTxHash] = useState( ) faucetAddress = sendTransaction = provider.request({ : , : [{ : account, : faucetAddress, : }] }).then(setTxHash) const '' const '0x88250f772101179a4ecfaa4b92a983676a3ce445' // giving back some funds const => () method 'eth_sendTransaction' params from to value '100000' <button onClick={sendTransaction} disabled={!account}>send transaction< p> /button> <p>txHash: {txHash}</ As mentioned before, this will notify the user asking for approval in their wallet. Once the user accepts, the method will return the transaction hash. This is the unique identifier of the transaction and can be searched in the . RSK Testnet explorer Digitally sign messages This is pretty similar! We just need to request another RPC request, : personal_sign [signature, setSignature] = useState( ) message = personalSign = provider.request({ : , : [message, account] }).then(setSignature) const '' const 'Welcome to RIF Identity suite!!!' const => () method 'personal_sign' params <button onClick={personalSign} disabled={!account}>sign message< p> /button> <p>signature: {signature}</ Performing complex transactions Complex transactions, like smart contract operations, can be performed with any Web3 client, such as , or . For example, you can instantiate a object with: web3.js ethers.js ethjs web3.js Web3 web3 = Web3(provider) import from 'web3' const new Other operations Sending transactions and signing messages are just the two most common operations, but with rLogin provider, you are able to perform any operation: EIP-1193 Send transactions Operate with smart contracts Sign messages ( ) EIP-191 Sign typed data ( ) EIP-712 Request user’s accounts Request user’s connected network Listen to network or accounts changes Listen to user disconnection The rLogin library rLogin is a front-end library that was built with one main purpose: to reduce the technical gap for new crypto apps users. Most of our work was put in building a simple and intuitive front-end, that in future versions will include tutorials for each wallet provider. We support RSK Mainnet and RSK Testnet, and also Ethereum and its testnets. The objective of rLogin is to maintain a set of quality assurance tests, making the library a reliable front-end tool to be used along different kind of applications. rLogin adds features to , the Ethereum login tool. For setting up rLogin, you can pick any providers that are supported by , and, in addition, the library also allows setting up a challenge-response authentication model – this will be explained in the following chapter. web3modal web3modal Thanks!! See you in the next edition. We are going to set up a back-end for our dApp! Useful links RIF Identity docs: r https://developers.rsk.co/rif/identity/ Login repo: r https://github.com/rsksmart/rlogin Login docs: r https://developers.rsk.co/rif/identity/rlogin/ Login sample apps: https://github.com/rsksmart/rlogin-sample-apps : web3modal https://github.com/web3Modal/web3modal/ EIP-1193 - Ethereum Provider JavaScript API: https://eips.ethereum.org/EIPS/eip-1193 RIF landing: https://rifos.org Ilan Olkies Github: @ilanolkies Twitter: @ilanolkies
