Apollo client graphQL and Auth0 - A complete implementation

This article has come together after months of trying different implementations and discovering more layers to using Auth0 and Apollo. Even though I am sure that some of the principles will work well with other similar libraries. I don’t want to take credit for this approach since it was pulled together from multiple forums, GitHub issues, and articles.

For this code, I am using the relatively new auth0-react library, but this solution can be used with their auth0-spa SDK. In trying to use an authenticated graphQL server with apollo client / auth0 /react based on the tutorials, one of the issues that never seemed to be addressed was a clean way of getting the tokens and if the tokens were expired to update the token and retry the query/mutation seamlessly.

Most of the solutions seemed to be pulling the token from local storage authentication. Still, if you had an expired token, the only solution offered was to delete the expired token and log the user out. The initial break came from mattwilson1024 in the auth0 forum.

AuthorizedApolloProvider.tsx

import { ApolloClient, ApolloProvider, createHttpLink, InMemoryCache } from '@apollo/client';
import { setContext } from '@apollo/link-context';
import React from 'react';

import { useAuth0 } from '../react-auth0-spa';

const AuthorizedApolloProvider = ({ children }) => {
  const { getTokenSilently } = useAuth0();

  const httpLink = createHttpLink({
    uri: 'http://localhost:4000/graphql', // your URI here...
  });

  const authLink = setContext(async () => {
    const token = await getTokenSilently();
    return {
      headers: {
        Authorization: `Bearer ${token}`
      }
    };
  });

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

  return (
    <ApolloProvider client={apolloClient}>
      {children}
    </ApolloProvider>
  );
};

export default AuthorizedApolloProvider;

import { ApolloClient } from 'apollo-client'; import { ApolloLink } from 'apollo-link'; import { ApolloProvider } from 'react-apollo'; import { BatchHttpLink } from 'apollo-link-batch-http'; import { InMemoryCache } from 'apollo-cache-inmemory'; import { onError } from 'apollo-link-error'; import { RetryLink } from 'apollo-link-retry'; import { useAuth0 } from '@auth0/auth0-react'; import LogRocket from 'logrocket'; import React from 'react'; import { setContext } from 'apollo-link-context'; // IF you want to enable/disable dev tools in different enviroments const devTools = localStorage.getItem('apolloDevTools') || false; const AuthorizedApolloProvider = ({ children }) => { const { getAccessTokenSilently } = useAuth0(); const authMiddleware = setContext(async (_, { headers, ...context }) => { const token = await getAccessTokenSilently(); //Optional if the ti if (typeof Storage !== 'undefined') { localStorage.setItem('token', token); } console.log('Network ID:', activeNetworkID); return { headers: { ...headers, ...(token ? { Authorization: `Bearer ${token}` } : {}), }, ...context, }; }); /** * Adding fix to improve logRocket recording * https://docs.logrocket.com/docs/troubleshooting-sessions#apollo-client */ const fetcher = (...args) => { return window.fetch(...args); }; const client = new ApolloClient({ link: ApolloLink.from([ onError(({ graphQLErrors, networkError }) => { if (graphQLErrors) { LogRocket.captureException(graphQLErrors); graphQLErrors.forEach(({ message, locations, path }) => console.error( `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}` ) ); } if (networkError) { // localStorage.removeItem('token'); LogRocket.captureException(networkError); console.error(`[Network error]:`, networkError); } }), authMiddleware, new RetryLink(), new BatchHttpLink({ uri: `${getConfig().apiUrl}`, fetch: fetcher, }), ]), cache: new InMemoryCache(), connectToDevTools: devTools, }); return <ApolloProvider client={client}>{children}</ApolloProvider>; }; export default AuthorizedApolloProvider;