fail to request the OIDC authenticated data API(Appsync)

[zxkane]

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

Next.js

Amplify APIs

GraphQL API

Amplify Version

v6

Amplify Categories

api

Backend

Amplify Gen 2

Environment information

# Put output below this line

  System:
    OS: Linux 6.8 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
    CPU: (8) x64 Intel(R) Xeon(R) Platinum 8488C
    Memory: 25.06 GB / 30.82 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 20.18.0 - ~/.nvm/versions/node/v20.18.0/bin/node
    Yarn: 1.22.22 - ~/.linuxbrew/homebrew/bin/yarn
    npm: 10.8.2 - ~/.nvm/versions/node/v20.18.0/bin/npm
    pnpm: 9.15.4 - ~/.nvm/versions/node/v20.18.0/bin/pnpm
  npmPackages:
    @ampproject/toolbox-optimizer:  undefined ()
    @aws-amplify/backend: ^1.13.0 => 1.13.0 
    @aws-amplify/backend-auth: ^1.4.2 => 1.4.2 
    @aws-amplify/backend-cli: ^1.4.7 => 1.4.7 
    @aws-amplify/ui-react: ^6.9.0 => 6.9.0 
    @aws-amplify/ui-react-ai: ^1.3.0 => 1.3.0 
    @aws-amplify/ui-react-internal:  undefined ()
    @aws-amplify/ui-react-server:  undefined ()
    @aws-appsync/eslint-plugin: ^1.10.1 => 1.10.1 
    @aws-lambda-powertools/logger: ^2.12.0 => 2.13.0 
    @aws-sdk/client-dynamodb: ^3.726.1 => 3.730.0 
    @aws-sdk/lib-dynamodb: ^3.726.1 => 3.730.0 
    @babel/core:  undefined ()
    @babel/runtime:  7.22.5 
    @date-io/date-fns: ^3.0.0 => 3.2.0 
    @edge-runtime/cookies:  6.0.0 
    @edge-runtime/ponyfill:  4.0.0 
    @edge-runtime/primitives:  6.0.0 
    @emotion/react: ^11.14.0 => 11.14.0 
    @emotion/styled: ^11.14.0 => 11.14.0 
    @hapi/accept:  undefined ()
    @mswjs/interceptors:  undefined ()
    @mui/icons-material: ^6.3.1 => 6.4.0 
    @mui/material: ^6.3.1 => 6.4.0 
    @mui/x-data-grid: ^7.23.6 => 7.23.6 
    @mui/x-date-pickers: ^7.23.6 => 7.23.6 
    @napi-rs/triples:  undefined ()
    @next/font:  undefined ()
    @opentelemetry/api:  undefined ()
    @types/next: ^8.0.7 => 8.0.7 
    @types/node: ^22 => 22.10.7 (20.17.14)
    @types/react: ^19.0.0 => 19.0.7 
    @types/react-dom: ^19.0.0 => 19.0.3 
    @vercel/nft:  undefined ()
    @vercel/og:  0.6.4 
    acorn:  undefined ()
    amphtml-validator:  undefined ()
    anser:  undefined ()
    assert:  undefined ()
    async-retry:  undefined ()
    async-sema:  undefined ()
    aws-amplify: ^6.12.1 => 6.12.1 
    aws-amplify/adapter-core:  undefined ()
    aws-amplify/analytics:  undefined ()
    aws-amplify/analytics/kinesis:  undefined ()
    aws-amplify/analytics/kinesis-firehose:  undefined ()
    aws-amplify/analytics/personalize:  undefined ()
    aws-amplify/analytics/pinpoint:  undefined ()
    aws-amplify/api:  undefined ()
    aws-amplify/api/server:  undefined ()
    aws-amplify/auth:  undefined ()
    aws-amplify/auth/cognito:  undefined ()
    aws-amplify/auth/cognito/server:  undefined ()
    aws-amplify/auth/enable-oauth-listener:  undefined ()
    aws-amplify/auth/server:  undefined ()
    aws-amplify/data:  undefined ()
    aws-amplify/data/server:  undefined ()
    aws-amplify/datastore:  undefined ()
    aws-amplify/in-app-messaging:  undefined ()
    aws-amplify/in-app-messaging/pinpoint:  undefined ()
    aws-amplify/push-notifications:  undefined ()
    aws-amplify/push-notifications/pinpoint:  undefined ()
    aws-amplify/storage:  undefined ()
    aws-amplify/storage/s3:  undefined ()
    aws-amplify/storage/s3/server:  undefined ()
    aws-amplify/storage/server:  undefined ()
    aws-amplify/utils:  undefined ()
    axios: ^1.7.8 => 1.7.9 
    babel-packages:  undefined ()
    browserify-zlib:  undefined ()
    browserslist:  undefined ()
    buffer:  undefined ()
    bytes:  undefined ()
    ci-info:  undefined ()
    cli-select:  undefined ()
    client-only:  0.0.1 
    commander:  undefined ()
    comment-json:  undefined ()
    compression:  undefined ()
    conf:  undefined ()
    constants-browserify:  undefined ()
    content-disposition:  undefined ()
    content-type:  undefined ()
    cookie:  undefined ()
    cross-spawn:  undefined ()
    crypto-browserify:  undefined ()
    css.escape:  undefined ()
    data-uri-to-buffer:  undefined ()
    date-fns: ^3.6.0 => 3.6.0 
    debug:  undefined ()
    devalue:  undefined ()
    domain-browser:  undefined ()
    edge-runtime:  undefined ()
    eslint: ^8.57.1 => 8.57.1 
    eslint-config-next: ^15.0.0 => 15.1.4 
    events:  undefined ()
    find-up:  undefined ()
    fresh:  undefined ()
    glob:  undefined ()
    gzip-size:  undefined ()
    http-proxy:  undefined ()
    http-proxy-agent:  undefined ()
    https-browserify:  undefined ()
    https-proxy-agent:  undefined ()
    husky: ^9.1.7 => 9.1.7 
    icss-utils:  undefined ()
    ignore-loader:  undefined ()
    image-size:  undefined ()
    is-animated:  undefined ()
    is-docker:  undefined ()
    is-wsl:  undefined ()
    jest-worker:  undefined ()
    json5:  undefined ()
    jsonwebtoken:  undefined ()
    loader-runner:  undefined ()
    loader-utils:  undefined ()
    lodash.curry:  undefined ()
    lru-cache:  undefined ()
    mini-css-extract-plugin:  undefined ()
    nanoid:  undefined ()
    native-url:  undefined ()
    neo-async:  undefined ()
    next: ^15.0.0 => 15.1.4 
    node-fetch:  undefined ()
    node-html-parser:  undefined ()
    ora:  undefined ()
    os-browserify:  undefined ()
    p-limit:  undefined ()
    p-queue:  undefined ()
    path-browserify:  undefined ()
    path-to-regexp:  undefined ()
    picomatch:  undefined ()
    platform:  undefined ()
    postcss: ^8 => 8.5.1 (8.4.31)
    postcss-flexbugs-fixes:  undefined ()
    postcss-modules-extract-imports:  undefined ()
    postcss-modules-local-by-default:  undefined ()
    postcss-modules-scope:  undefined ()
    postcss-modules-values:  undefined ()
    postcss-preset-env:  undefined ()
    postcss-safe-parser:  undefined ()
    postcss-scss:  undefined ()
    postcss-value-parser:  undefined ()
    process:  undefined ()
    punycode:  undefined ()
    querystring-es3:  undefined ()
    raw-body:  undefined ()
    react: ^19.0.0 => 19.0.0 (18.3.1)
    react-builtin:  undefined ()
    react-dom: ^19.0.0 => 19.0.0 (18.3.1)
    react-dom-builtin:  undefined ()
    react-dom-experimental-builtin:  undefined ()
    react-draggable: ^4.4.6 => 4.4.6 
    react-experimental-builtin:  undefined ()
    react-is:  19.0.0-rc-65e06cb7-20241218 
    react-markdown: ^9.0.1 => 9.0.3 
    react-refresh:  0.12.0 
    react-server-dom-turbopack-builtin:  undefined ()
    react-server-dom-turbopack-experimental-builtin:  undefined ()
    react-server-dom-webpack-builtin:  undefined ()
    react-server-dom-webpack-experimental-builtin:  undefined ()
    regenerator-runtime:  0.13.4 
    sass-loader:  undefined ()
    scheduler-builtin:  undefined ()
    scheduler-experimental-builtin:  undefined ()
    schema-utils:  undefined ()
    semver:  undefined ()
    send:  undefined ()
    server-only:  0.0.1 
    setimmediate:  undefined ()
    shell-quote:  undefined ()
    source-map:  undefined ()
    source-map08:  undefined ()
    stacktrace-parser:  undefined ()
    stream-browserify:  undefined ()
    stream-http:  undefined ()
    string-hash:  undefined ()
    string_decoder:  undefined ()
    strip-ansi:  undefined ()
    superstruct:  undefined ()
    tailwindcss: ^3.4.15 => 3.4.17 
    tar:  undefined ()
    terser:  undefined ()
    text-table:  undefined ()
    timers-browserify:  undefined ()
    tty-browserify:  undefined ()
    typescript: ^5 => 5.7.3 (4.4.4, 4.9.5)
    ua-parser-js:  undefined ()
    unistore:  undefined ()
    util:  undefined ()
    vm-browserify:  undefined ()
    watchpack:  undefined ()
    web-vitals:  undefined ()
    webpack:  undefined ()
    webpack-sources:  undefined ()
    ws:  undefined ()
    zod:  undefined ()
    zod-validation-error:  undefined ()
  npmGlobalPackages:
    @aws-amplify/cli: 12.14.1
    bower: 1.8.14
    corepack: 0.29.3
    cypress: 14.0.0
    grunt-cli: 1.5.0
    hugo-extended: 0.141.0
    npm: 10.8.2
    pnpm: 9.15.4
    vuepress: 1.9.10
    yarn: 1.22.22

