oreid-webwidget

ORE ID Web Widget Popup

Popup Web User Experience for ORE ID

This library can be used in any web application. However, if you are using React, you should use the React alternative to this library instead oreid-react.

Overview

This library works with oreid-js to provide a web pop-up user experince for common ORE ID flows - like logging-in and signing a transaction

Start a flow by triggering the user popup:

oreid.popup.auth({
    provider: 'google'
  })
  .then(onSuccess)
  .catch(onError);

This will launch a pop-up. When the user finishes the flow, the onError or onSuccess callback will be called.

This library works with oreid-js to save a users' accessToken after login to LocalStorage as well as perform other housekeeping functions.

Important

• This library must be used within browser or a web wrapper component that has a window object
• The auth login flow should be triggered by the user clicking on a button, link, or some other item that causes an Event. This will help get around pop-up blockers

Installation

npm install oreid-js oreid-webwidget

or

yarn add oreid-js oreid-webwidget

Sample Code

Initalize

import { OreId } from 'oreid-js'
import { WebWidget } from 'oreid-webwidget'

// Initialize libraries
const oreId = new OreId({ appId, apiKey, plugins:{ popup: WebWidget() }});
oreId.init().then(
  // oreid is ready
) 

Auth

import { oreId, isInitialized } from "./bootstrap";

<script>
  const onClick = () => {
    oreid.popup.auth({
      provider: 'google'
    })
    .then(data => { console.log(data) })
    .catch(error => { console.log(error) });
  }
</script>
<button click="onClick()">Auth</button>

Sign

import { oreId, isInitialized } from "./bootstrap";

<script>
  const onClick = () => {
    const userChainAccounts = oreId.auth.user.data.chainAccounts;
    // get first Ethereum account in user’s OREID account
    const ethAccount = userChainAccounts.find(ca => ca.chainNetwork === 'eth_main')
    // transactionBody is blockchain transaction (differs by chain type) 
    const transactionBody = {
      from: "0xF478...",
      to: "0xA200...",
      value: "1" // always a string
    };

    oreId.createTransaction({
      transaction: transactionBody,
      chainAccount: ethAccount.chainAccount,
      chainNetwork: ethAccount.chainNetwork,
    }).then(transaction => {
      // have the user approve signature
      oreId.popup.sign({ transaction })
        .then({ transactionId } => { ... })
        .catch(onError);
  })
  }
</script>
<button click="onClick()">Sign Transaction</button>

Create New Chain Account

import { oreId, isInitialized } from "./bootstrap";

<script>
  const onClick = () => {
      // have the user approve signature
      oreId.popup.newChainAccount({
        chainNetwork: 'eos-kylin',
      })
      .then({ chainAccount } => { ... })
      .catch(onError);
  }
</script>
<button click="onClick()">Create New Chain Account</button>

Recomended Startup Pattern

Initialize oreid-js once and pass the single instance around within your app. You can use a pattern like the one below .

// bootstrap.ts
import { OreId } from "oreid-js";

export let oreId: OreId;
export let isInitialized: boolean = false;
const appId = "MY_APP_ID";

// Initialize libraries
() => {
  if(initialized) return;
  oreId = new OreId({ appId, plugins:{ popup: WebWidget() }}); // apiKey is required for some features
  oreId.init().then(() => {
    // webwidget is ready to use
    isInitialized = true
  })
}();