Failed to fetch https://cognito-idp.xxx.amazonaws.com/xxx/.well-known/jwks.json: Response time-out (after 1500 ms)

[nythyatdora]

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

None

Environment information

Hello, developers! I have been facing bug that prevent getting data for authenticated users in SSR for past months. After decided to debug this issue, I think I find where the problem is coming from. Here I am using Next 15 with Page Router and relied heavy on getServerSideProps. When trying to fetchAuthSession in SSR, it keeps return undefined only in development. When deployed to production with SST, the app run normally without any issue.

Describe the bug

When I called fetchAuthSession in getServerSideProps,
then it returned undefined only in development,
but it is working in production.

Expected behavior

When I called fetchAuthSession in getServerSideProps,
then it should return session.

Reproduction steps

...

Code Snippet

{
  "name": "web",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "@aws-amplify/adapter-nextjs": "^1.4.0",
    "aws-amplify": "^6.12.0",
    "next": "15.1.6",
  }
  "devDependencies": {
    "sst": "2.41.4",
    "tailwindcss": "^4",
    "tsconfig": "*"
  }
}

Log output

// Put your logs below this line

aws-exports.js

No response

Manual configuration

import { ResourcesConfig } from 'aws-amplify'

const isBrowser =
  typeof globalThis.window !== 'undefined' && globalThis.window.location.origin

let host

if (isBrowser) {
  host = window.location.origin
} else if (process.env.NODE_ENV === 'production') {
  host = `https://${process.env.NEXT_PUBLIC_DOMAIN_NAME}`
} else if (process.env.NODE_ENV === 'development') {
  host = `http://localhost:3000`
}

const configure: ResourcesConfig = {
  API: {
    GraphQL: {
      endpoint: process.env.NEXT_PUBLIC_GRAPHQL_APPSYNC_API_URL!,
      apiKey: process.env.NEXT_PUBLIC_GRAPHQL_APPSYNC_API_KEY!,
      region: process.env.NEXT_PUBLIC_REGION,
      defaultAuthMode: 'apiKey'
    }
  },
  Auth: {
    Cognito: {
      userPoolId: process.env.NEXT_PUBLIC_USER_POOL_ID!,
      userPoolClientId: process.env.NEXT_PUBLIC_USER_POOL_WEB_CLIENT_ID!,
      loginWith: {
        oauth: {
          domain:
            process.env.NEXT_PUBLIC_DOMAIN_NAME === 'xxx'
              ? 'xxx'
              : `auth-${process.env.NEXT_PUBLIC_DOMAIN_NAME}`,
          responseType: 'code',
          scopes: [
            'email',
            'openid',
            'profile',
            'aws.cognito.signin.user.admin'
          ],
          redirectSignIn: [`${host}/sign-in/callback`],
          redirectSignOut: [`${host}/sign-out`]
        }
      }
    }
  }
}

export { configure }

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

[nadetastic]

Hi @nythyatdora thank you for opening this issue. In order to use Amplify in SSR context, there are some additional steps to take that can be found here - Configure Amplify server side. Can you confirm whether you have set you app with these instructions?

[nythyatdora]

Yes, I strictly followed all the documents.

In /pages/_app.tsx, I have called

Amplify.configure(configure, {
  ssr: true
})

This is how I called the fetchAuthSession,

import { fetchAuthSession } from 'web-amplify/server'

export const getServerSideProps = async (context: GetServerSidePropsContext) => {
    const session = await fetchAuthSession(context).catch(console.warn)
    ...

In web-amplify/server,

import { configure } from 'web-amplify/configure'
import {
  fetchAuthSession as fetchAuthSessionServer,
} from 'aws-amplify/auth/server'
import { createServerRunner } from '@aws-amplify/adapter-nextjs'

const serverRunner = createServerRunner({
  config: configure as any
})

const fetchAuthSession = (context) =>
  serverRunner.runWithAmplifyServerContext({
    nextServerContext: {
      request: context.req,
      response: context.res
    },
    operation: fetchAuthSessionServer
  })

In web-amplify/configure

import { ResourcesConfig } from 'aws-amplify'

const isBrowser =
  typeof globalThis.window !== 'undefined' && globalThis.window.location.origin

let host

if (isBrowser) {
  host = window.location.origin
} else if (process.env.NODE_ENV === 'production') {
  host = `https://${process.env.NEXT_PUBLIC_DOMAIN_NAME}`
} else if (process.env.NODE_ENV === 'development') {
  host = `http://localhost:3000`
}

const configure: ResourcesConfig = {
  API: {
    GraphQL: {
      endpoint: process.env.NEXT_PUBLIC_GRAPHQL_APPSYNC_API_URL!,
      apiKey: process.env.NEXT_PUBLIC_GRAPHQL_APPSYNC_API_KEY!,
      region: process.env.NEXT_PUBLIC_REGION,
      defaultAuthMode: 'apiKey'
    }
  },
  Auth: {
    Cognito: {
      userPoolId: process.env.NEXT_PUBLIC_USER_POOL_ID!,
      userPoolClientId: process.env.NEXT_PUBLIC_USER_POOL_WEB_CLIENT_ID!,
      loginWith: {
        oauth: {
          domain:
            process.env.NEXT_PUBLIC_DOMAIN_NAME === 'xxx'
              ? 'xxx'
              : `auth-${process.env.NEXT_PUBLIC_DOMAIN_NAME}`,
          responseType: 'code',
          scopes: [
            'email',
            'openid',
            'profile',
            'aws.cognito.signin.user.admin'
          ],
          redirectSignIn: [`${host}/sign-in/callback`],
          redirectSignOut: [`${host}/sign-out`]
        }
      }
    }
  }
}

export { configure }

And I already made sure that I have the user signed in, and the required cookies are ready as well. After doing some debug node_modules/@aws-amplify/auth/dist/esm/providers/cognito/tokenProvider/TokenStore.mjs

    async loadTokens() {
        // TODO(v6): migration logic should be here
        // Reading V5 tokens old format
        try {
            const authKeys = await this.getAuthKeys();
            const accessTokenString = await this.getKeyValueStorage().getItem(authKeys.accessToken);
            if (!accessTokenString) {
                throw new AuthError({
                    name: 'NoSessionFoundException',
                    message: 'Auth session was not found. Make sure to call signIn.',
                });
            }
    ....

The accessTokenString is null.

In node_modules/aws-amplify/dist/esm/adapter-core/storageFactories/createKeyValueStorageFromCookieStorageAdapter.mjs

        async getItem(key) {
            const cookie = cookieStorageAdapter.get(key);
            const value = cookie?.value ?? null;
            if (value && validator?.getItem) {
                // const isValid = true // my workaround in next development 
                const isValid = await validator.getItem(key, value);  // always false in development
                if (!isValid)
                    return null;
            }
            return value;
        },

The problem is only happened in development running next dev. But when deployed to production, it is working with no issue.

Additional information on the region, the cognito resources are in the us-east-1, next app is also in us-east-1.
and I am running my localhost from South East Asia (Cambodia).

[HuiSF]

Hi @nythyatdora the endpoint list in the error is associated with your Cognito user pool, which is a common endpoint. Could you verify whether you can access your User Pool endpoints from your server environment, and since you mentioned that your Cognito resource is located at us-east-1 but your are located in South East Asia, the network latency may cause the time out. We recommend you deploy your resource to a geographically closer location for development.