Describe the bug

I have a web application built on Amplify Gen2 to manage AWS infra and Next.js for the frontend application.

Due to some limitation, I can not create a Cognito User Pool for user authentication; I'm using an external OIDC provider instead. It works well with the data API with an external OIDC provider for authentication and authorization.

And I use next-auth instead of aws-amplify/auth for user authentication in the web application. I got NoValidAuthTokens: No federated jwt when accessing the data api in the web application.

Below is the code snippet for what I'm doing with the data API request.

const { data: session } = useSession();
const client = generateClient<Schema>();

      const newGame = await client.mutations.customCreateGame({
        ...formData,
      }, {
        authMode: 'oidc',
        authToken: session.accessToken
      });

According to the source code of Amplify JS, it also checks the Auth storage to find the login session, which does not fit my case to directly log in with a third-party OIDC provider, not Cognito User Pool.

Expected behavior

Amplify client has a way to supply the access token / id token for auth mode 'oidc'.

Reproduction steps

see above

Code Snippet

// Put your code below this line.
export type Schema = ClientSchema<typeof schema>;

export const data = defineData({
  schema,
  authorizationModes: {
    defaultAuthorizationMode: 'oidc',
    oidcAuthorizationMode: {
      oidcProviderName: process.env.OIDC_ISSUER_URL!,
      clientId: process.env.OIDC_CLIENT_ID!,
      oidcIssuerUrl: process.env.OIDC_ISSUER_URL!,
      tokenExpiryFromAuthInSeconds: 3600,
      tokenExpireFromIssueInSeconds: 3600
    }
  }
});

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

