Azure AD SSO session expiration not detected

[sakib-shunyeka]

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

Authentication, Storage

Amplify Version

v5

Amplify Categories

auth, storage

Backend

None

Environment information

# Put output below this line
System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 AMD Ryzen 5 3400G with Radeon Vega Graphics    
    Memory: 2.52 GB / 13.95 GB
  Binaries:
    Node: 20.15.0 - I:\Program Files\nodejs\node.EXE
    Yarn: 4.6.0 - I:\Program Files\nodejs\yarn.CMD
    npm: 10.7.0 - I:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @ampproject/toolbox-optimizer:  undefined ()
    @ant-design/icons: ^5.4.0 => 5.5.2
    @aws-amplify/ui-react: 5.x => 5.3.3
    @aws-amplify/ui-react-internal:  undefined ()
    @babel/core:  undefined ()
    @babel/runtime:  7.22.5
    @codemirror/lang-json: ^6.0.1 => 6.0.1
    @codemirror/view: ^6.24.1 => 6.36.2
    @dagrejs/dagre: ^1.1.3 => 1.1.4
    @dnd-kit/core: ^6.2.0 => 6.3.1
    @dnd-kit/sortable: ^9.0.0 => 9.0.0
    @edge-runtime/cookies:  5.0.0
    @edge-runtime/ponyfill:  3.0.0
    @edge-runtime/primitives:  5.0.0
    @fortawesome/fontawesome-svg-core: ^6.5.2 => 6.7.2
    @fortawesome/free-brands-svg-icons: ^6.5.1 => 6.7.2
    @fortawesome/free-regular-svg-icons: ^6.5.1 => 6.7.2
    @fortawesome/free-solid-svg-icons: ^6.5.1 => 6.7.2
    @fortawesome/react-fontawesome: ^0.2.0 => 0.2.2
    @hapi/accept:  undefined ()
    @iconify/react: ^5.1.0 => 5.2.0
    @iconify/react/offline:  undefined ()
    @monaco-editor/react: ^4.6.0 => 4.6.0
    @mswjs/interceptors:  undefined ()
    @napi-rs/triples:  undefined ()
    @next/font:  undefined ()
    @opentelemetry/api:  undefined ()
    @playwright/test: ^1.29.0 => 1.49.1
    @react-querybuilder/antd: ^7.6.0 => 7.7.1
    @reduxjs/toolkit: ^1.7.2 => 1.9.7 (2.5.0)
    @reduxjs/toolkit-query:  1.0.0
    @reduxjs/toolkit-query-react:  1.0.0
    @reduxjs/toolkit-react:  undefined (1.0.0)
    @tailwindcss/postcss: ^4.0.0 => 4.0.0
    @uiw/codemirror-theme-vscode: ^4.23.5 => 4.23.7
    @uiw/react-codemirror: ^4.15.1 => 4.23.7
    @vercel/nft:  undefined ()
    @vercel/og:  0.6.3
    @xyflow/react: ^12.3.2 => 12.4.1
    acorn:  undefined ()
    amphtml-validator:  undefined ()
    anser:  undefined ()
    antd: ^5.21.2 => 5.23.1
    arg:  undefined ()
    assert:  undefined ()
    async-retry:  undefined ()
    async-sema:  undefined ()
    aws-amplify: 5.3.21 => 5.3.21
    babel-packages:  undefined ()
    babel-plugin-react-compiler: 19.0.0-beta-201e55d-20241215 => 19.0.0-beta-201e55d-20241215
    browserify-zlib:  undefined ()
    browserslist:  undefined ()
    buffer:  undefined ()
    bytes:  undefined ()
    chart.js: ^4.4.0 => 4.4.7
    chart.js-auto:  undefined ()
    chart.js-helpers:  undefined ()
    ci-info:  undefined ()
    cli-select:  undefined ()
    client-only:  0.0.1
    clsx: ^2.1.1 => 2.1.1
    commander:  undefined ()
    comment-json:  undefined ()
    compression:  undefined ()
    conf:  undefined ()
    constants-browserify:  undefined ()
    content-disposition:  undefined ()
    content-type:  undefined ()
    cookie:  undefined ()
    cronstrue: ^2.48.0 => 2.53.0
    crontzconvert: ^1.1.1 => 1.1.1
    cross-spawn:  undefined ()
    crypto-browserify:  undefined ()
    css.escape:  undefined ()
    data-uri-to-buffer:  undefined ()
    dayjs: ^1.11.7 => 1.11.13
    debug:  undefined ()
    devalue:  undefined ()
    domain-browser:  undefined ()
    edge-runtime:  undefined ()
    eslint: ^8.11.0 => 8.57.1
    eslint-config-next: ^14.2.4 => 14.2.23
    eslint-plugin-react-compiler: 19.0.0-beta-201e55d-20241215 => 19.0.0-beta-201e55d-20241215
    events:  undefined ()
    find-cache-dir:  undefined ()
    find-up:  undefined ()
    framer-motion: ^11.3.30 => 11.18.0
    fresh:  undefined ()
    geist: ^1.3.0 => 1.3.1
    get-orientation:  undefined ()
    glob:  undefined ()
    gray-matter: ^4.0.3 => 4.0.3
    gzip-size:  undefined ()
    http-proxy:  undefined ()
    http-proxy-agent:  undefined ()
    https-browserify:  undefined ()
    https-proxy-agent:  undefined ()
    icss-utils:  undefined ()
    ignore-loader:  undefined ()
    image-size:  undefined ()
    is-animated:  undefined ()
    is-docker:  undefined ()
    is-wsl:  undefined ()
    jest-worker:  undefined ()
    js-yaml: ^4.1.0 => 4.1.0 (3.14.1)
    json5:  undefined ()
    jsonpath: ^1.1.1 => 1.1.1
    jsonwebtoken:  undefined ()
    loader-runner:  undefined ()
    loader-utils:  undefined ()
    lodash: ^4.17.21 => 4.17.21
    lodash.curry:  undefined ()
    lru-cache:  undefined ()
    lucide-react: ^0.462.0 => 0.462.0
    mini-css-extract-plugin:  undefined ()
    moment: ^2.29.4 => 2.30.1
    moment-timezone: ^0.5.46 => 0.5.46
    motion: ^11.12.0 => 11.18.0
    nanoid:  undefined ()
    native-url:  undefined ()
    neo-async:  undefined ()
    next: ^14.2.4 => 14.2.23
    next-with-less: ^3.0.1 => 3.0.1
    node-fetch:  undefined ()
    node-html-parser:  undefined ()
    ora:  undefined ()
    os-browserify:  undefined ()
    p-limit:  undefined ()
    papaparse: ^5.4.1 => 5.5.1
    path-browserify:  undefined ()
    picomatch:  undefined ()
    platform:  undefined ()
    postcss: ^8.4.38 => 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: ^18.3.1 => 18.3.1
    react-beautiful-dnd: ^13.1.0 => 13.1.1
    react-builtin:  undefined ()
    react-chartjs-2: ^5.2.0 => 5.3.0
    react-chatbot-kit: ^2.1.2 => 2.2.2
    react-dom: ^18.3.1 => 18.3.1
    react-dom-builtin:  undefined ()
    react-dom-experimental-builtin:  undefined ()
    react-experimental-builtin:  undefined ()
    react-google-recaptcha: ^2.1.0 => 2.1.0
    react-grid-heatmap: ^1.3.0 => 1.3.0
    react-icons: ^4.12.0 => 4.12.0
    react-is:  18.2.0
    react-js-cron: ^5.0.1 => 5.0.1
    react-json-tree: ^0.18.0 => 0.18.0
    react-markdown: ^8.0.7 => 8.0.7
    react-querybuilder: ^7.6.0 => 7.7.1
    react-redux: ^7.2.6 => 7.2.9 (9.2.0)
    react-refresh:  0.12.0
    react-router-dom: ^5.2.0 => 5.3.4
    react-select: ^5.7.3 => 5.9.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 ()
    react-spring: ^9.7.3 => 9.7.5
    react-syntax-highlighter: ^15.5.0 => 15.6.1
    react-use-websocket: ^4.8.1 => 4.11.1
    react-visibility-sensor: ^5.1.1 => 5.1.1
    regenerator-runtime:  0.13.4
    rehype-raw: ^7.0.0 => 7.0.0
    remark: ^14.0.2 => 14.0.3
    remark-gfm: 3.0.1 => 3.0.1
    remark-html: ^15.0.1 => 15.0.2
    remark-prism: ^1.3.6 => 1.3.6
    sass: ^1.49.9 => 1.83.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 ()
    swiper: ^10.1.0 => 10.3.1
    tailwind-merge: ^2.6.0 => 2.6.0
    tailwindcss: ^4.0.0 => 4.0.0
    tar:  undefined ()
    terser:  undefined ()
    text-table:  undefined ()
    timers-browserify:  undefined ()
    tty-browserify:  undefined ()
    ua-parser-js:  undefined ()
    unistore:  undefined ()
    util:  undefined ()
    uuid: ^10.0.0 => 10.0.0 (3.4.0, 8.3.2)
    vm-browserify:  undefined ()
    watchpack:  undefined ()
    web-vitals:  undefined ()
    webpack:  undefined ()
    webpack-sources:  undefined ()
    ws:  undefined ()
    zod:  undefined ()
  npmGlobalPackages:
    corepack: 0.29.3
    generator-code: 1.11.1
    gulp-cli: 3.0.0
    vsce: 2.15.0
    yarn: 1.22.22
    yo: 5.0.0

