oreid-react v1.5.0
ORE ID React Library
Popup User Experience and React helpers for ORE ID
This library should be used in a React application. If you aren't using React, you should instead use the pure HTML/Javascript version of this library here: oreid-webwidget.
This library requires the oreid-js
npm package.
Overview
This library works with oreid-js to provide a pop-up user experience for common ORE ID flows - like logging-in and signing a transaction
How to use
Installation
npm install oreid-js oreid-webwidget oreid-react
or
yarn add oreid-js oreid-webwidget oreid-react
After installation, initalize oreid-js
. We recommend that you initialize it once during your application's bootstrap.
// index.tsx
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { OreId } from "oreid-js";
import { WebWidget } from "oreid-webwidget";
import { OreidProvider } from "oreid-react";
let isInitialized;
const appId = "MY_APP_ID";
const oreId = new OreId({ appId, plugins: { popup: WebWidget() } });
// The privider will initialize oreid-js
ReactDOM.render(
<React.StrictMode>
<OreidProvider oreId={oreId}>
{isInitialized && <div>Your App</div>}
</OreidProvider>
</React.StrictMode>,
document.getElementById("root")
);
Auth
import React from "react";
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>;
};
Sign
import { useUser } from "oreid-react";
import React from "react";
export const Sign: React.FunctionComponent = () => {
const oreId = useOreId();
const user = useUser();
const onClick = () => {
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"
};
oreId.createTransaction({
transaction: transactionBody,
chainAccount: ethAccount.chainAccount,
chainNetwork: ethAccount.chainNetwork,
}).then(transaction => {
// have the user approve signature
oreId.popup.sign({ transaction })
.then({ transactionId } => { ... })
.catch(onError);
})
};
return <button onClick={onClick}>Sign Transaction</button>;
};
Create New Blockchain Account
import React from "react";
export const NewChainAccount: React.FunctionComponent = () => {
const oreId = useOreId();
const onClick = () => {
oreId.popup.newChainAccount({
chainNetwork: 'eos-kylin',
})
.then({ chainAccount } => { ... })
.catch(onError);
};
return <button onClick={onClick}>Create New Blockchain Account</button>;
};
Helpers
import { useIsLoggedIn, useOreId, useUser, useWebWidget } from "oreid-react";
import React from "react";
export const Action: React.FunctionComponent = () => {
const isLoggedIn = useIsLoggedIn(); // true or false
const oreId = useOreId(); // current instance of oreid-js
const user = useUser(); // current value of oreid.auth.user.data
const webWidget = useWebWidget(); // current instance of oreid-webwidget
};
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago