React-oneid NPM

OneID SDK React hook

For more information on OneID and its features, see the documentation.

📲 Installation

In your React application, install react-oneid using the following command:

npm install --save react-oneid

🏃🏽‍♂️ Quick Start

Wrap your app with OneidProvider, and provide your apiKey and siteDomain.

import React from "react";
import ReactDOM from "react-dom";
import { OneidProvider } from "react-oneid";

ReactDOM.render(
  <OneidProvider apiKey="xxxxxxxx" siteDomain="<http/https>://xxxxxxxx">
    <App />
  </OneidProvider>,
  document.getElementById("root"),
);

And call the hooks inside your app:

import React, { useEffect, useState } from "react";
import { useOneid } from "react-oneid";

function App() {
  const [loggedIn, setLoggedIn] = useState(false)
  const [user, setUser] = useState()
  const { handleAuth, isAuthenticated, currentUser, logOut } = useOneid();

  useEffect(() => {
    if(isAuthenticated()) {
      setLoggedIn(true)
      currentUser().then(data => setUser(data.user))
    }
    else{
      setLoggedIn(false)
    }
  }, [isAuthenticated()])


  if (!loggedIn) {
    return (
      <div>
        <button onClick={() => handleAuth({type: "login", scope: "profile"})}>Authenticate</button>
      </div>
    );
  }

  return (
    <div>
    <h1>Welcome {user && user.email}</h1>

      <div>
        <button onClick={() => logOut()}>Logout</button>
      </div>
    </div>
  );
}

export default App

🧭 Table of content

💻 Usage

Wrap your app in `OneidProvider`

In order to let your components have access to OneId functions, wrap your app in a <OneidProvider></OneidProvider> component. This will handle the whole initialization for you. You need to provide the apiKey and siteDomain, which can be obtained from your OneID dashboard.

<OneidProvider apiKey="xxxxxxxx" siteDomain="<http/https>://xxxxxxxx">
  <App />
</OneidProvider>

This component will automatically initialize OneId with the provided apiKey and siteDomain. It will also keep the authentication of the user automatically in sync and easy accessible (see useOneid), and give access to all the other hooks.

Now you can use the hooks below in all App.tsx and all of its children:

useOneid - A group of functions as a single hook.
...

`useOneid`

The useOneid hook provides all the basics functionalities that you need for authentication and user data.

You can use it inside a component and have access to various data and functions:

const { handleAuth, isAuthenticated, currentUser, logOut } = useOneid()

You will have access to the following values by using this hook:

Option	Description
`handleAuth`	This accepts two parameters: `{ type: "login"\\| "signup", scope: "profile" \\| "basic" \\| "advance" }`
`isAuthenticated`	This returns a `Boolean` vaule
`currentUser`	This returns an object - `{ token: string, user: {...userProfile} }`
`logOut`	This clear the currently authenticated user from the instance of the application and localstorage