Quickstart - ReactJS

Using React

The oreid-js library provides all the help you need to add ORE ID to your Javascript app

The oreid-webpopup adds a pop-up user experience to handle common flows like login and sign transaction.

The oreid-react library adds helpful hooks and components for your React app

See React sample apps here

Step 1 - Install components

yarn add oreid-js oreid-webpopup oreid-react

Step 2 - Initialize

import { OreId } from "oreid-js";
import { WebPopup } from "oreid-webpopup";
import { OreidProvider } from "oreid-react";

const oreId = new OreId({ appId, apiKey, plugins:{popup: WebPopup()}});
await oreId.init()

Step 3 - Launch Login

// Wrap your App with OreidProvider
<OreidProvider oreId={oreId}>
   <App />
</OreidProvider>

// Example Login Component 
export const Login: React.FunctionComponent = () => {
  const oreId = useOreId();
   const onClick = () => {
       oreId.popup.auth({ provider: 'google' })
       .then(onSuccess)
       .catch(onError);
   };
   return <button onClick={onClick}>Login to Google</button>;
};

  ...

// access user data
const userData = await oreid.auth.user.getData()
console.log(`Hello ${userData.name}`)

Step 4 - Launch Sign Transaction Flow

  const signTransaction = async () => {
    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 chainNetwork)
    const transactionBody = {
      from: "0xF478d…",
      to: "0xA200c…",
      value: "1"
    };
    try {
      // compose a blockchain transaction
      const transaction = await oreId.createTransaction({
        transaction: transactionBody,
        chainAccount: ethAccount.chainAccount,
        chainNetwork: ethAccount.chainNetwork,
      })
      // launch popup to have the user approve signature
      const { transactionId } = await oreId.popup.sign({ transaction })
    } catch (error) {
      console.log(error)
    }
 }