AWS AppSync GraphQL subscriptions with OIDC authMode - UnauthorizedException

[arttu-pekkarinen]

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

React

Amplify APIs

GraphQL API

Amplify Version

v6

Amplify Categories

auth

Backend

CDK

Environment information

# Put output below this line

Describe the bug

I'm trying to use AWS AppSync GraphQL subscriptions with OIDC authentication mode using @aws-amplify/api [generateClient], but getting UnauthorizedException for WebSocket connections while HTTP queries/mutations work fine with the same OIDC token. For OIDC I have defined a custom token provider: MSAL

My workaround now is to create a "custom" websocket client for subscriptions. It works when following the documented protocol for providing headers for websocket client connection:

https://docs.aws.amazon.com/appsync/latest/devguide/real-time-websocket-client.html

All this seems odd because subscriptions has worked when I've done this with cognito. So this makes me wonder whether this is supported at all, although it's not explicitly said not anywhere in the documentation, or am I doing this wrong?

Expected behavior

Appsync subscriptions with websocket should work when amplify authorization mode set to OIDC with custom token provider

Reproduction steps

1. Configure amplify appsync to use oidc authorization mode
2. Call for appsync subscription

Connection failed: UnauthorizedException

Code Snippet

config.ts

import { Amplify } from 'aws-amplify'
import { msalTokenProvider } from './providers/msalTokenProvider'

const awsconfig = {
  API: {
    GraphQL: {
      endpoint: 'MY_ENDPOINT '',
      region: 'eu-central-1',
      defaultAuthMode: 'oidc' as const,
    },
  },
}

Amplify.configure(awsconfig, {
  Auth: {
    tokenProvider: msalTokenProvider
  }
})

export default Amplify`

msalTokenProvider.ts

import type { AccountInfo, IPublicClientApplication } from '@azure/msal-browser'
import { TokenProvider, decodeJWT } from 'aws-amplify/auth'

let msalInstance: IPublicClientApplication | null = null
let currentAccount: AccountInfo | null = null

export const msalTokenProvider: TokenProvider = {
  async getTokens({ forceRefresh } = {}) {
    if (!msalInstance || !currentAccount) {
      throw new Error('MSAL not initialized. Call configureMsalTokenProvider first.')
    }

    const response = await msalInstance.acquireTokenSilent({
      scopes: ['openid', 'profile', 'email'],
      account: currentAccount,
      forceRefresh
    })

    return {
      accessToken: decodeJWT(response.accessToken!),
      idToken: decodeJWT(response.idToken!),
    }
  },
}

// Function to initialize the TokenProvider with MSAL instance and account
export function configureMsalTokenProvider(instance: IPublicClientApplication, account: AccountInfo) {
  msalInstance = instance
  currentAccount = account
}

export type { TokenProvider }

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

[osama-rizk]

Hi @arttu-pekkarinen ,

Thank you for creating this issue. We will investigate and get back to you once we have more information.

[osama-rizk]

Hey @arttu-pekkarinen,

Can you please provide us with the following to help us reproduce the issue

• Amplify config file/amplify_outputs.json (with redacted resources)
• Minimal reproduction or sample app
• Your graphQL schema as well so we can see how your auth rules are configured on the model?

A couple of quick questions:

• When you are calling generateClient are you passing authMode: "oidc" ?
• When you are subscribing are you passing authMode and authToken e.g client.models.Todo.observeQuery({ authMode: "oidc", authToken: token, })

[arttu-pekkarinen]

I dont know exactly what you are looking for with amplify_outputs.json? I'm not using amplify cli, only api library to do the api auth and actions to appsync but anyway same as above:

import { Amplify } from 'aws-amplify'
import { msalTokenProvider } from './providers/msalTokenProvider'

const awsconfig = {
  API: {
    GraphQL: {
      endpoint: 'MY_ENDPOINT '',
      region: 'eu-central-1',
      defaultAuthMode: 'oidc' as const,
    },
  },
}

Amplify.configure(awsconfig, {
  Auth: {
    tokenProvider: msalTokenProvider
  }
})

export default Amplify

GraphQL schema

schema {
    query: Query
    mutation: Mutation
    subscription: Subscription
}

type Query {
    ping: Boolean! @aws_oidc @aws_iam
}

type Mutation {
    proxyMessage(
        chatId: String!
        message: String!
        sessionId: String
        userId: String
        messageId: String
    ): ChatResponse! @aws_oidc
    sendChunk(
        chatId: String!
        messageId: String!
        type: String
        isComplete: Boolean
        text: String
        fullText: String
    ): ChatChunk! @aws_oidc @aws_iam
}

type Subscription {
	onMessageChunk(chatId: String!): ChatChunk
		@aws_subscribe(mutations: ["sendChunk"])
		@aws_oidc @aws_iam
}

type ChatResponse @aws_oidc @aws_iam {
    status: String!
    chatId: String!
    messageId: String
    error: String
}

type ChatChunk @aws_oidc @aws_iam {
    chatId: String
    messageId: String
    type: String
    isComplete: Boolean
    text: String
    fullText: String
}

And again, there is no problem how auth rules are made because this works really for post requests (Mutation) and custom ws client (Subscription)

Unfortunately I cannot give the actual code but this is pretty much what I do:

// Client setup
const client = generateClient({
  authMode: 'oidc'
});

// This WORKS - HTTP mutation
const response = await client.graphql({
      query: proxyMessage,
      variables: {
          chatId: chatSessionId,
          message: message,
          messageId: `msg-${Date.now()}`,
          userId: userInfo.userId
      },
      authMode: 'oidc',
      authToken: token // Same JWT string
  })

// This FAILS - WebSocket subscription  
const subscription = client.graphql({
  query: subscriptions.onMessageChunk
  variables: { sessionId: "test" },
  authMode: 'oidc',
  authToken: token // Same JWT string
}).subscribe({
  next: (data) => console.log(data),
  error: (err) => console.error('UnauthorizedException:', err)
});

So answer to those two questions:

When you are calling generateClient are you passing authMode: "oidc" ?
When you are subscribing are you passing authMode and authToken e.g client.models.Todo.observeQuery({ authMode: "oidc", authToken: token, })

yes and yes