Passing the JWT to Apollo for Authentication

[oalexdoda]

Your question
How can we pass the JWT to an Apollo Provider to authorize MongoDB Realm requests?

Reproduction

Feedback
Documentation refers to searching through online documentation, code comments and issue history. The example project refers to next-auth-example.

• Found the documentation helpful
• Found documentation but was incomplete
• Could not find relevant documentation
• Found the example project helpful
• Did not find the example project helpful

[dukesx]

Make a function, let's say refreshToken, that takes an argument, inside the Apollo Client file where you have createApolloClient or initializeApolloClient functions. Have a global variable called token in that file which will get replaced with the argument refreshToken takes. So now in your page, inside getStaticProps or getServerSide props where you call initialize Apollo and add Apollo State, before initializing Apollo and after calling getSession function of next auth, call the refreshToken and pass in the session variable. This refresh token function will replace the value of variable token, and then you can use token's session object to extract the jwt token from it and pass it as Authorization header in the createApolloClient function. As far as I know, this works for me as I am using Hasura and I need bearer token in Authorization header to authenticate special queries. Hope it helps. Lacklustre solution but better than having no solution at all.

[oalexdoda]

Was able to solve it by having the app wrapped in 3 providers:

<RealmProvider>
   <ApolloProvider>
      <AuthProvider>
         <App />
      </AuthProvider>
   </ApolloProvider>
</RealmProvider>

RealmProvider initializes and passes the app further to its children. Apollo consumes the app and does the authentication. Auth also consumes the app and manages authentication, and then makes the user available to the app via a hook.

Thank you for the insights!

[dukesx]

Was able to solve it by having the app wrapped in 3 providers:

<RealmProvider>
   <ApolloProvider>
      <AuthProvider>
         <App />
      </AuthProvider>
   </ApolloProvider>
</RealmProvider>

RealmProvider initializes and passes the app further to its children. Apollo consumes the app and does the authentication. Auth also consumes the app and manages authentication, and then makes the user available to the app via a hook.

Thank you for the insights!

How would you utilise the data passed from realm provider inside Apollo?

[oalexdoda]

In my use case, I need the Realm app in order to get the authentication token inside the Apollo client and then I need the app instance in AuthProvider when authenticating the user via JWT.

[dukesx]

Oh Okay ! Thank you for the insight !

[toy-crane]

in my case, I use session with getSession function

import { ApolloClient, from, createHttpLink } from "@apollo/client";
import cache from "./cache";
import { environment } from "config";
import errorLink from "./errorLink";
import { setContext } from "@apollo/client/link/context";
import { getSession } from "next-auth/client";

const httpLink = createHttpLink({
	uri: environment.grapqlServerURL,
	credentials: "include",
});

const authLink = setContext(async (_, { headers }: { headers: Headers }) => {
	const session = await getSession();
	const modifiedHeader = {
		headers: {
			...headers,
			authorization: session?.accessToken
				? `Bearer ${session.accessToken}`
				: "",
		},
	};
	return modifiedHeader;
});

const client = new ApolloClient({
	link: from([authLink, errorLink, httpLink]),
	cache,
});

export default client;

[cquark7]

@lakshyasharma14 session content is not stored in cookies, either. NextAuth creates a cookie named next-auth.session-token which stores the JWT, not the session object.
IMO, it is not a good idea to store identity (session) and permissions/roles/claims (access_token) at the same place. I created a separate serverless function for this use case, and it supports silent refresh (when access_token expires).

[StevenMarrocco]

May be a bit late to the party, but is there a solution for the above to not call /api/auth/session on every request? running into that issue

[johnpena]

Would love an answer as well!

[redarccoder]

May be a bit late to the party, but is there a solution for the above to not call /api/auth/session on every request? running into that issue

What you could do is store the authentication token in some state management system (like redux) from where you can read it and pass it to your apolo client, this would still look-up for the secret, but it would look it up in your webapp, not in the server.

I would need to write this example, but in theory it shouldn't be that hard

[taro-28]

May be a bit late to the party, but is there a solution for the above to not call /api/auth/session on every request? running into that issue

I use defaultContext added in v3.9.0.

import {
  ApolloClient,
  ApolloProvider,
  InMemoryCache,
  createHttpLink,
  from,
} from "@apollo/client";
import { setContext } from "@apollo/client/link/context";
import { useSession } from "next-auth/react";
import { useLayoutEffect } from "react";

