@alias-earth/react v1.1.1

Welcome

@alias-earth/react is a library of lightweight and customizable UI components that you can use to easily add support for alias.earth to your React application. Each component is designed to work right out of the box with zero or minimal configuration.

Get started by installing the module into your project:

npm i --save @alias-earth/react

To see a simple example of how to use these components (that you can just download and run) check out the react starter project. For help, ideas and feature requests, please join developer Discord.

Components

• Login
• Status

Login

import React, { Component } from 'react';
import { Login } from from '@alias-earth/react';
import { axios } from 'axios';

// ...

handleRequestAuth = async (signed) => {

  console.log(signed); // '_params_alias=alice&_params_sig=0x9c9b5...'

  try {

    // Request authorization from your application
    // using the url params that were digitally
    // signed by the user who wants to log in.
    await axios.get('https://<your_api>/auth?' + signed);
    alert('Successully verified identity');

  } catch (err) {
    alert('Failed to verify identity');
  }
};

// ...

<Login
  app='<your_unique_app_name>'
  onConfirm={this.handleRequestAuth}
/>

The Login button triggers a MetaMask to request to sign data to proving their alias.earth identity. The only two required props are app (a unique string which identifes your app) and onConfirm, which is your callback fuction to receive the signed data and send it your server. Unless you're developing on the rinkeby test network, leave network as default. The encode option allows you to specify that the auth request be encoded as json instead of as a URI (this might be useful if your auth route is POST instead oft GET, see createHypermessage in the core module docs). By default, auth requests include a unix timestamp (according to the client) in the signed data of all hypermessages, including auth requests. Setting timestamp to false disables this behavior. The two optional layout props are compact, which gives developers the option of rendering a smaller button, and roundCorners (patent pending :D) does exactly what is sounds like.

Properties

• app: required String, unique string which represents your application
• onConfirm: required function, called when user signs auth request
• onCancel: optional function, function when user rejects signature request
• network: optional String, 'rinkeby' or 'main' (default). Which network to sign data against
• encode: optional String, 'json' or 'uri' (default). Which format for hypermessage carrying auth request
• timestamp optional Boolean, default true, if auth request should include signed timestamp
• compact: optional Boolean, default false, render as smaller circular button
• roundCorners: option Boolean, default false, render button with rounded corners

Status

import React, { Component } from 'react';
import { Login } from from '@alias-earth/react';

// ...

<Status />

The Status component detects the address the user has selected in MetaMask and displays the alias linked to that address on the blockchain. If the user switches to a new address, the component will update the displayed alias automatically. This is useful for giving the user a visual indication of which alias they are currently acting as when the interact with your application by signing data or submitting transactions.

Properties

• position: optional, component floats 'top right', 'top left', 'bottom right', or 'bottom left' (default)