amplify-js: 503 Error when invoking NextJS API Route from Client

Describe the bug I am using Amplify’s API functionality to invoke an AppSync GraphQL endpoint to resolve my API calls. But, I’m getting a GraphQL error message in my Lambda@Edge CloudWatch logs when trying to invoke my API in my application from the client side.

Error: No credentials
    at GraphQLAPIClass.<anonymous> (/var/task/pages/api/users/[username].js:163397:35)
    at step (/var/task/pages/api/users/[username].js:163243:23)
    at Object.next (/var/task/pages/api/users/[username].js:163224:53)
    at fulfilled (/var/task/pages/api/users/[username].js:163215:58)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

The weird thing is that when I try to execute the API’s internal logic on the server side, everything works properly. So, this correctly retrieves and display all data in my application.

# pages/index.js
export const getServerSideProps = async ({ req, res }) => {
  const response = await API.graphql(graphqlOperation(UserQueries.GetUser, <username>))
  
  return {
    props: {
      user: response.data,
    },
  };
};

However, if if I invoke this api route, by going to <app_id>.cloudfront.net/api/users/[username], I receive the following error page:

# pages/api/users/[username]/index.js

const handler = async (req, res) => {
  const { username } = req.query.username;
  const response = await API.graphql(graphqlOperation(UserQueries.GetUser, <username>))
  res.status(200).json(response.data);
};

This tells me that I have set up my Cognito and identity pools correctly. For now I am just developing using an API Key, so I expect there to be no permissions barriers.

To Reproduce

1. Deploy a GraphQL API using CDK (separately, not using Amplify)
2. Create. NextJS application (https://nextjs.org/docs/getting-started)
3. Put the AppSync Endpoint URL in the config and set up a custom “_app.js” file using Amplify.configure(config);
4. Add an API Route to the NextJS Application using the instructions here: https://nextjs.org/docs/api-routes/introduction.
5. Handle the API route by using Amplify’s API client: const response = await API.graphql(graphqlOperation(operation, params))
6. Add a serverless.yaml at the root of the project with the following content:

# serverless.yml
App:
  component: "@sls-next/serverless-component@1.18.0"

1. Deploy the application by running the command serverless. See: https://github.com/serverless-nextjs/serverless-next.js
2. Go to https://<app_id>.cloudfront.net/api/<path_to_your_api_route>.

This will result in the 503 error above.

Expected behavior API query response should be returned when invoked client side.

Code Snippet N/A

Screenshots

What is Configured? Serverless Config

# serverless.yml
App:
  component: "@sls-next/serverless-component@1.18.0"

If applicable, please provide what is configured for Amplify CLI:

• Which steps did you follow via Amplify CLI when configuring your resources
  • I deployed all resources via a separate CDK stack and I’m referencing their AWS ARN’s in the amplify config. I did not deploy any of my cloud resources using amplify.
• Which resources do you have configured?
  • If applicable, please provide your manual configuration example:

  const AMPLIFY_CONFIG ={
     // API Settings
     aws_appsync_graphqlEndpoint: process.env.NEXT_PUBLIC_GRAPHQL_ENDPOINT,
     aws_appsync_region: process.env.NEXT_PUBLIC_AWS_REGION,
     aws_appsync_authenticationType: process.env.NEXT_PUBLIC_API_AUTH_TYPE,
     aws_appsync_apiKey: process.env.NEXT_PUBLIC_API_KEY,
     // Auth Settings
     aws_cognito_region: process.env.NEXT_PUBLIC_AWS_REGION,
     aws_user_pools_id: process.env.NEXT_PUBLIC_USER_POOL_ID,
     aws_user_pools_web_client_id: process.env.NEXT_PUBLIC_USER_POOL_WEB_CLIENT_ID,
     aws_cognito_identity_pool_id: process.env.NEXT_PUBLIC_IDENTITY_POOL_ID,
     aws_user_files_s3_bucket_region: process.env.NEXT_PUBLIC_AWS_REGION,
     aws_user_files_s3_bucket: process.env.NEXT_PUBLIC_S3_BUCKET,
     ssr: true,
     Analytics: {
       disabled: true,
     },
   };
  

  • If it is necessary for me to provide actual resource IDs, please let me know. I just want to be careful sharing resource IDs around.

# npx envinfo --system --binaries --browsers --npmPackages --npmGlobalPackages

  System:
    OS: macOS 10.15.6
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
    Memory: 24.88 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 15.7.0 - ~/Home/startups/hatch_project/website/.env/bin/node
    npm: 7.4.3 - ~/Home/startups/hatch_project/website/.env/bin/npm
  Browsers:
    Chrome: 89.0.4389.82
    Safari: 14.0
  npmPackages:
    @material-ui/core: ^4.11.3 => 4.11.3 
    @material-ui/lab: ^4.0.0-alpha.57 => 4.0.0-alpha.57 
    @reduxjs/toolkit: ^1.5.0 => 1.5.0 
    @svgr/webpack: ^5.5.0 => 5.5.0 
    aws-amplify: ^3.3.23 => 3.3.23 
    axios: ^0.21.1 => 0.21.1 
    bootstrap: ^4.6.0 => 4.6.0 
    immutability-helper: ^3.1.1 => 3.1.1 
    luxon: ^1.25.0 => 1.26.0 
    next: ^10.0.8 => 10.0.8 
    react: 17.0.1 => 17.0.1 
    react-bootstrap: ^1.4.3 => 1.5.1 
    react-dom: 17.0.1 => 17.0.1 
    react-icons: ^4.1.0 => 4.2.0 
    react-redux: ^7.2.2 => 7.2.2 
    react-responsive: ^8.2.0 => 8.2.0 
    react-router-dom: ^5.2.0 => 5.2.0 
    sass: ^1.32.6 => 1.32.8 
    serverless: ^2.28.7 => 2.28.7 
    swr: ^0.4.2 => 0.4.2 
    update: ^0.7.4 => 0.7.4 
    uuid: ^8.3.2 => 8.3.2 
  npmGlobalPackages:
    @aws-amplify/cli: 4.41.2
    npm-check-updates: 11.1.1
    npm: 7.4.3
    serverless: 2.23.0

Additional context The strangest part of this is that server side calls are working properly and client side calls are not working on the deployed site. However, on the local server everything is working fine. Right now, both the deployed and development applications are using the same environment variable settings.