---
title: ID Token | Authentication
description: Hooks for integrating with Authentication.
---

# ID Token

This page covers how you can subscribe and listen to the users ID Token and use it throughout your application.

## Subscribing to the ID Token

If you require the users ID Token (e.g. for making external API requests), the `useAuthIdToken`
provides a simple way to subscribe to latest token.

```jsx
import { useAuthIdToken } from "@react-query-firebase/auth";
import { auth } from "./firebase";

function App() {
  const tokenResult = useAuthIdToken(["token"], auth);

  if (tokenResult.isLoading) {
    return <div />;
  }

  if (tokenResult.data) {
    return <div>ID Token: {user.data.token}!</div>;
  }

  return <div>Not signed in.</div>;
}
```

Anytime your users state changes or the ID Token is refreshed, the hook will update either returning `null`
(if there is no authenticated user) or an [`IDTokenResult`](https://firebase.google.com/docs/reference/js/auth.idtokenresult)
containing your token and metadata to go with it.

## Force Refreshing

By default, if the ID Token has not yet expired the same one will be returned. You can override this behaviour
by providing the `forceRefresh` flag to the hook options:

```js
const tokenResult = useAuthIdToken(["token"], auth, {
  forceRefresh: true,
});
```

Each time the query runs, your token will be fetched and update no matter the expiration time.

## Using the token

Displaying the token isn't really that useful. Instead we're more likely to use it when performing API requests.
Luckily React Query makes it easy to get the data of a query outside of the scope of a component, or within an
extracted hook.

Imagine we've got a custom `useApiRequest` hook within our application, using the same Query Key we can get the
token before the request and attach it to the API request.

```js
import { useQueryClient, useQuery } from "@tanstack/react-query";

function useApiRequest(url) {
  const client = useQueryClient();

  return useQuery(url, () => {
    return fetch(url, {
      headers: new Headers({
        "X-ID-Token": client.getQueryData("token")?.token ?? "",
      }),
    });
  });
}
```

If the Query Key has a `IDTokenResult` stored, we'll extract the token from it and pass it as a header.

## Returning the token

Sometimes you just want the actual ID Token, rather than the full `IDTokenResult`. Luckily React Query
makes this simple by providing a data selector:

```js
useAuthIdToken(["token"], auth, {
  select(result) {
    if (result) {
      return result.token;
    } else {
      return "";
    }
  },
});
```

Now the Query Key `token` will always ensure a string is value is returned.

## React Query options

The hook also allows us to provide React Query options, supporting all of the options the
[`useQuery`](https://react-query.tanstack.com/reference/useQuery) supports! For example, we could handle
side effects with ease:

```jsx
useAuthIdToken(["token"], auth, {
  onSuccess(result) {
    if (result) {
      localStorage.setItem("token", result.token);
    } else {
      localStorage.removeItem("token");
    }
  },
});
```