UAL

Harness the power of the Universal Authenticator Library!

Prerequisites

Do you have an ORE ID dApp using an EOSIO blockchain? If not, create one at https://oreid.io/developer/new-app.

UAL is a standard for EOSio based blockchains wallet interaction. UAL is generally integrated into a front-end web application using JavaScript/Typescript.

Packages recommended for a quick start:

  • ual-plainjs-renderer

  • ual-reactjs-renderer

Adding ual-oreid

Already have UAL up and runing in your web application?

Ual-oreid is added to the UAL instance similar to other UAL Authenticators.

  1. Install the dependencies

npm install oreid-webpopup ual-oreid

// alternatively
yarn add oreid-webpopup ual-oreid
  1. First, import the dependencies into your project.

import { WebPopup } from 'oreid-webpopup'
import { OreIdAuthenticator, AuthProvider } from 'ual-oreid'
  1. Create the OreIdAuthenticator object. Below, exampleNet is the network the ORE ID dApp works on. (Checkout the supported chains.)

const oreId = new OreIdAuthenticator(
  [],
  {
    appId: '<ORE ID Application ID>',  // register at oreid.io/developer
    plugins: { popup: WebPopup() }
  },
  AuthProvider.Google
)
  1. Pass the OreIdAuthenticator into your UAL implementation.

4a. Using ual-reactjs-renderer

<UALProvider
  chains={[exampleNet]}
  authenticators={[oreid]}
  appName={'My App'}
>
  <UALConsumer />
</UALProvider>

4b. Using ual-plainjs-renderer

const ual = new UALJs(
  userCallback,
  [exampleNet],
  'UAL Test',
  [oreId],
  {
    containerElement: document.getElementById('ual-div')
  }
)
  1. You're done! 🎉

When leveraging ual-reactjs-renderer, you may opt to create a UAL Consumer app using withUAL. If you do this in typescript, you'll need to pass a JSX element through the function.

Last updated