# useSignature

{% hint style="warning" %}
To make use of this hook, you must set up an endpoint which takes an address string as a query parameter and returns a digital signature along with an expire timestamp. A reference implementation can be found [here](https://github.com/Authento/usage-examples/blob/main/address-based/on-chain-access-control/src/app/api/signature/route.ts).
{% endhint %}

## Usage

<pre class="language-javascript"><code class="lang-javascript">import { useSignature } from "authento-react";
  
<strong>export const MyComponent = () => {
</strong>  const { refetch: getSignature } = useSignature({
    endpoint: "https://api.example.com/signature",
    onSuccess: (expireTs, signature) => {
      console.log({ expireTs, signature });
    },
    onError: (error) => {
      console.log(error);
    },
  }); 

  return (
    &#x3C;div>
      &#x3C;button onClick={refetch}>Generate Signature&#x3C;/button>
    &#x3C;/div>
  );
};
</code></pre>

## Configuration

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

* `endpoint` (required): Your own endpoint for digital signature.
* onSuccess (optional): This function will fire when the digital signature is fetched successfully
* onError (optional): This function will fire when the signature request encounters an error.

## Return Value

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

* `signature`: A string representing the digital signature generated. It will be `undefined` initially and will be updated with the fetched signature when available.
* `expireTs`: A number representing the Unix timestamp (in seconds) used to generate the digital signature. It will be `undefined` initially and will be updated with the fetched value when available.
* `refetch`: A function that can be called to manually trigger a refetch of the digital signature.