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.

• React.js
• TypeScript

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.

1. Import the SeeTrueProvider

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

2. 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!

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

License

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

Contact

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