Authorization header not added to graphql sub call

[hunganhAtWhill]

Before opening, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have read the guide for submitting bug reports.
• [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React

Amplify APIs

GraphQL API

Amplify Version

v6

Amplify Categories

No response

Backend

None

Environment information

System: OS: macOS 13.3.1 CPU: (10) arm64 Apple M2 Pro Memory: 293.69 MB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 20.8.1 - ~/.nvm/versions/node/v20.8.1/bin/node Yarn: 1.22.21 - ~/.nvm/versions/node/v20.8.1/bin/yarn npm: 10.2.5 - ~/.nvm/versions/node/v20.8.1/bin/npm pnpm: 8.11.0 - ~/.nvm/versions/node/v20.8.1/bin/pnpm Browsers: Chrome: 121.0.6167.139 Edge: 121.0.2277.106 Safari: 16.4 npmGlobalPackages: corepack: 0.23.0 npm: 10.2.5

Describe the bug

I have app sync endpoint secured with oidc that I want to subscribe to from my react application. I installed aws-amplify javascript v6 client and ran Amplify.configure correct with custom library option:

Amplify.configure(myConfig, {
      API: {
        GraphQL: {
          headers: async () => {
            return {
              Authorization: 'Test',
            }
          },
        },
      },
    })

When I generateClient() and call client.graphql({myQuery}).subscribe(next,error) i get error saying "Valid authorization header not provided."

Seems like Amplify.configure was not successful in configuring custom header, although it seems like such basic use case.

I am using latest version [email protected] at the moment of writing this and also use typescript, so everything is correct and in place. I also consulted all related documentations and all say that I am setting the headers in the correct place.

Is this a bug in v6? Thank you and please help me.

Expected behavior

Authorization header is added correctly

Reproduction steps

1. aws-amplify@6
2. configure it

Amplify.configure(myConfig, {
      API: {
        GraphQL: {
          headers: async () => {
            return {
              Authorization: 'Test',
            }
          },
        },
      },
    })

3. const client = generateClient() and call client.graphql({query: myQuery}).subscribe(next,error)
4. Error says no Authorization header present. Inspecting network tab confirms that there was indeed no Authorization header passed in the header= query param

Code Snippet

// Put your code below this line.
Amplify.configure(myConfig, {
      API: {
        GraphQL: {
          headers: async () => {
            return {
              Authorization: 'Test',
            }
          },
        },
      },
    })
    
const client = generateClient();
client.graphql({query: myQuery}).subscribe(next,error)

Log output

// Put your logs below this line

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[nadetastic]

Hi @hunganhAtWhill thank you for opening this issue. I see that you are getting an error when trying to pass an authorization header with your graphql calls. Can you share the exact error you are getting? Second when you get this error, are you passing a valid Authorization header value or using 'Test'?

[nadetastic]

HI @hunganhAtWhill following up here - are you still facing this issue?

[hunganhAtWhill]

@nadetastic yes I still have this issue. The exact error is as I described "Valid authorization header not provided.". This happens only if no authorization header is present. If it is present but has incorrect value, other error should appear. I tried setting it with real token, without "Bearer " part, with "Bearer ..." and just simply "Test" to see if header is added or not. In the end it was never added. I also tried to add just "custom-header", it was also never added to the request.

[david-mcafee]

@hunganhAtWhill - I'm currently investigating this and I'm not yet able to reproduce the issue - can you please provide the exact version of Amplify that you are using (e.g. 6.0.0)? Thank you!

[david-mcafee]

@hunganhAtWhill - my apologies, I see that you are using Amplify version 6.0.13. Here are a few follow-up questions:

1. You mentioned that this error state "happens only if no authorization header is present", which I would expect (i.e. I would expect a Valid authorization header not provided error if no authorization header was provided, but perhaps I am misunderstanding something.
2. What is the behavior when you do provide a valid authorization header?
3. You mentioned "In the end it was never added" - can you explain how you validated this, and explain what the behavior was?
4. Can you provide more details about what auth mode(s) you are using?

Thank you!

[chrisbonifacio]

Hi 👋 Closing this as we have not heard back from you. If you are still experiencing this issue and in need of assistance, please feel free to comment and provide us with any information previously requested by our team members so we can re-open this issue and be better able to assist you.

Thank you!