Seetrue.client.react NPM

About The Project

SeeTrue.Client.React is a library which enables a seamless connection between your React application and a SeeTrue.API instance. On the background SeeTrue.Client.React uses SeeTrue.Client inside a React context, and it provides access to the authetication state and an API client through a hook.

SeeTrue.Client.React provides the following functionality:

Access to the authentication state
Acces to the autheticated user
Automatic token refresh on the background
Acces to the API client SeeTrue.Client

Built With

Built with hard work, tears, sweat, dedication and love.

Getting Started

Prerequisites

You need npm or yarn installed, you should also have a SeeTrue instance runinng.

Installation

using npm:

npm install seetrue.client.react

using yarn:

yarn add seetrue.client.react

Usage

To access the context we have to init a provider, which will setup our client connection, it also checks the localstorage for a refresh token, and if it founds a refresh token it tries to refresh your session.

Setup

In the root of you application initialize the SeeTrueProvider.

Import the SeeTrueProvider

import { SeeTrueProvider } from "seetrue.client.react";

Initialize the SeeTrueProvider

  <SeeTrueProvider
    host="http://localhost:5000"
    audience="http://localhost:5000"
    tokenLifeTime={60000}
  >
    <App />
  </SeeTrueProvider>

Prop	Type	Default value	Required	Description
host	string		true	The host of your SeeTrue.API instance
audience	string		true	A supported audience from your SeeTrue.API instance config
tokenLifeTime	number?	3600000	false	Access token lifetime in miliseconds (also represents the background token refresh interval)

Context usage

Import the hook

import { useSeeTrue } from "seetrue.client.react";

Use the hook:

const { isInitializing, isAuthenticated, user, client } = useSeeTrue();

Prop	Type	Description
isInitializing	boolean	Initializing state, when you open the app, the app checks the refresh token then refreshes the user. While this initial check happens we cannot determinate if the user is logged in or not. We can show a loader \| splash screen before we have a value which desribes the real authentication state.
isAuthenticated	boolean?	It tells us if the user is logged in or not. Before the app is initialized the value is undefined, after it can be true or false based on the initialization process.
user	object?	A user object providing account information about thr currently logged in user. Undefined if the user is not authenticated, docs
client	object	A SeeTrue.Client instance, which enables us to interact with the SeeTrue.API docs

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

Fork the Project
Create your Feature Branch (git checkout -b feature/AmazingFeature)
Commit your Changes (git commit -m 'Add some AmazingFeature')
Push to the Branch (git push origin feature/AmazingFeature)
Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Project Link: https://github.com/TheOnlyBeardedBeast/SeeTrue

seetrue.client

@everything-registry/sub-chunk-2727 @infinitebrahmanuniverse/nolb-see

0.3.1

3 years ago