ORE ID
Search
K
Comment on page

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. 1.
    Install the dependencies
npm install oreid-webpopup ual-oreid
// alternatively
yarn add oreid-webpopup ual-oreid
  1. 2.
    First, import the dependencies into your project.
import { WebPopup } from 'oreid-webpopup'
import { OreIdAuthenticator, AuthProvider } from 'ual-oreid'
  1. 3.
    Create the OreIdAuthenticator object. Below, exampleNet is the network the ORE ID dApp works on. (Checkout the supported chains.)
const oreId = new OreIdAuthenticator(
[exampleNet],
{
appId: '<ORE ID Application ID>', // register at oreid.io/developer
plugins: { popup: WebPopup() }
},
AuthProvider.Google
)
  1. 4.
    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. 5.
    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.