Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Example client side with ApolloClient header token

Closed
shansmith01 opened this issue Feb 3, 2020 · 6 comments
Closed

Example client side with ApolloClient header token #76

shansmith01 opened this issue Feb 3, 2020 · 6 comments

Comments

@shansmith01
Copy link

shansmith01 commented Feb 3, 2020

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
Copy link

lnikell commented Jun 9, 2020

@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
Copy link

serendipity1004 commented Jun 25, 2020

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

@lnikell
Copy link

lnikell commented Jun 25, 2020

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

@Widcket
Copy link
Contributor

Widcket commented Jan 15, 2021

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.

@Widcket Widcket closed this as completed Jan 15, 2021
@gabsn
Copy link

gabsn commented Jul 15, 2021

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
Copy link

blazestudios23 commented Sep 15, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants