Example client side with ApolloClient header token

[shansmith01]

Describe the problem you'd like to have solved

I am having difficulty figuring out how to use this library with Apollo Client.

Detail: I have a nextjs app with accesses an external api (hasura) which require JWT authentication. I would love a best practice example (that ideally does not use local storage) for passing a JWT token (specifically hasura uses the idToken) in the request header from apollo client

Describe the ideal solution

The ideal solution would be an example showing a best practice way to pass the token from an API route to the front end without using express and then showing what the apollo client looks like

Alternatives and current work-arounds

Note I can think of several ways to do this. Eg. have a getToken function which

• Gets the token from localStorage
• Or calls an api endpoint which would give a response using the auth0.getSession method

What I am looking for is best preactice/secure as possible.

Sorry I am relatively newbie.

Additional context

Add any other context or screenshots about the feature request here.

[lnikell]

@shansmith01 Have you figured out what should be the best practice? So I think the issue title could be even changed since basically we need just an example of how to properly use access token from the client side, or any clarifications about why everything should be hidden behind nextjs api routes.

[serendipity1004]

@lnikell have you found a solution by any chance? without using the proxy?

[lnikell]

@serendipity1004 I decided to move to https://github.com/iaincollins/next-auth and stop trying to get anything from Auth0 or their support.

[Widcket]

Hi all, please check out the Access an external API from an API route example from the new v1.0.0-beta.0 release. The issues #67 #55 might also be useful for Apollo Client users.

any clarifications about why everything should be hidden behind nextjs api routes.

We have included information about this in the README of the new beta.

[gabsn]

I'm not a fan of this solution TBH (latency impact 😢). I wish there was a way to store it in memory client-side and have a helper function to access it.

[blazestudios23]

I really need a way to be able to just pass on the token with Apollo client, I'm doing this:

export function createApolloClient() {
  return new ApolloClient({
    ssrMode: typeof window === 'undefined',
    // link: authLink,
    link: new BatchHttpLink({
      fetch,
      uri: `${NEXT_PUBLIC_GRAPHQL_API_ENDPOINT}/graphql`, // Server URL (must be absolute),
      batchMax: 5,
      batchInterval: 20,
      credentials: 'include' // Additional fetch() options like `credentials` or `headers`, `include`
    }),
    cache: new InMemoryCache({})
  });
}

Include should include any tokens, but seems to only include cookies that are not able to be decoded.

Having to add it to an /api/ route just adds a lot of unnecessary complexity, and breaks code autogeneration functionality for TypeScript, which is a no go.