Authorize Apollo with Auth0 Access Token Claims

authorizedApolloProvider.js

import React from 'react'
import {
  ApolloClient,
  ApolloProvider,
  InMemoryCache,
  createHttpLink,
} from '@apollo/client'

import { setContext } from '@apollo/link-context'
import Loading from './components/Loading'
import { useAuth0 } from '@auth0/auth0-react'
import config from './auth_config.json'

export const AuthorizedApolloProvider = ({ children }) => {
  const { loading, getAccessTokenSilently } = useAuth0()

  if (loading) {
    return <Loading />
  }

  const httpLink = createHttpLink({
    uri: config.graphqlEndpoint, // your URI here...
  })

  const authLink = setContext(async () => {
    const token = await getAccessTokenSilently()
    console.log(token)
    return {
      headers: {
        Authorization: `Bearer ${token}`,
      },
    }
  })

  const apolloClient = new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache(),
    connectToDevTools: true,
  })

  return <ApolloProvider client={apolloClient}>{children}</ApolloProvider>
}