Authentication

The AccessTokenProvider 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.

Here’s an example showing why this is helpful:

• With AccessTokenProvider
• Without AccessTokenProvider

import { Counter, TimeSeries, Leaderboard, AccessTokenProvider } from '@propeldata/ui-kit'
import { fetchToken } from './utils'

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

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:

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:

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

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