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

• 📲 Installation
• 🏃🏽‍♂️ Quick Start
• 🧭 Table of content
• 💻 Usage
  • Wrap your app in OneidProvider
  • useOneid
• ⌨️ Typescript
• 🧑‍💻 Development
• ✔ License

💻 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 |

⌨️ Typescript

This library offers first-class Typescript support.

🧑‍💻 Development

Make sure to have node installed.

• Clone this repo
• Run the following command in the directory of the clone:

  cd react-oneid
  npm install

Please follow the code guidelines before submitting a PR.

Make sure the code is clear and readable Adhere to the style rules of Eslint, Prettier and Conventional Commit

✔ License

MIT © wolz-codelife

This hook is created using create-react-hook.