rLogin: The New Authentication Libraries for Blockchain Based Apps

March 17th 2021 304 reads

5

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 RIF Identity team, which will allow us to build a secure, reliable and scalable application from scratch.

0 reactions

The first article is an introduction and explains how to connect to the user’s digital wallet. 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 rLogin library.

0 reactions

In the second article, we will build a back-end for this app, using a Express DID Auth library, which allows us to authenticate users using their wallet address as a unique identifier. 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.

0 reactions

Finally, in the third article, we will work with something a little bit more complex: the RIF Data Vault. This service allows users to have a user-centric cloud storage for free, where saved files are encrypted on the client side. 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.

0 reactions

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:

0 reactions

1. Create a front-end app
2. Add a login button that requests user’s account and wallet access
3. Describe some operations that can be done with user’s wallet

Some tiny prerequisites:

0 reactions

• React.js for the front-end
• A compatible wallet - you can try with any of these supported providers – we recommend trying this with a browser wallet and a mobile wallet, to have both experiences

Let’s start!

0 reactions

The app we are going to build is published in this repo: https://github.com/rsksmart/rlogin-sample

0 reactions

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.

0 reactions

Install rLogin

Let’s install rLogin. With this library, we are going to display a pop-up that lets users pick any compatible wallet of choice.

0 reactions

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.

0 reactions

Connect to RSK Testnet with your wallet (or pick another set of supported networks in the setup). I recommend trying first with Nifty browser wallet that has an easy setup for RSK (just switch network in the top left corner of the wallet), and Defiant mobile wallet that support RSK by default.

0 reactions

import RLogin, { RLoginButton } from '@rsksmart/rlogin'
import WalletConnectProvider from '@walletconnect/web3-provider'
import { useState } from 'react';
import './App.css';

// construct rLogin pop-up in DOM
const rLogin = new RLogin({
  cachedProvider: false, // change to true to cache user's wallet choice
  providerOptions: { // read more about providers setup in https://github.com/web3Modal/web3modal/
    walletconnect: {
      package: WalletConnectProvider, // setup wallet connect for mobile wallet support
      options: {
        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 [provider, setProvider] = useState(null)
  const [account, setAccount] = useState(null)

    // display pop up
  const connect = () => rLogin.connect()
    .then(({ provider }) => { // the provider is used to operate with user's wallet
      setProvider(provider)
      // request user's account
      provider.request({ method: 'eth_accounts' }).then(([account]) => setAccount(account))
    })

  return (
    <div className="App">
      <RLoginButton onClick={connect}>Connect wallet</RLoginButton>
      <p>wallet address: {account}</p>
    </div>
  );
}

export default App;

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!!

0 reactions

Operate user’s wallet

We are now connected to our user’s wallet and we want to do three things:

0 reactions

1. Get user’s balance
2. Send blockchain transactions
3. Digitally sign messages

The last two operations will prompt a notification in the user’s wallet asking for permission to do so.

0 reactions

Let’s go for it!

0 reactions

Get user’s balance

0 reactions

This is one of the most common queries we can do to the blockchain.

0 reactions

To do so we are going to execute another RPC request. I also added some code for setting the tx hash to React state.

0 reactions

const [balance, setBalance] = useState('')

const getBalance = () => provider.request({
    method: 'eth_getBalance',
    params: [account]
}).then(setBalance)

<button onClick={getBalance} disabled={!account}>get balance</button>
<p>balance: {balance}</p>

Get some funds in the RSK Testnet faucet and try it out.

0 reactions

Sending transactions

0 reactions

As an example, we are just going to send a basic transaction with no data. It is simple:

0 reactions

const [txHash, setTxHash] = useState('')

const faucetAddress = '0x88250f772101179a4ecfaa4b92a983676a3ce445' // giving back some funds
const sendTransaction = () => provider.request({
    method: 'eth_sendTransaction',
    params: [{ from: account, to: faucetAddress, value: '100000' }]
}).then(setTxHash)

<button onClick={sendTransaction} disabled={!account}>send transaction</button>
<p>txHash: {txHash}</p>

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.

0 reactions

Digitally sign messages

0 reactions

This is pretty similar! We just need to request another RPC request,

personal_sign

0 reactions

const [signature, setSignature] = useState('')

const message = 'Welcome to RIF Identity suite!!!'
const personalSign = () => provider.request({
    method: 'personal_sign',
    params: [message, account]
}).then(setSignature)

<button onClick={personalSign} disabled={!account}>sign message</button>
<p>signature: {signature}</p>

Performing complex transactions

0 reactions

Complex transactions, like smart contract operations, can be performed with any Web3 client, such as

web3.js

ethers.js

ethjs

web3.js

0 reactions

import Web3 from 'web3'
const web3 = new Web3(provider)

Other operations

0 reactions

Sending transactions and signing messages are just the two most common operations, but with rLogin provider, you are able to perform any EIP-1193 operation:

0 reactions

• 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.

0 reactions

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.

0 reactions

rLogin adds features to

web3modal

web3modal

0 reactions

Thanks!! See you in the next edition. We are going to set up a back-end for our dApp!

0 reactions

Useful links

Ilan Olkies

0 reactions

Github: @ilanolkies

0 reactions

Twitter: @ilanolkies

0 reactions

5