const authLink = setContext((_, { headers, accessToken }) => ({
  headers: {
    ...headers,
    authorization: accessToken ? `Bearer ${accessToken}` : "",
  },
}));

const httpLink = createHttpLink({
  uri: "https://example.com/",
});

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

const AuthApolloProvider = ({ children }: { children: ReactNode }) => {
  const { data } = useSession();

  // I want to use useEffect here because this effect is not for layout.
  // But defaultContext is not reflected for first query of useQuery.
  useLayoutEffect(() => {
    if (!data) return;
    client.defaultContext.accessToken = data.accessToken;
  }, [data]);

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

https://gist.github.com/taro-28/c74c7a93f1400055e8929d9230defe37

[oalexdoda]

I haven't been using nextauth in a long time, but for anyone still looking for ideas on how to get this done, it'd be something like this. If you use another authentication provider, like Firebase, Auth0, etc., you'd basically replace Realm with the provider that makes your user session available, and then pass that session and its JWT down to createApolloClient.

So instead of createApolloClient(app, apollo), you'd do something like createApolloClient(session, apollo). Additionally, you'd add the session to the dependency array in the useEffect that wraps createApolloClient. I shared some examples below:

<RealmProvider {...args.realm}>
     <ApolloProvider apollo={args.apollo}>
        {children}
    </ApolloProvider>
</RealmProvider>

For the <RealmProvider />, you'd have a client like this:

import { useState, useEffect } from 'react';
import * as Realm from 'realm-web';

const useClient = ({ appId }) => {
    const [app, setApp] = useState(new Realm.App(appId));

    /**
     * Check if an appId was provided.
     */

    if (!appId) {
        throw new Error(
            `You must set an "appId".`
        );
    }

    /**
     * Update the app if the appId changes.
     */

    useEffect(() => {
        setApp(new Realm.App(appId));
    }, [appId]);

    /**
     * Generate auth credentials for the Realm app.
     */

    const credentials = async ({ type, value }) => {
        let payload;

        switch (type) {
            case 'email':
                payload = await Realm.Credentials.emailPassword(value);
                break;

            case 'jwt':
                payload = await Realm.Credentials.jwt(value);
                break;

            default:
                payload = false;
                break;
        }

        return payload;
    };

    return {
        app,
        credentials,
    };
};

export default useClient;

For the client, you'd have something like:

import { useState, useEffect } from 'react';
import { useRealm } from '../realm';
import { ApolloProvider as ApolloProviderClient } from '@apollo/client';

import createApolloClient from './functions/createApolloClient';

const ApolloProvider = ({ apollo, children }) => {
    const { app } = useRealm();

    // Initialize a default Apollo client.
    const [client, setClient] = useState(createApolloClient(app, apollo));

    /**
     * Create the client and cache it based on page props.
     */

    useEffect(() => {
        const instance = client ?? createApolloClient(app, apollo);

        // Add support for query & data caching.
        if (apollo.state) {
            instance.cache.restore({
                ...instance.extract(),
                ...apollo.state,
            });
        }

        // For SSG and SSR always create a new Apollo Client.
        if (typeof window === 'undefined') return instance;

        // Create the Apollo Client once in the client/
        setClient(instance);

        // Clear up the client.
        return () => setClient();
    }, [apollo.state]); // add your session here if using another auth provider that requires it.

    /**
     * Return the Apollo client.
     */

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

export { ApolloProvider };

For the createApolloClient function, that looks something like this:

import {
    ApolloClient,
    HttpLink,
    InMemoryCache,
    ApolloLink,
} from '@apollo/client';
import { RestLink } from 'apollo-link-rest';
import { concatPagination } from '@apollo/client/utilities';

import getValidAccessToken from './getValidAccessToken';

/**
 * Create a new Apollo client that connects to MongoDB Realm.
 *
 * @param {*} app
 * @returns
 */

const createApolloClient = (app, args) => {
    // Create the default database link.
    const defaultLink = new HttpLink({
        uri: args.link.uri,
        fetch: async (uri, options) => {
            let token;

            // Get the token based on link type.
            switch (args.link.type) {
                case 'realm':
                    token = await getValidAccessToken(app);
                    break;
            }

            // The handler adds a bearer token Authorization header to the otherwise unchanged request
            if (token) {
                options.headers.Authorization = `Bearer ${token}`;
            }

            return fetch(uri, options);
        },
    });

    // Create custom database links.
    let customLinks = new HttpLink({
        uri: '/api',
    });

    // Extend with any custom links here...

    // Create a new Apollo client.
    const client = new ApolloClient({
        ssrMode: typeof window === 'undefined',
        link: ApolloLink.split(
            (operation) => operation.getContext().api,
            customLinks,
            defaultLink
        ),
        cache: new InMemoryCache({
            Query: {
                fields: {
                    allPosts: concatPagination(),
                },
            },
        }),
    });

    // Return the client.
    return client;
};

export default createApolloClient;

And then your getValidAccessToken could be something like:

import * as Realm from 'realm-web';

/**
 * Authenticate anonymously or refresh the user data.
 *
 * @param {*} app
 * @returns
 */

const getValidAccessToken = async (app) => {
    if (!app.currentUser) {
        await app.logIn(Realm.Credentials.anonymous());
    } else {
        await app.currentUser.refreshCustomData();
    }

    return app.currentUser.accessToken;
};

export default getValidAccessToken;

You'd have to make sure you enabled anonymous and JWT auth in Realm (or any other identity provider if needed).

I haven't used this in a long time since my stack changed drastically since back when I needed this, but I hope it helps anyone still trying to figure this out!

[johnpena]

For those still looking for an answer to this question, here's what I came up with.

In [...nextauth].ts:

import jsonwebtoken from 'jsonwebtoken';

// ...

const session = async function session(params: { session: Session; user: User; token: JWT }) {
  const encodedToken = jsonwebtoken.sign(params.token, process.env.SECRET, { algorithm: 'HS256' });
  params.session.token = encodedToken;

  return params.session;
};

export default NextAuth({
  providers: [ /* ... */ ],
  callbacks: {
    session,
  },
});

In your Apollo provider:

export const AuthorizedApolloProvider: FunctionComponent = (props) => {
  const authLink: ApolloLink = setContext(async () => {
    const session = await getSession();
    return {
      headers: {
        Authorization: `Bearer ${session?.token}`,
      },
    };
  });

  const apolloClient = new ApolloClient({
    link: ApolloLink.from([authLink, /* ... other Apollo links ... */]),
  });

  return <ApolloProvider client={apolloClient}>{props.children}</ApolloProvider>;
};

[StevenMarrocco]

@wolffparkinson thanks for the implementation example! I was able to use use the Authenticated component as it already is using the ApolloProvider. Is there any arm in doing so?

Noticed this has the ApolloProvider used twice. Once in _app and the other in Authenticated - is this required??

[wolffparkinson]

Yes that is intentional, the pages protected by Authenticated get a different ApolloProvider (via the return statement) else the usual ApolloProvider continues for pages not using Authenticated client but still need ApolloProvider.
If your entire app is using Authenticated, then no requirement for another ApolloProvider

Also, i think we wont be able to access useApolloClient() in any provider/component (in this case our Authenticated provider) if the parent component/HOC (in this case app.tsx) does not have a ApolloProvider

[StevenMarrocco]

@wolffparkinson appreciate the clarification, makes total sense! And explains why us just using the Authenticated implementation works for our use case. Our app is not accessible unless the user is authenticated, hence why we are using the _app approach

[simon-caignart]

I implemented @wolffparkinson solution, it works great but I found an issue with it. Because the custom provider uses the useSession hook of next-auth, all the childs components are re-rendered each time the session is checked, and by default, the session is checked each time the tab is getting focused. You can pass an option to the SessionProvider to disable this behavior, like this :

<SessionProvider
      session={session}
      ...
      // Re-fetches session when window is focused
      refetchOnWindowFocus={true}
    >

But still, re-rendering each childs when the session is checked is not good. I wonder how to counter this problem, if anyone has an idea I'm interested 😄

[StevenMarrocco]

hey folks! been some time, and looking for some potential help, we've recently changed our token rotation strategy and now I'm noticing some issues with this implementation, when the session gets updated with the new access token setContext does not get updated with this token and throws a 401 (as expected).

Does anyone have a solution for this? ensuring the newly created accessToken is, in fact provided to apollo client?