> For the complete documentation index, see [llms.txt](https://authento.gitbook.io/authento-api/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://authento.gitbook.io/authento-api/authento-react/usetokenverifypopup.md).

# useTokenVerifyPopup

A custom React hook to launch a token verification popup for account-based verifications.

{% 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](/authento-api/integration-guidance/account-based-verification.md#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".