Please provide an example with dynamic auth token

surecloud-tstafford commented 1 year ago

Hi thanks for creating this library!

I've struggled implement this with an observable/promise based auth token in the headers. Creating an auth middleware and adding the token in an Auth header to the operation context did not help.

The only way I've been able to get it working is by using localStorage to stash & retrieve the token. Which won't do in a production app.

Would be great if you could provide a simple example of how this should work.

Many Thanks

syedsadiq27 commented 1 year ago

I have been using this approch to get dynamic auth token in header, I have been using this in my react project


import { createUploadLink } from 'apollo-upload-client';
import {
  ApolloClient,
  InMemoryCache,
  ApolloLink,
} from '@apollo/client';
import { useCookies } from 'react-cookie';

const [cookie] = useCookies(['accessToken']);
 const httpLink = createUploadLink({
    uri:'https://your-domain-url.com/graphql',
  });

const authLink = setContext((_, { headers }) => {
    return {
      headers: {
        ...headers,
        authorization: "Bearer " + cookie.accessToken,
      },
    };
  });

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

jaydenseric commented 1 year ago

Hi @surecloud-tstafford , thanks for the thanks :)

I don't actually use Apollo anymore in work or personal projects, using instead graphql-react. For that reason I don't have recent code examples to share with you about auth headers and things, although I can see how clear examples would be very helpful to the community! I used to have it all figured out, working with SSR in Next.js etc. but I'm not sure I have access to all that old code, or if it's still the best way to do things.

Whatever the correct examples for auth would be, they shouldn’t be particularly specific to apollo-upload-client, as you would need to do similar things with any HTTP terminating link. There is one special security consideration though for multipart requests, noted here:

https://github.com/jaydenseric/graphql-multipart-request-spec#security

If you are using Apollo Server they prescribe an approach for handling that you can read about here:

https://www.apollographql.com/docs/apollo-server/security/cors/#preventing-cross-site-request-forgery-csrf

Setting up auth correctly for Apollo Client is more something Apollo has the mandate and resources to help with. While I'm closing this issue because it's not something I can action, if anyone would like to share code examples in this issue feel free to help out!

jaydenseric / apollo-upload-client

Please provide an example with dynamic auth token #307