Intermittent Undefined Token During Token Refresh with AWS Amplify in Angular App

[reshmaissac]

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

Angular

Amplify APIs

Authentication

Amplify Version

v6

Amplify Categories

auth

Backend

None

Environment information

# Put output below this line
  System:
    OS: macOS 15.2
    CPU: (10) arm64 Apple M1 Pro
    Memory: 304.23 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.13.1 - /usr/local/bin/node
    npm: 10.9.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 132.0.6834.160
    Edge: 132.0.2957.140
    Safari: 18.2
  npmPackages:
    @angular-devkit/build-angular: 19.1.5 => 19.1.5 
    @angular-devkit/build-webpack: 0.1901.5 => 0.1901.5 
    @angular-eslint/builder: 19.0.2 => 19.0.2 
    @angular-eslint/eslint-plugin: 19.0.2 => 19.0.2 
    @angular-eslint/eslint-plugin-template: 19.0.2 => 19.0.2 
    @angular-eslint/schematics: 19.0.2 => 19.0.2 
    @angular-eslint/template-parser: 19.0.2 => 19.0.2 
    @angular/animations: 19.1.4 => 19.1.4 
    @angular/cli: 19.1.5 => 19.1.5 
    @angular/common: 19.1.4 => 19.1.4 
    @angular/compiler: 19.1.4 => 19.1.4 
    @angular/compiler-cli: 19.1.4 => 19.1.4 
    @angular/core: 19.1.4 => 19.1.4 
    @angular/forms: 19.1.4 => 19.1.4 
    @angular/localize: 19.1.4 => 19.1.4 
    @angular/platform-browser: 19.1.4 => 19.1.4 
    @angular/platform-browser-dynamic: 19.1.4 => 19.1.4 
    @angular/router: 19.1.4 => 19.1.4 
    @aws-amplify/ui-angular: 5.0.36 => 5.0.36 
    @cheshire-datasystems/cdl-design-tokens: ^3.0.0 => 3.0.0 
    @cypress/angular:  0.0.0-development 
    @cypress/mount-utils:  0.0.0-development 
    @cypress/react:  0.0.0-development 
    @cypress/svelte:  0.0.0-development 
    @cypress/vue:  0.0.0-development 
    @fortawesome/angular-fontawesome: 1.0.0 => 1.0.0 
    @fortawesome/fontawesome-free: 6.7.2 => 6.7.2 
    @fortawesome/fontawesome-svg-core: 6.7.2 => 6.7.2 
    @fortawesome/free-regular-svg-icons: 6.7.2 => 6.7.2 
    @fortawesome/free-solid-svg-icons: 6.7.2 => 6.7.2 
    @ng-bootstrap/ng-bootstrap: 18.0.0 => 18.0.0 
    @ngrx/effects: 19.0.1 => 19.0.0 
    @ngrx/operators: 19.0.1 => 19.0.0 
    @ngrx/store: 19.0.1 => 19.0.0 
    @ngtools/webpack: 19.1.5 => 19.1.5 
    @pact-foundation/karma-pact: 3.1.0 => 3.1.0 
    @pact-foundation/pact-node: 10.18.0 => 10.18.0 
    @pact-foundation/pact-web: 9.17.3 => 9.17.3 
    @popperjs/core: 2.11.8 => 2.11.8 
    @simonsmith/cypress-image-snapshot: 9.1.0 => 9.1.0 
    @types/jasmine: 5.1.5 => 5.1.5 
    @types/jasminewd2: 2.0.13 => 2.0.13 
    @types/jquery: 3.5.32 => 3.5.32 
    @types/node: 22.13.0 => 22.12.0 
    @typescript-eslint/eslint-plugin: 8.22.0 => 8.22.0 
    @typescript-eslint/parser: 8.22.0 => 8.22.0 
    angular-datatables: 19.0.0 => 19.0.0 
    angular-http-server: 1.12.0 => 1.12.0 
    async-mutex: 0.5.0 => 0.5.0 
    aws-amplify: 6.12.2 => 6.12.2 
    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 ()
    babel-loader: 9.2.1 => 9.2.1 
    bootstrap: 5.3.3 => 5.3.3 
    bsd-3-module:  0.0.0 
    copy-webpack-plugin: 12.0.2 => 12.0.2 
    crypto-js: 4.2.0 => 4.2.0 
    css-loader: 7.1.2 => 7.1.2 
    css-minimizer-webpack-plugin: 7.0.0 => 7.0.0 
    cssnano: 7.0.6 => 7.0.6 
    custom-license:  0.0.0 
    cypress: 14.0.1 => 14.0.1 
    cypress-recurse: 1.35.3 => 1.35.3 
    datatables.net: 2.1.4 => 2.2.1 (2.1.8)
    datatables.net-bs5: 2.1.4 => 2.2.1 
    datatables.net-buttons: 3.2.1 => 3.2.1 
    datatables.net-buttons-dt: 3.2.1 => 3.2.1 
    datatables.net-select: 3.0.0 => 3.0.0 
    dayjs: 1.11.13 => 1.11.13 
    eslint: 9.19.0 => 9.19.0 
    invalid-with-comma:  0.0.0 
    jasmine-core: 5.5.0 => 5.5.0 (4.6.1)
    jasmine-spec-reporter: 7.0.0 => 7.0.0 
    jquery: 3.7.1 => 3.7.1 
    karma: 6.4.4 => 6.4.4 
    karma-chrome-launcher: 3.2.0 => 3.2.0 
    karma-coverage: 2.2.1 => 2.2.1 
    karma-coverage-coffee-example:  1.0.0 
    karma-jasmine: 5.1.0 => 5.1.0 
    karma-jasmine-html-reporter: 2.1.0 => 2.1.0 
    karma-junit-reporter: 2.0.1 => 2.0.1 
    karma-sonarqube-unit-reporter: 0.0.23 => 0.0.23 
    keyboardevent-key-polyfill: 1.1.0 => 1.1.0 
    less: 4.2.2 => 4.2.2 (4.2.1)
    less-loader: 12.2.0 => 12.2.0 
    license-checker: 25.0.1 => 25.0.1 
    mini-css-extract-plugin: 2.9.2 => 2.9.2 
    moment-timezone: 0.5.47 => 0.5.47 
    ng-openapi-gen: 0.52.0 => 0.52.0 
    ngx-drag-drop: 19.0.0 => 19.0.0 
    node-example:  1.0.0 
    postcss: 8.5.1 => 8.5.1 (8.4.49)
    postcss-import: 16.1.0 => 16.1.0 
    postcss-loader: 8.1.1 => 8.1.1 
    postcss-modules-extract-imports: 3.1.0 => 3.1.0 
    postcss-modules-local-by-default: 4.2.0 => 4.2.0 
    postcss-modules-scope: 3.2.1 => 3.2.1 
    postcss-modules-values: 4.0.0 => 4.0.0 
    private:  0.0.0 
    protractor-example:  1.0.0 
    public-domain-module:  0.0.0 
    raw-loader: 4.0.2 => 4.0.2 
    replace-in-file: 8.3.0 => 8.3.0 
    rxjs: 7.8.1 => 7.8.1 
    rxjs/ajax:  undefined ()
    rxjs/fetch:  undefined ()
    rxjs/operators:  undefined ()
    rxjs/testing:  undefined ()
    rxjs/webSocket:  undefined ()
    sass-loader: 16.0.4 => 16.0.4 
    sonar-scanner: 3.1.0 => 3.1.0 
    source-map-loader: 5.0.0 => 5.0.0 
    stylus-loader: 8.1.1 => 8.1.1 
    terser-webpack-plugin: 5.3.11 => 5.3.11 
    ts-node: 10.9.2 => 10.9.2 
    tslib: 2.8.1 => 2.8.1 
    typescript: 5.7.3 => 5.7.3 (5.1.6)
    typescript-example:  1.0.0 
    uuid: 11.0.5 => 11.0.5 (9.0.1, 8.3.2)
    webpack: 5.97.1 => 5.97.1 
    webpack-dev-middleware: 7.4.2 => 7.4.2 
    webpack-dev-server: 5.2.0 => 5.2.0 
  npmGlobalPackages:
    @angular/cli: 16.2.7
    corepack: 0.30.0
    npm: 10.9.2
    wscat: 5.2.0

