Network Error When Using VPN with Amplify Cognito

[Ammar-Raneez]

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

Amplify Version

v6

Amplify Categories

auth

Backend

CDK

Environment information

# Put output below this line

  System:
    OS: macOS 15.3
    CPU: (8) arm64 Apple M1
    Memory: 98.02 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node
    Yarn: 1.22.22 - ~/.yarn/bin/yarn
    npm: 8.19.3 - ~/.nvm/versions/node/v18.13.0/bin/npm
  Browsers:
    Chrome: 133.0.6943.98
    Safari: 18.3
  npmPackages:
    @ampproject/toolbox-optimizer:  undefined ()
    @ant-design/nextjs-registry: ^1.0.2 => 1.0.2 
    @aws-amplify/adapter-nextjs: ^1.4.2 => 1.4.2 
    @aws-amplify/adapter-nextjs/api:  undefined ()
    @aws-amplify/adapter-nextjs/data:  undefined ()
    @aws-sdk/client-cognito-identity-provider: ^3.741.0 => 3.741.0 
    @aws-sdk/client-s3: 3.726.1 => 3.726.1 
    @aws-sdk/client-ses: 3.726.1 => 3.726.1 
    @aws-sdk/s3-request-presigner: 3.726.1 => 3.726.1 
    @babel/core: ^7.14.5 => undefined (7.26.0, )
    @babel/preset-react: ^7.14.5 => 7.26.3 
    @babel/runtime:  7.22.5 
    @edge-runtime/cookies:  5.0.0 
    @edge-runtime/ponyfill:  3.0.0 
    @edge-runtime/primitives:  5.0.0 
    @eslint/compat: 1.2.5 => 1.2.5 
    @eslint/js: 9.18.0 => 9.18.0 
    @hapi/accept:  undefined ()
    @mswjs/interceptors:  undefined ()
    @napi-rs/triples:  undefined ()
    @next/font:  undefined ()
    @nx/devkit: 20.3.1 => 20.3.1 
    @nx/esbuild: 20.3.1 => 20.3.1 
    @nx/eslint: 20.3.1 => 20.3.1 
    @nx/eslint-plugin: 20.3.1 => 20.3.1 
    @nx/express: 20.3.1 => 20.3.1 
    @nx/jest: 20.3.1 => 20.3.1 
    @nx/js: 20.3.1 => 20.3.1 
    @nx/next: 20.3.1 => 20.3.1 
    @nx/node: 20.3.1 => 20.3.1 
    @nx/playwright: 20.3.1 => 20.3.1 
    @nx/react: 20.3.1 => 20.3.1 
    @nx/web: 20.3.1 => 20.3.1 
    @nx/webpack: 20.3.1 => 20.3.1 
    @nx/workspace: 20.3.1 => 20.3.1 
    @opentelemetry/api:  undefined ()
    @playwright/test: ^1.36.0 => 1.49.1 
    @pmmmwh/react-refresh-webpack-plugin: ^0.5.7 => 0.5.15 
    @svgr/webpack: ^8.0.1 => 8.1.0 
    @swc-node/register: 1.10.9 => 1.10.9 
    @swc/core: 1.10.7 => 1.10.7 
    @swc/helpers: ~0.5.11 => 0.5.15 (0.5.5)
    @testing-library/react: 16.1.0 => 16.1.0 
    @types/bcryptjs: ^2.4.6 => 2.4.6 
    @types/cors: ^2.8.17 => 2.8.17 
    @types/express: 5.0.0 => 5.0.0 (4.17.21)
    @types/jest: ^29.5.12 => 29.5.14 
    @types/js-cookie: ^3.0.6 => 3.0.6 
    @types/jsonwebtoken: ^9.0.7 => 9.0.7 
    @types/morgan: ^1.9.9 => 1.9.9 
    @types/node: 22.10.5 => 22.10.5 (22.10.2)
    @types/react: 19.0.5 => 19.0.5 
    @types/react-dom: 19.0.3 => 19.0.3 
    @vercel/nft:  undefined ()
    @vercel/og:  0.6.3 
    acorn:  undefined ()
    ajv: ^8.17.1 => 8.17.1 (6.12.6)
    ajv-formats: ^3.0.1 => 3.0.1 (2.1.1)
    amphtml-validator:  undefined ()
    anser:  undefined ()
    antd: 5.23.0 => 5.23.0 
    arg:  undefined ()
    assert:  undefined ()
    async-retry:  undefined ()
    async-sema:  undefined ()
    autoprefixer: 10.4.20 => 10.4.20 
    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 ()
    aws-jwt-verify: ^5.0.0 => 5.0.0 (4.0.1)
    axios: ^1.6.0 => 1.7.9 
    babel-jest: ^29.7.0 => 29.7.0 
    babel-packages:  undefined ()
    bcryptjs: ^2.4.3 => 2.4.3 
    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 ()
    cors: ^2.8.5 => 2.8.5 
    cross-spawn:  undefined ()
    crypto-browserify:  undefined ()
    css.escape:  undefined ()
    data-uri-to-buffer:  undefined ()
    date-fns: ^4.1.0 => 4.1.0 
    debug:  undefined ()
    devalue:  undefined ()
    domain-browser:  undefined ()
    dotenv: ^16.4.7 => 16.4.7 
    edge-runtime:  undefined ()
    env-cmd: ^10.1.0 => 10.1.0 
    esbuild: 0.24.2 => 0.24.2 
    eslint: 9.18.0 => 9.18.0 
    eslint-config-airbnb: ^19.0.4 => 19.0.4 
    eslint-config-airbnb-typescript: ^18.0.0 => 18.0.0 
    eslint-config-next: 15.1.4 => 15.1.4 
    eslint-config-prettier: ^9.0.0 => 9.1.0 
    eslint-plugin-import: 2.31.0 => 2.31.0 
    eslint-plugin-jsx-a11y: 6.10.2 => 6.10.2 
    eslint-plugin-playwright: 2.1.0 => 2.1.0 
    eslint-plugin-react: 7.37.3 => 7.37.3 (7.37.2)
    eslint-plugin-react-hooks: 5.1.0 => 5.1.0 
    eslint-plugin-simple-import-sort: ^12.1.1 => 12.1.1 
    events:  undefined ()
    express: ^4.21.2 => 4.21.2 
    find-cache-dir:  undefined ()
    find-up:  undefined ()
    fresh:  undefined ()
    get-orientation:  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: ^29.7.0 => 29.7.0 
    jest-environment-jsdom: ^29.7.0 => 29.7.0 
    jest-environment-node: ^29.7.0 => 29.7.0 
    jest-worker:  undefined ()
    js-cookie: ^3.0.5 => 3.0.5 
    json5:  undefined ()
    jsonwebtoken: ^9.0.2 => undefined (9.0.2, )
    jwt-decode: ^4.0.0 => 4.0.0 
    lint-staged: 15.3.0 => 15.3.0 
    loader-runner:  undefined ()
    loader-utils:  undefined ()
    lodash.curry:  undefined ()
    lru-cache:  undefined ()
    mini-css-extract-plugin:  undefined ()
    morgan: ^1.10.0 => 1.10.0 
    nanoid:  undefined ()
    native-url:  undefined ()
    neo-async:  undefined ()
    next: 14.2.23 => 14.2.23 
    next-intl: ^3.26.3 => 3.26.3 
    node-fetch:  undefined ()
    node-html-parser:  undefined ()
    nx: 20.2.2 => 20.2.2 (20.3.1)
    ora:  undefined ()
    os-browserify:  undefined ()
    p-limit:  undefined ()
    passport: ^0.7.0 => 0.7.0 
    passport-jwt: ^4.0.1 => 4.0.1 
    path-browserify:  undefined ()
    pg: ^8.13.1 => 8.13.1 
    picomatch:  undefined ()
    platform:  undefined ()
    postcss: 8.4.49 => 8.4.49 (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 ()
    prettier: 3.4.2 => 3.4.2 
    process:  undefined ()
    punycode:  undefined ()
    querystring-es3:  undefined ()
    raw-body:  undefined ()
    react: 19.0.0 => 19.0.0 
    react-builtin:  undefined ()
    react-dom: 19.0.0 => 19.0.0 
    react-dom-builtin:  undefined ()
    react-dom-experimental-builtin:  undefined ()
    react-experimental-builtin:  undefined ()
    react-icons: ^5.4.0 => 5.4.0 
    react-is:  18.2.0 
    react-refresh: 0.16.0 => 0.16.0 (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 ()
    reflect-metadata: ^0.2.2 => 0.2.2 
    regenerator-runtime:  0.13.4 
    rotating-file-stream: ^3.2.5 => 3.2.5 
    sass-loader:  undefined ()
    scheduler-builtin:  undefined ()
    scheduler-experimental-builtin:  undefined ()
    schema-utils:  undefined ()
    semver:  undefined ()
    send:  undefined ()
    sequelize: ^6.37.5 => 6.37.5 
    sequelize-typescript: ^2.1.6 => 2.1.6 
    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.17 => 3.4.17 
    tar:  undefined ()
    terser:  undefined ()
    text-table:  undefined ()
    timers-browserify:  undefined ()
    ts-jest: ^29.1.0 => 29.2.5 
    ts-node: 10.9.2 => 10.9.2 (10.9.1)
    tslib: ^2.3.0 => 2.8.1 
    tty-browserify:  undefined ()
    typescript: 5.7.3 => 5.7.3 (5.6.3)
    typescript-eslint: 8.19.1 => 8.19.1 
    ua-parser-js:  undefined ()
    unistore:  undefined ()
    util:  undefined ()
    vm-browserify:  undefined ()
    watchpack:  undefined ()
    web-vitals:  undefined ()
    webpack:  undefined ()
    webpack-cli: 6.0.1 => 6.0.1 
    webpack-sources:  undefined ()
    winston: ^3.17.0 => 3.17.0 
    winston-daily-rotate-file: ^5.0.0 => 5.0.0 
    ws:  undefined ()
    zod:  undefined ()
    zustand: 5.0.3 => 5.0.3 
  npmGlobalPackages:
    @aws-amplify/cli: 12.8.2
    @nestjs/cli: 10.3.0
    corepack: 0.15.2
    mkcert: 3.2.0
    npm: 8.19.3
    typescript: 5.3.3
    verdaccio: 5.29.0
    yarn: 1.22.19

Describe the bug

Cognito authentication seems to be failing when connected to a VPN.

Specifically, the error is being thrown from middleware.ts (where I do an auth guard check).

Expected behavior

Everything works fine if my VPN is turned off. Are there any additional configuration that must be set for VPNs?

I need the VPN turned on because I send requests to an external API that works only if connected to the VPN.

Reproduction steps

1. Initiate a NextJS application (I'm using CDK with Cognito so the Amplify configurations are given through an env file).
2. Create the Amplify server config file.
3. Set up the middleware.
4. Everything should work fine.
5. Turn on a VPN.
6. A network error should arise / the server session should be lost.

Code Snippet

The guard check

  await serverRunner.runWithAmplifyServerContext({
    nextServerContext: { request, response },
    operation: async (contextSpec) => {
      try {
        const session = await fetchAuthSession(contextSpec, {});
        .....
      } catch (error) {
        console.error(error)
        ....
      }
    },

Log output

 [NetworkError: A network error has occurred.] {
  name: 'NetworkError',
  underlyingError:  [TypeError: fetch failed] {
  cause:  [ConnectTimeoutError: Connect Timeout Error] {
  name: 'ConnectTimeoutError',
  code: 'UND_ERR_CONNECT_TIMEOUT',
  message: 'Connect Timeout Error'
}
},
  recoverySuggestion: undefined,
  constructor: [Function: AmplifyError]
}

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

[ashwinkumar6]

Hi @Ammar-Raneez, thanks for raising the issue

• Are you encountering this error while already logged in with an active session? Middleware shows no issues, but enabling the VPN causes the fetchAuthSession operation in middleware to fail.
• Could this be an intermittent issue where the network temporarily drops and then reconnects? After enabling the VPN are there any other networks calls that go through

[cwomack]

@Ammar-Raneez, can you also clarify if the middleware.ts is also making any Cognito calls through the VPN? Or are the Cognito calls only being made on the client through the VPN? Trying to figure out where the middleware.ts is running.

[Ammar-Raneez]

Hi @ashwinkumar6,

Yes that seems to be the exact case here. Other network calls do go ahead as I have a regular Rest API that works without issues.

However, the issue seems to be sporadic, making it kinda difficult to provide a complete diagnosis.

[Ammar-Raneez]

Hi @cwomack,

Nope, the middleware is only calling the fetchAuthSession() API from auth/server and nothing else. The regular Cognito calls of signIn, getCurrentUser, fetchAuthSession etc are from client end

[jjarvisp]

Thanks for the additional information @Ammar-Raneez. When you encounter the network timeout are you able to ping the Cognito endpoint from outside your application and receive a response?

[Ammar-Raneez]

It has been working now for some reason. I did not make any changes. Probably an actual network issue?

[jjarvisp]

Hey @Ammar-Raneez, glad everything is working. It does sound like it could have been a transient issue with the VPN. I will close this issue for now. Please feel to reopen or create a new issue if you encounter any more problems!