Comment on page
Quickstart - ReactJS
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
yarn add oreid-js oreid-webpopup oreid-reactimport { 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()
// 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}`)
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