Describe the bug

We are encountering an issue with handling session expiration for Azure AD SSO in our application using AWS Amplify. The following code works as expected for Cognito, where it properly handles session expiration and displays a login expired popup. However, when using Azure AD SSO, the session expiration is not detected, and the login expired popup is not displayed.

Expected behavior

When the Azure AD SSO session expires, it should detect the session expiration, update the local storage, and trigger the "session expired" popup by setting setShowPopup(true).

Reproduction steps

1. Integrate Azure AD SSO into your app using AWS Amplify.
2. Authenticate the user via Azure AD SSO.
3. Simulate session expiration by either waiting for the session to expire or manually invalidating the session.
4. The code provided above should be in place to check for session validity every 30 seconds (setInterval with Auth.currentAuthenticatedUser()).
5. Observe the behavior:
   • With Azure AD SSO, session expiration is not detected, and no action is taken.
   • With Cognito, the same code detects session expiration and handles it correctly.

Code Snippet

// Put your code below this line.
useEffect(() => {
    const hubListener = Hub.listen('auth', ({ payload }) => {
        if (payload.event === 'signOut') {
            localStorage.setItem(
                'authEvent',
                JSON.stringify({ event: 'signOut', timestamp: Date.now() })
            );
        } else if (payload.event === 'signIn') {
            localStorage.setItem(
                'authEvent',
                JSON.stringify({ event: 'signIn', timestamp: Date.now() })
            );
        }
    });

    const checkSession = async () => {
        try {
            await Auth.currentAuthenticatedUser();
        } catch (error) {
            if (error === 'not authenticated') {
                localStorage.setItem(
                    'authEvent',
                    JSON.stringify({ event: 'signOut', timestamp: Date.now() })
                );
            }
        }
    };
    const interval = setInterval(checkSession, 30000);

    const storageListener = (event) => {
        if (event.key === 'authEvent') {
            const data = JSON.parse(event.newValue);
            if (data?.event === 'signOut') {
                setShowPopup(true);
            } else if (data?.event === 'signIn') {
                setShowPopup(false);
            }
        }
    };
    window.addEventListener('storage', storageListener);

    return () => {
        hubListener();
        clearInterval(interval);
        window.removeEventListener('storage', storageListener);
    };
}, []);

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

The issue appears to be specific to Azure AD SSO, as the session expiration detection and popup functionality works properly with Cognito.

[cwomack]

Hello, @sakib-shunyeka 👋. We may need to reproduce this on our side with an Azure federated v5 app and figure out the way to implement this, as I don't believe the v5 Auth.currentAuthenticatedUser() is going to be able to handle/detect any Azure AD tokens expiring. It WILL detect the Cognito token expirations (hence why it works with Cognito), but this will likely require some client side logic based on the TTL of the Azure tokens.

Can you share any more details about how the tokens are set up and how they are currently configured with their TTL?