rLogin
Connect your dApp to RSK blockchain and SSI in breeze
rLogin is a tool that allows the front end developer to connect their user with blockchain functionalities and self-sovereign identity models seamlessly. It provides a standard button and a pop-up that, within its different flavors, allows the developer to correctly authenticate a user following the Decentralized Identity and Verifiable Credentials protocols. In addition, it will allow the developer to interact with a user-centric cloud like service called the data vault. This service can be used to store and retrieve user's information with their permission.
Read the docs for more information and integration guidelines.
Features
- Supported wallet providers
- Browser wallets - wallets that are installed as an extension of the web browser
- Mobile wallets - wallets that are installed in mobile phone and support Wallet Connect
- Supported networks
- RSK Mainnet
- RSK Testnet
- Ethereum Mainnet
- Ganache (test network)
Quick start
-
Install rLogin
npm i @rsksmart/rlogin
-
Create
rLogin
DOM element, configure supported networks and wallet providersimport RLogin from '@rsksmart/rlogin' import WalletConnectProvider from '@walletconnect/web3-provider' export const rLogin = new RLogin({ cachedProvider: false, providerOptions: { walletconnect: { package: WalletConnectProvider, options: { rpc: { 1: 'https://mainnet.infura.io/v3/8043bb2cf99347b1bfadfb233c5325c0', 30: 'https://public-node.rsk.co', 31: 'https://public-node.testnet.rsk.co' } } } }, supportedChains: [1, 30, 31] })
Sample: https://github.com/rsksmart/rif-identity-manager/blob/main/src/rLogin.ts
-
Show the pop-up to the user
const handleLogin = () => { rLogin.connect() .then((rLoginResponse: any) => { const provider = rLoginResponse.provider; const dataVault = rLoginResponse.dataVault; const disconnect = rLoginResponse.disconnect; // save the response to be used later, here we are using React context context.rLoginresponse(rLoginResponse) }) .catch((err: string) => console.log(err)) }
Sample: https://github.com/rsksmart/rif-identity-manager/blob/main/src/app/LoginScreen.tsx
-
Request RPC methods
export const getAccounts = (provider: any) => provider.request({ method: 'eth_accounts' })
Or use
provider
as Web3 provider for your client of preference:Web3.js
,ethjs
,ethers.js
or other.Sample: https://github.com/rsksmart/rif-identity-manager/blob/main/src/helpers.ts
Flavors
-
Fully-decentralized apps: this kind of apps are used only client-side. The front-end will need to know user's address and information for presentational purposes. The core operations are performed using blockchain transactions.
-
Open apps: this are apps that can be accessed by anyone controlling a wallet. This apps are usually decentralized applications where user relays some operations to a centralized service. This applications need a challenge-response authentication - use a seamless setup with
@rsksmart/express-did-auth
-
Permissioned apps: for example, apps using Google OAuth to receive user's email are categorized in this flavor. This process of requestion credentials to grant user access is common and usually relies on centralized data silos. This dApp flavor will cover requesting user's Verifiable Credentials in a fully user-centric manner - this is setup in the backend activating Selective disclosure requests
-
Closed apps: for example, a back office. This are apps that only specific user's can access. This flavor is used to prove the user accessing an app holds or is delegated by a specific identity - perform this validations in your server's business logic
The code
The tool tries not to re-implement functionalities that are provided by other libraries. The work is strongly based on:
-
web3modal
- Wallet provider integrations are imported from npm package
- Core and components are re-implemented to enable developing custom UX flow and custom components
Run for development
Install dependencies - downloads and install dependencies from npm
npm i
Run tests - runs with jest
npm test
Currently, there are no tests :(. Please test it with a sample app.
The best way to test it is to run npm build:dev
to update the bundle after saving files. You will need to reload page after rebuilding, that is not automated yet.
Lint - runs eslint
syntax checks
npm run lint
Build for production - builds umd
into dist/main.js
npm run build
Build in watch mode - builds each time a file in src/
is updated
npm run build:dev
Serve the library - serves the library in http://localhost:5005
npm run serve
Metamask cannot be accessed without
http
- see https://ethereum.stackexchange.com/a/62217/620
Sample apps
Please first build for production.
Flavor | Import from | Location | Command | |
---|---|---|---|---|
Fully-decentralized | HTML DOM | ./sample/decentralized | npm run sample:dapp |
Serves the library in http://localhost:3005 and a dApp in http://localhost:3006. Go to 3006 with your browser |
Open app | HTML DOM | ./sample/with_be | npm run sample:open |
Serves the library in http://localhost:3005, dApp in http://localhost:3006/?backend=yes and back end in http://localhost:3007. This mode will not ask for Data Vault access. Go to 3006 with your browser |
Permissioned app | HTML DOM | ./sample/decentralized | npm run sample:permissioned |
Serves the library in http://localhost:3005, dApp in http://localhost:3006 and back end in http://localhost:3007. This mode will ask for Data Vault access. Go to 3006 with your browser |
Acknowledgements
Find all acknowledged bugs, future features, and improvements in repo issues