---
title: useGetIdTokenQuery
---
> ## Documentation Index
> Fetch the complete documentation index at: https://react-query-firebase.invertase.dev/llms.txt
> Use this file to discover all available pages before exploring further.

Retrieve Firebase ID tokens for authenticated users. This hook is useful for making authenticated API calls or accessing protected resources that require Firebase ID tokens.

## Usage

```jsx
import { useGetIdTokenQuery } from "@tanstack-query-firebase/react/auth";

function Component({ user }) {
  const { data: token, isLoading, error } = useGetIdTokenQuery(user);

  if (isLoading) return <div>Loading token...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return <div>Token: {token}</div>;
}
```

## API Reference

### Parameters

- `user` - The Firebase User object (or null)
- `options` - Optional query configuration

### Options

The hook accepts standard TanStack Query options plus Firebase-specific auth options:

```ts
type AuthUseQueryOptions = {
  auth?: {
    forceRefresh?: boolean; // Force refresh the token instead of using cached
  };
  // ... all standard TanStack Query options
};
```

### Returns

Returns a TanStack Query result object with the following properties:

- `data` - The ID token string (or undefined if not loaded)
- `isLoading` - Boolean indicating if the query is loading
- `isError` - Boolean indicating if an error occurred
- `error` - Error object if the query failed
- `refetch` - Function to manually refetch the token

## Examples

### Basic Usage

```jsx
import { useGetIdTokenQuery } from "@tanstack-query-firebase/react/auth";

function UserProfile({ user }) {
  const { data: token, isLoading } = useGetIdTokenQuery(user);

  if (isLoading) return <div>Loading...</div>;

  return (
    <div>
      <h1>User Profile</h1>
      <p>Token: {token}</p>
    </div>
  );
}
```

### Force Refresh Token

```jsx
import { useGetIdTokenQuery } from "@tanstack-query-firebase/react/auth";

function SecureComponent({ user }) {
  const { data: token } = useGetIdTokenQuery(user, {
    auth: { forceRefresh: true },
  });

  return <div>Fresh token: {token}</div>;
}
```

### With API Integration

```jsx
import { useGetIdTokenQuery } from "@tanstack-query-firebase/react/auth";
import { useEffect } from "react";

function ApiComponent({ user }) {
  const { data: token } = useGetIdTokenQuery(user);

  useEffect(() => {
    if (token) {
      // Set token for API calls
      api.setAuthToken(token);
    }
  }, [token]);

  return <div>API ready with token</div>;
}
```

### Manual Token Refresh

```jsx
import { useGetIdTokenQuery } from "@tanstack-query-firebase/react/auth";

function TokenManager({ user }) {
  const { data: token, refetch, isFetching } = useGetIdTokenQuery(user);

  const handleRefresh = () => {
    refetch();
  };

  return (
    <div>
      <p>Current token: {token}</p>
      <button onClick={handleRefresh} disabled={isFetching}>
        {isFetching ? "Refreshing..." : "Refresh Token"}
      </button>
    </div>
  );
}
```

### Conditional Token Fetching

```jsx
import { useGetIdTokenQuery } from "@tanstack-query-firebase/react/auth";

function ConditionalComponent({ user, needsToken }) {
  const { data: token } = useGetIdTokenQuery(user, {
    enabled: !!user && needsToken,
  });

  if (!needsToken) return <div>No token needed</div>;

  return <div>Token: {token}</div>;
}
```

## Caching Behavior

The hook implements intelligent caching:

- **Stale Time**: 55 minutes (Firebase tokens expire after 1 hour)
- **Garbage Collection**: 60 minutes
- **Query Key**: `["auth", "idToken", user.uid, forceRefresh]`

When `forceRefresh: true` is used, the stale time is set to 0, ensuring a fresh token is always fetched.

## Error Handling

The hook will throw an error if:

- No Firebase user is provided
- The user is not authenticated
- Firebase authentication fails

```jsx
function ErrorHandling({ user }) {
  const { error, isError } = useGetIdTokenQuery(user);

  if (isError) {
    return (
      <div>
        <h2>Authentication Error</h2>
        <p>{error.message}</p>
      </div>
    );
  }

  return <div>Authenticated successfully</div>;
}
```

## Notes

- The hook automatically disables when `user` is `null`
- ID tokens are cached to avoid unnecessary Firebase calls
- Use `forceRefresh: true` when you need a fresh token (e.g., for sensitive operations)
- The hook respects TanStack Query's `enabled` option for advanced use cases
- For side effects when tokens change, use `useEffect` instead of the deprecated `onSuccess` callback