# rLogin - the new authentication libraries for blockchain based apps

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](https://developers.rsk.co/rif/identity/) team, which will allow us to build a secure, reliable and scalable application from scratch.


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](https://github.com/rsksmart/rLogin) library.

In the second article, we will build a back-end for this app, using a [Express DID Auth](https://github.com/rsksmart/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.

Finally, in the third article, we will work with something a little bit more complex: the [RIF Data Vault](https://github.com/rsksmart/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.

## 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:
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:
- React.js for the front-end
- A compatible wallet - you can try with any of [these supported providers](https://github.com/rsksmart/rlogin#features) -- we recommend trying this with a browser wallet and a mobile wallet, to have both experiences

**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 [rLogin](https://github.com/rsksmart/rLogin). With this library, we are going to display a pop-up that lets users pick any compatible wallet of choice.

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 [Nifty browser wallet](https://chrome.google.com/webstore/detail/nifty-wallet/jbdaocneiiinmjbjlgalhcelgbejmnid) that has an easy setup for RSK (just switch network in the top left corner of the wallet), and [Defiant mobile wallet](https://defiantapp.tech/) that support RSK by default.

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


### Operate user's wallet

We are now connected to our user's wallet and we want to do three things:
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.

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.

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](https://faucet.rsk.co/) and try it out.

#### Sending transactions

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

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](https://explorer.testnet.rsk.co).

#### Digitally sign messages

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

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

Complex transactions, like smart contract operations, can be performed with any Web3 client, such as [`web3.js`](https://github.com/ChainSafe/web3.js), [`ethers.js`](https://github.com/ethers-io/ethers.js/) or [`ethjs`](https://github.com/ethjs/ethjs). For example, you can instantiate a `web3.js` object with:

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

#### Other operations

Sending transactions and signing messages are just the two most common operations, but with rLogin provider, you are able to perform any [EIP-1193](https://eips.ethereum.org/EIPS/eip-1193) operation:
- Send transactions
- Operate with smart contracts
- Sign messages ([EIP-191](https://eips.ethereum.org/EIPS/eip-191))
- Sign typed data ([EIP-712](https://eips.ethereum.org/EIPS/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 [`web3modal`](https://github.com/web3Modal/web3modal/), the Ethereum login tool. For setting up rLogin, you can pick any providers that are supported by `web3modal`, and, in addition, the library also allows setting up a challenge-response authentication model -- this will be explained in the following chapter.

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

## Useful links

* RIF Identity docs: https://developers.rsk.co/rif/identity/
* rLogin repo: https://github.com/rsksmart/rlogin
* rLogin docs: https://developers.rsk.co/rif/identity/rlogin/
* rLogin 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](https://github.com/ilanolkies)
Twitter: [@ilanolkies](https://twitter.com/ilanolkies)