Authentication

Manage authentication across components.

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.

See also Client-side authentication for more information on how to authenticate with Propel.

Here’s an example showing why this is helpful:

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:

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

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

Without AccessTokenProvider

Without the AccessTokenProvider, you need to manually handle the JWT token in each component:

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 }} />
  );
}

---

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>
  )
}

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.