[cwomack]

Hello, @zxkane and thanks for opening this issue. I'm going to transfer it to our new amplify-data repo for better assistance.

[chrisbonifacio]

Hi @zxkane 👋 thanks for raising this issue!

Have you seen these AppSync docs on using OIDC tokens? It might help unblock you on this issue.

You may need to simply add a random prefix/suffix to the token when you pass it in to the authToken field.
You would then remove the prefix/suffix on the server side, if the resolver is a lambda.

From this page: https://arc.net/l/quote/ttwmpksc

If you want to use the OIDC token as the Lambda authorization token when the OPENID_CONNECT authorization mode or the AMAZON_COGNITO_USER_POOLS and AWS_LAMBDA authorization modes are enabled for AWS AppSync's API, do the following:

To create a new Lambda authorization token, add random suffixes and/or prefixes to the OIDC token. The Lambda authorization token should not contain a Bearer scheme prefix.

To retrieve the original OIDC token, update your Lambda function by removing the random prefixes and/or suffixes from the Lambda authorization token. Then, use the original OIDC token for authentication.

[zxkane]

Hi,

I don't think it's an issue of the AppSync endpoint generated by Amplify Gen2. The AppSync endpoint with OIDC authentication created by Gen2 works well. I can use the client with the right token to access it.

However, using the Amplify data client with the OIDC auth provider does not work as expected. I used the below workaround to bypass the dependency for Amplify's auth.

const client = generateClient<Schema>({
  authMode: 'lambda',
  headers: async () => {
    const session = await fetch('/api/auth/session').then(res => res.json());
    return {
      Authorization: `Bearer ${session?.idToken}`
    };
  }
});

I'm still confused as to why the OIDC authMode in the data client requires the Cognito user pool (assuming the amplify-auth only works with Cognito).

[chrisbonifacio]

@zxkane Thank you for sharing the workaround. I'm actually a bit surprised that using Bearer works because that's a reserved keyword for AppSync.

This issue is very similar to this one I have reproduced before, the difference being they were using AppSync Events and there was an auth resource/cognito user pool as well.

aws-amplify/amplify-js#14124

In any case, I'll create a reproduction app with OIDC tokens to reproduce this issue and also test different scenarios to see what's expected behavior and what's not working as expected.

In the meantime, please take a look at that other issue. That one required setting up a tokenProvider in the Auth category. I wonder if that might also help bypass the need for a user pool in your case.

I just came across this in the docs which seems to align with the above and explains that it's even required for oidc:
https://docs.amplify.aws/react/build-a-backend/auth/advanced-workflows/#custom-token-providers

Let me know if that helps!

Thank you for your patience.