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?

[reshmaissac]

Hi @cwomack, Thanks for the quick replys. The device maintains connectivity throughout. No failed fetch. On subsequent fetches after getting an undefined token, it works fine and token is present in the session. Suspect anything to do with a delay in getting the new session from amplify ?

[cwomack]

@reshmaissac, is this happening then with every single API call at that point and is highly reproducible or more of an edge case/hard to reproduce? We have tried on our side but haven't had any luck. If you could share that network request when it happens that would be helpful, but can you also try the following:

• Upgrade to the latest version
• Delete your node_modules folder
• Delete your package-lock.json file
• Reinstall dependencies with npm i

[reshmaissac]

Hi @cwomack The issue is intermittent and hard to reproduce consistently. It seems to occur when the UI remains open for a long time without user activity. I have already been using AWS Amplify version "6.12.2". I will upgrade to "6.12.3" and monitor for reproduction. Could there be a scenario where fetchAuthSession briefly returns an incomplete session before completing the refresh? Will calling fetchAuthSession with forceRefresh = true helps?

[HuiSF]

Hey @reshmaissac thanks for following up, re:

Could there be a scenario where fetchAuthSession briefly returns an incomplete session before completing the refresh? Will calling fetchAuthSession with forceRefresh = true helps?

fetchAuthSession() may return undefined for the tokens property on token refreshing when the persisted refresh token somehow becomes unreadable, so it appears as though there is no user signed in. This was happening prior to v6.12.2 when several concurrent fetchAuthSession() calls were triggered.

On other failure occasions fetchAuthSession() would throw corresponding errors.

[jjarvisp]

Hey @reshmaissac, were you able to mitigate the issue by upgrading?