Describe the bug

I am encountering an issue where the idToken occasionally becomes undefined in my Angular app integrated with AWS Cognito using AWS Amplify. This issue is intermittent but often occurs when the UI remains open for a long time, potentially during token expiration or refresh events. Could be a scenario where fetching the token fails or doesn't provide updated session information.

AWS Cognito Configuration:
Refresh token expiration: 30 days
ID token expiration: [Default/Configured duration]
Auth setup: Amplify Auth with fetchAuthSession in AuthService class.

Is there a recommended way to avoid undefined tokens during such token refresh scenarios??

Expected behavior

When the token expires, AWS Amplify should seamlessly refresh the token and provide a valid idToken in the session object returned by fetchAuthSession().

Reproduction steps

1. Set up an Angular app with AWS Amplify and Cognito for authentication.
2. Implement an AuthService class using fetchAuthSession() to retrieve tokens.
3. Keep the application UI open and idle for an extended period (more than 1 hour, as the default ID token expiration is 1 hour).
4. Trigger any backend call or UI action that requires fetching the ID token from fetchAuthSession().
   Observed:
   The session.tokens is undefined occasionally in below code in AuthService to fetch token from current session:

const session = await fetchAuthSession();
return session.tokens

Code Snippet

// Put your code below this line.

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]

Hey, @reshmaissac 👋. We'll look into reproducing this on our side, but could you provide a little more sample code around the fetchAuthSession() call you're making on the frontend? Thanks.

[reshmaissac]

Hi @cwomack below is a sample code:

async currentSession() {
        return fetchAuthSession()
            .then(session => {
                if (session) {
                    return session;
                }
                return undefined;
            })
            .catch(() => {
                return undefined;
            })
 }


async getAuthToken() {
    try {
        this.session = await this.currentSession()
        const token = this.session?.tokens?.idToken?.toString()
        if (token == undefined) {
            return 'undefined'
        }
        return token;
    } catch (err) {
        return 'undefined'
    }
}

[cwomack]

@reshmaissac, thank you for the code samples. Is the device going offline after the 1 hour point when you're experiencing this and getting the undefined token? Do you observe any failed fetch call to Cognito within the Network tab when this happens? If so, can you provide a screenshot of the error to give us a little more detail?