# useStatus

{% hint style="warning" %}
To make use of this hook, you must set up your own backend to handle status requests as described [here](https://authento.gitbook.io/authento-api/integration-guidance/address-based-verification/off-chain-access-control#backend).
{% endhint %}

## Usage

<pre class="language-javascript"><code class="lang-javascript">import { useStatus } from "authento-react";
  
<strong>export const MyComponent = () => {
</strong>  const { status, type, isLoading, refetch } = useStatus({
    endpoint: "https://api.example.com/status",
    refetchOnFocus: true
  });

  return (
    &#x3C;div>
      &#x3C;p>User Status: {isLoading ? "Loading..." : status}&#x3C;/p>
      &#x3C;p>User Type: {isLoading ? "Loading..." : type}&#x3C;/p>
      &#x3C;button onClick={refetch}>Refresh&#x3C;/button>
    &#x3C;/div>
  );
};
</code></pre>

## Configuration

The `useStatus` hook accepts a configuration object with the following options:

* `endpoint` (required): Your own endpoint for user status.
* `refetchOnFocus` (optional, default: `true`): A boolean value indicating whether to refetch the user status when the window gets focused.

## Return Value

The `useStatus` hook returns an object with the following properties:

* `status`: A string representing the user status. It will be `undefined` initially and will be updated with the fetched status when available.
* `type`: A string representing the user type. It will be `undefined` initially and will be updated with the fetched user type when available.
* `isLoading`: A boolean value indicating whether the data is being fetched from the endpoint.
* `refetch`: A function that can be called to manually trigger a refetch of the user status.
