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)
    }
 }

Last modified 1yr ago