> ## Documentation Index
> Fetch the complete documentation index at: https://www.propeldata.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Authentication

> Manage authentication across components.

<div />

The [`AccessTokenProvider`](/docs/embeddable-ui/components/access-token-provider) component simplifies authentication by managing JWT tokens for all child components. You provide it with a function that fetches tokens from your backend, and it handles:

* Fetching the initial JWT token
* Automatically refreshing expired tokens
* Distributing tokens to all child components

This eliminates the need to manually handle tokens in each component.

<Info>
  See also [Client-side authentication](/docs/query-apis/authentication#client-side-authentication) for more information on how to authenticate with Propel.
</Info>

Here's an example showing why this is helpful:

<Tabs>
  <Tab title="With AccessTokenProvider">
    Wrap your app with the `AccessTokenProvider` and pass it the `fetchToken` function. This will ensure that all child components automatically receive the JWT token:

    ```jsx theme={"system"}
    import { Counter, TimeSeries, Leaderboard, AccessTokenProvider } from '@propeldata/ui-kit'
    import { fetchToken } from './utils'

    function App() {
      return (
        <AccessTokenProvider fetchToken={fetchToken}>
          <Counter />
          <TimeSeries />
          <Leaderboard />
        </AccessTokenProvider>
      )
    }
    ```
  </Tab>

  <Tab title="Without AccessTokenProvider">
    Without the `AccessTokenProvider`, you need to manually handle the JWT token in each component:

    ```jsx theme={"system"}
    import React, { useState, useEffect } from 'react'
    import { Counter, TimeSeries, Leaderboard } from "@propeldata/ui-kit"
    import { fetchToken } from './utils'

    function App() {
      const [accessToken, setAccessToken] = useState(null)

      useEffect(() => {
        async function fetchAccessToken() {
          const accessToken = await fetchToken()
          setAccessToken(accessToken)
        }
        fetchAccessToken()
      }, [fetchToken, setAccessToken])
      return (
        <Counter query={{ accessToken }} />
        <TimeSeries query={{ accessToken }} />
        <Leaderboard query={{ accessToken }} />
      );
    }
    ```
  </Tab>
</Tabs>

***

Preferably the `fetchToken` function lives outside of the component scope, in case you need to create it within the component scope please wrap it in a `useCallback` to prevent unnecessary re-renders:

```jsx theme={"system"}
import React, { useCallback } from 'react'
import { Counter, TimeSeries, Leaderboard, AccessTokenProvider } from '@propeldata/ui-kit'

function App() {
  const fetchToken = useCallback(() => {
    // fetching logic

    return accessToken
  }, [deps])

  return (
    <AccessTokenProvider fetchToken={fetchToken}>
      <Counter />
      <TimeSeries />
      <Leaderboard />
    </AccessTokenProvider>
  )
}
```

If you'd prefer to handle fetching on your own, you can pass the accessToken prop to the `AccessTokenProvider`. The provided access token will be served to all of its child components:

```jsx theme={"system"}
function App() {
  const [accessToken, setAccessToken] = useState(null)

  return (
    <AccessTokenProvider accessToken={accessToken}>
      <Counter />
      <TimeSeries />
      <Leaderboard />
    </AccessTokenProvider>
  )
}
```

<Note>
  You can use multiple `AccessTokenProvider` components in your app, each with its own `fetchToken` function or `accessToken` prop. However, avoid nesting them to prevent unexpected behavior.
</Note>