fix(apollo): fixes missing bearer token on api calls

Updates to set the correct auth token for api calls

.storybook/main.js

@@ -29,6 +29,7 @@ module.exports = {
           '@emotion/core': '@emotion/react',
           'emotion-theming': '@emotion/react',
           '@components': path.resolve(__dirname, '../src/components'),
+          '@context': path.resolve(__dirname, '../src/context'),
           '@pages': path.resolve(__dirname, '../pages'),
           '@db': path.resolve(__dirname, '../src/db'),
           '@graphql': path.resolve(__dirname, '../src/graphql'),

jest.config.js

@@ -33,6 +33,7 @@ module.exports = {
     https://jestjs.io/docs/webpack#handling-static-assets */
     '^.+\\.(jpg|jpeg|png|gif|webp|avif|svg)$': '<rootDir>/__mocks__/fileMock.js',
     '^@components(.*)$': '<rootDir>/src/components$1',
+    '^@context(.*)$': '<rootDir>/src/context$1',
     '^@db(.*)$': '<rootDir>/src/db$1',
     '^@graphql(.*)$': '<rootDir>/src/graphql$1',
     '^@utils(.*)$': '<rootDir>/src/utils$1',

pages/_app.tsx

@@ -2,8 +2,8 @@ import { ChakraProvider } from '@chakra-ui/react';
 import { SessionProvider } from 'next-auth/react';
 import { ApolloProvider } from '@apollo/client';
 import type { AppProps } from 'next/app';
-import PageLayout from '../src/components/layout/PageLayout';
-import client from '../src/utils/apollo-client';
+import PageLayout from '@components/layout/PageLayout';
+import client from '@utils/apollo-client';
 import '../styles/globals.css';
 
 // eslint-disable-next-line react/function-component-definition

pages/api/auth/[...nextauth].ts

@@ -1,4 +1,4 @@
-import NextAuth from 'next-auth';
+import NextAuth, { Session } from 'next-auth';
 import { PrismaAdapter } from '@next-auth/prisma-adapter';
 import EmailProvider from 'next-auth/providers/email';
 import GoogleProvider from 'next-auth/providers/google';
@@ -59,6 +59,10 @@ const createUser = async ({ user }: NextAuthMessage) => {
   }
 };
 
+export interface AuthSession extends Session {
+  accessToken?: unknown;
+}
+
 export default withSentry(
   NextAuth({
     adapter,
@@ -68,5 +72,24 @@ export default withSentry(
     events: {
       createUser,
     },
+    callbacks: {
+      async jwt({ token, account }) {
+        // Persist the OAuth access_token to the token right after signin
+        if (account) {
+          // eslint-disable-next-line no-param-reassign
+          token.accessToken = account.access_token;
+        }
+        return token;
+      },
+      async session({ session, token }) {
+        // Send properties to the client, like an access_token from a provider.
+
+        const newSession: AuthSession = {
+          ...session,
+          accessToken: token.accessToken,
+        };
+        return newSession as Session;
+      },
+    },
   }),
 );

src/utils/apollo-client.ts

@@ -1,17 +1,36 @@
-import { ApolloClient, InMemoryCache } from '@apollo/client';
+import { ApolloClient, InMemoryCache, from } from '@apollo/client';
 import { createUploadLink } from 'apollo-upload-client';
+import { getSession } from 'next-auth/react';
 import { getBaseUrl } from '@utils/getBaseUrl';
 import logger from '@utils/logger';
+import { ContextSetter, setContext } from '@apollo/client/link/context';
+import { AuthSession } from '../../pages/api/auth/[...nextauth]';
 
 const BASE_URL = getBaseUrl();
 const uri = `${BASE_URL}/api/graphql`;
 
 logger.info(`Base URL: ${BASE_URL}\n GraphQL uri: ${uri}`);
 
+const httpLink = createUploadLink({ uri, credentials: 'include' });
+
+const contextSetter: ContextSetter = async (operation, { headers }) => {
+  const session = (await getSession()) as AuthSession;
+
+  const modifiedHeader = {
+    headers: {
+      ...headers,
+      authorization: session?.accessToken ? `Bearer ${session.accessToken}` : '',
+    },
+  };
+
+  return modifiedHeader;
+};
+
+const authLink = setContext(contextSetter);
+
 const client = new ApolloClient({
-  uri,
   cache: new InMemoryCache(),
-  link: createUploadLink({ uri }),
+  link: from([authLink, httpLink]),
 });
 
 export default client;

tsconfig.json

@@ -17,6 +17,7 @@
     "baseUrl": "./",
     "paths": {
       "@components/*": ["src/components/*"],
+      "@context/*": ["src/context/*"],
       "@db/*": ["src/db/*"],
       "@graphql/*": ["src/graphql/*"],
       "@utils/*": ["src/utils/*"],