[GraphQL] cannot use authMode: oidc without Cognito user pool.

[PG-practice]

Before opening, please confirm:

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

JavaScript Framework

Not applicable

Amplify APIs

GraphQL API

Amplify Version

v6

Amplify Categories

api

Backend

Other

Environment information

# Put output below this line

Describe the bug

When you want to use Amplify JavaScript just to request to Existing AppSync API with its Authentication mode 3rd party OIDC, the library now seems to require Amazon Cognito User pool.

The code below results in the error NoValidAuthTokens: No federated jwt at headerBasedAuth ......

code

Amplify.configure({
  API: {
    GraphQL: {
      endpoint: 'https://xxxxxxxx/graphql',
      region: 'xxxxxxxxxx',
      defaultAuthMode: 'oidc'
    }
  }
});
...
    const client = generateClient();
    const res = await client.graphql({ query: yourQuery, authMode: 'oidc', authToken: "some your jwt" });

Cause:

Even when authMode is set to 'oidc', Amplify JavaScript still process it in the same way as authMode userpool

		case 'oidc':
		case 'userPool': {
			let token: string | undefined;

			try {

Possible Solution:

Given the following:

• API Option has authToken
• authToken is passed into Authorization header

the code here should start to request with Authorization header, and without requiring Cognito

before

		case 'oidc':
		case 'userPool': {
			let token: string | undefined;

after

		case 'oidc':
			if (additionalHeaders.Authorization) {
				headers = {
					Authorization: additionalHeaders.Authorization,
				};
			}
			break;
		case 'userPool': {
			let token: string | undefined;

Simply this change make it possible to send authToken parameter as Authorization header without any Cognito resource.
If it's ok, I could PR the change, but I'm concerned that I've overlooked another way to request to existing AppSync API with external OIDC authentication mode. I cannot find it.

Related Documents:

• Current documentation suggests that authMode: 'oidc' should work for AppSync with OIDC authentication. However just following this documents cause the error No federated jwt.
• This blog post demonstrate external provider, but userpool mode is set in both authorizationModes on AppSync API and authMode on client code, which implies that authMode 'oidc' isn't helpful.

similar issue

aws-amplify/amplify-data#507

Expected behavior

For existing AppSync resources with OIDC authorization mode, we should only need to pass the Authorization header
Cognito resources should not be required

Possible Solution (Repost):

before

		case 'oidc':
		case 'userPool': {
			let token: string | undefined;

after

		case 'oidc':
			if (additionalHeaders.Authorization) {
				headers = {
					Authorization: additionalHeaders.Authorization,
				};
			}
			break;
		case 'userPool': {
			let token: string | undefined;

Reproduction steps

1. Create API with Authorization mode OIDC in console (any other method than amplify is ok).
2. Create front end project like React.
3. Create front end graphql code by npx @aws-amplify/cli codegen
   Gen 2 doesn't support front end code generation as of now, so this needs Amplify CLI. support generating GraphQL client code by pointing to an AppSync API ID amplify-backend#1903
4. npm install aws-amplify
5. Change App.js to the code snippet below
6. Login to your external OIDC provider and get token.
7. Hard code the token as authToken parameter
8. npm start
9. click the button to call API.
10. you see No federated jwt error.

Code Snippet

App.js

import { Amplify } from 'aws-amplify'
import { generateClient } from '@aws-amplify/api';
import { yourQuery } from './graphql/queries';

Amplify.configure({
  API: {
    GraphQL: {
      endpoint: 'https://xxxxxxxx/graphql',
      region: 'xxxxxxxxxx',
      defaultAuthMode: 'oidc'
    }
  }
});

function App() {
  const call = async() => {
    const client = generateClient();
    const res = await client.graphql({ query: yourQuery, authMode: 'oidc', authToken: "some your jwt" });
    console.log(res)
  }

  return (
    <>
      <button onClick={call}>API CALL</button>
    </>
  );
}

export default App;

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