# useTokenVerifyPopup

{% hint style="success" %}
Using this hook will keep the Authento verification popup safe from being blocked by the built-in popup blockers of major browsers.
{% endhint %}

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

## Usage

```javascript
import { useTokenVerifyPopup } from "authento-react";

export const MyComponent = () => {
  const { verify, status } = useTokenVerifyPopup({
    endpoint: "https://api.example.com/jwt",
    params: {
      verificationType: "BASIC",
      lang: "fr",
    },
  });
  
  return (
    <div>
      <button onClick={verify}>Verify</button>
      {status === "fetching" && <p>Fetching verification token</p>}
      {status === "success" && <p>Verification token fetched successfully</p>}
      {status === "error" && <p>Failed to fetch verification token</p>}
    </div>
  );
};
```

## Configuration

The `useTokenVerifyPopup` hook accepts a configuration object with the following properties:

* `endpoint` (required):  Your own endpoint for verification token generation.
* `params` (optional): Parameters for token generation requests.
* `authentoUrl` (optional): The URL of the Authento website (default: "[https://app.authento.io](https://www.authento.io/)"). For testing, this should be set to "<https://demo-app.authento.io>".

## Return Value

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

* `verify`: A function which launches verification popups using tokens fetched from the configured endpoint.
* `status`: The current status of the token generation process, which can be one of the following values: "unstarted", "fetching", "success", or "error".