Attaching the Authorization Header to Apollo Client Instance

[anyuruf]

Trying to attach the auth token to the httpLink in apollo.js file am Using Ember 3.28 Octane, Glimmer apollo. My apollo.js file looks like

import { setClient } from 'glimmer-apollo';
import {
  ApolloClient,
  InMemoryCache,
  createHttpLink,
} from '@apollo/client/core';
import { setContext } from 'apollo-link-context';

export default function setupApolloClient(context) {

  // HTTP connection to the API
  const httpLink = createHttpLink({
    uri: 'http://localhost:4000/',
  });

  // Cache implementation
  const cache = new InMemoryCache();

  let session = context.lookup('service:session');

  let authLink = setContext((request, context) => {
      return this._runAuthorize(request, context);
    });
    return authLink.concat(httpLink);
  }

  _runAuthorize() {
    if (!'session.isAuthenticated) {
      return {};
    }
    return {
      headers: {
        Authorization: `Bearer ${session.data.authenticated.token}`
      }
    };
  }

  // Create the apollo client
  const apolloClient = new ApolloClient({
    link: authLink,
    cache,
  });

  // Set default apollo client for Glimmer Apollo
  setClient(context, apolloClient);

}

Can't inject the service using the decorator because Leading Decorators can only be used with class declarations.

[jelhan]

Hello @anyuruf,

How did you resolved this? I'm facing the exact same question. I have a session service provided by Ember Simple Auth, which manages the authentication. It provides access to the access token, which needs to be used for the GraphQL requests made with Apollo. But it seems that I'm not able to access the service from that place.

I could read the access token from localStorage to which Ember Simple Auth syncs the token (in my setup). But using local storage to communicate between different parts of the app seems to be weird. Also the way the access token is stored in local storage feels like a private API of Ember Simple Auth's LocalStorageStore and the authenticator used. Long story short: That would feel very hacky.

Wondering if I'm missing something obvious, how I can access the Ember service outside of a class, which is managed by Ember framework.

If you found a solution, it would be great if you could share that.

Best Jeldrik

[jelhan]

I found the solution in this Discord chat: https://discord.com/channels/480462759797063690/925422411145424896/925429727039213628

Let me quickly summarize it to make it easier to find it coming from Google:

• The ApplicationInstance is passed as context argument to setupApolloClient function if you follow the documented setup for Ember applications.
• You can lookup a service on that ApplicationInstance using the lookup method. To lookup the session service, it looks like this:

  context.lookup('service:session');

• You now have access to the session service and can consume any property on it as you are used to.

@josemarluedke shared a full code example in the Discord thread mentioned above.

[anyuruf]

That is as type script implementation but I have re-implemented with normal JavaScript check check my https://github.com/anyuruf/broember repository