@hardwework/use-ful-auth

---

sidebar_position: 5

useAuth

Installation

Install the library with

npm install @hardwework/use-auth

import { generateApiClient } from "@hardwework/use-query";
import { AuthProvider } from "@hardwework/use-auth";
...
const apiClient = generateApiClient({
  baseUrl = "https://my.api.com/api/v1",
  authorizationHeader = "Authorization",
  authorizationPrefix = "Bearer"
})
// Or build your own apiClient whatever you want

const authUrl = "https://my.api.com/api/v1/auth";
...
root.render(
  <React.StrictMode>
    <AuthProvider apiClient={apiClient} authUrl={authUrl}>
      <App />
    </AuthProvider>
  </React.StrictMode >
);

useAuth

Parameters

Parameter	Type	Default	Description
url	string		Endpoint url
method	string	GET	Request method (GET, POST...)
executeImmediately	boolean	false	Sets whether the call should be executed when the component is created or wait for the call to executeQuery()
onSuccess	(response) => void	() => { }	Function executed after a successful query
onUnauthorized	(response) => void	() => { }	Function executed after an unsuccessful query if the response code is 401
onError	(response) => void	() => { }	Function executed after an unsuccessful query if the response code is not 401

Returned parameters

Parameter	Type	Description
isLogged	boolean	true if the user is logged, false otherwise
isLoading	boolean	true while the query is being executed, false otherwise, even if it has not yet started
isError	boolean	true while the query finished unsuccessfully, false otherwise
isSuccess	boolean	true while the query finished successfully, false otherwise
data	any	The query response if it finished successfully, undefined otherwise
error	any	The query response if it finished unsuccessfully, undefined otherwise
executeQuery	(data?: {}) => void	Trigger the query with optional body as parameter

AuthRoute

Parameters

Parameter	Type	Default	Description
children	React		The component to render
forLoggedUser	boolean	false	If true the route is accessible only for logged users, if false the route is accessible only for not logged users
action	function		Function executed after the user is logged or not logged. The function is executed only if the user is logged or not logged, not if the user is redirected to the login page or home page.
minimumLoadingTime	number	1000	Minimum time in milliseconds that the loading page is shown. If the loading time is less than the minimum loading time, the loading page is shown for the minimum loading time.
loader	React		Component to show while the user is logged or not logged. If not specified, the default loader is shown.

Examples

Example 1: useAuth

import { useAuth } from "@hardwework/use-auth";

const Login = () => {
  const { isLogged, isLoading, isError, isSuccess, data, error, executeQuery } =
    useAuth({
      url: "/user/",
      method: "GET",
      executeImmediately: false,
      onSuccess: (response) => {
        console.log("Login success");
      },
      onUnauthorized: (response) => {
        console.log("Login failed");
      },
      onError: (response) => {
        console.log("Login failed");
      },
    });

  const checkUserStatus = () => {
    executeQuery();
  };

  return (
    <div>
      <button onClick={checkUserStatus}>Login</button>
    </div>
  );
};

Example 2: useAuth

import React, { useEffect } from "react";
import { useAuth } from "@hardwework/use-auth";

const Login = () => {
  const { isLogged, isLoading, isError, isSuccess, data, error, executeQuery } =
    useAuth({
      url: "/user/",
      method: "GET",
      executeImmediately: true,
      onSuccess: (response) => {
        console.log("Login success");
      },
      onUnauthorized: (response) => {
        console.log("Login failed");
      },
      onError: (response) => {
        console.log("Login failed");
      },
    });

  return (
    <div>
      {isLoading ? (
        <div>Loading...</div>
      ) : isLogged ? (
        <div>Logged</div>
      ) : (
        <div>Not logged</div>
      )}
    </div>
  );
};

Example 3: AuthRoute

import { AuthRoute } from "@hardwework/use-auth";

const App = () => {
  return (
    <AuthRoute
      minimumLoadingTime={1000} // Minimum time in milliseconds that the loading page is shown
      forLoggedUser={false} // If true the route is accessible only for logged users
      loader={<CustomLoader />} // leave it undefined if you want to use the built in Loader
      action={() => {
        // Function executed when the user is redirected
        navigate("/");
      }}
    >
      // Your view
    </AuthRoute>
  );
};