Trying to call rest api from getserversideprops gives me 401 unauthorized error

[didemkkaslan]

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

REST API

Amplify Version

v6

Amplify Categories

api

Backend

CDK

Environment information

# Put output below this line
  System:
    OS: macOS 14.2.1
    CPU: (8) arm64 Apple M2
    Memory: 154.86 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
    pnpm: 8.13.1 - ~/.nvm/versions/node/v20.10.0/bin/pnpm
    bun: 1.0.2 - ~/.bun/bin/bun
  Browsers:
    Chrome: 122.0.6261.129
    Safari: 17.2.1
  npmPackages:
    @amplitude/analytics-browser: ^2.3.3 => 2.4.1 
    @ampproject/toolbox-optimizer:  undefined ()
    @ant-design/cssinjs: ^1.17.2 => 1.18.4 
    @ant-design/icons: ^5.2.6 => 5.3.0 
    @ant-design/plots: ^1.2.5 => 1.2.6 
    @aws-amplify/adapter-nextjs: ^1.0.9 => 1.0.16 
    @aws-amplify/adapter-nextjs/api:  undefined ()
    @aws-amplify/adapter-nextjs/data:  undefined ()
    @babel/core:  undefined ()
    @babel/runtime:  7.15.4 
    @edge-runtime/cookies:  4.0.2 
    @edge-runtime/ponyfill:  2.4.1 
    @edge-runtime/primitives:  4.0.2 
    @graphql-codegen/cli: 5.0.0 => 5.0.0 
    @graphql-codegen/client-preset: 4.1.0 => 4.1.0 
    @graphql-codegen/introspection: 4.0.0 => 4.0.0 
    @hapi/accept:  undefined ()
    @mantine/hooks: ^7.1.5 => 7.5.2 
    @microsoft/teams-js: ^2.16.0 => 2.20.0 
    @mswjs/interceptors:  undefined ()
    @napi-rs/triples:  undefined ()
    @next/bundle-analyzer: ^13.5.6 => 13.5.6 
    @next/font:  undefined ()
    @next/react-dev-overlay:  undefined ()
    @opentelemetry/api:  undefined ()
    @react-pdf/renderer: ^3.1.13 => 3.3.8 
    @segment/ajv-human-errors:  undefined ()
    @tailwindcss/typography: ^0.5.10 => 0.5.10 
    @tanstack/query-codemods:  4.24.3 
    @tanstack/react-query: ^5.0.5 => 5.20.5 
    @tanstack/react-query-devtools: ^5.8.9 => 5.20.5 
    @testing-library/jest-dom: ^6.1.4 => 6.4.2 
    @testing-library/react: ^14.0.0 => 14.2.1 
    @testing-library/user-event: ^14.5.1 => 14.5.2 
    @types/jest: ^29.5.6 => 29.5.12 
    @types/lodash: ^4.14.200 => 4.14.202 
    @types/mixpanel-browser: ^2.47.4 => 2.49.0 
    @types/node: ^20.8.8 => 20.11.17 (16.18.87)
    @types/react: ^18.2.31 => 18.2.55 
    @types/react-dom: ^18.2.14 => 18.2.19 
    @types/react-google-recaptcha: ^2.1.7 => 2.1.9 
    @types/react-highlight-words: ^0.16.6 => 0.16.7 
    @types/uuid: ^9.0.7 => 9.0.8 
    @typescript-eslint/eslint-plugin: ^6.9.0 => 6.21.0 
    @typescript-eslint/parser: ^6.9.0 => 6.21.0 
    @vercel/nft:  undefined ()
    @vercel/og:  undefined ()
    acorn:  undefined ()
    amphtml-validator:  undefined ()
    anser:  undefined ()
    antd: 5.10.2 => 5.10.2 
    apexcharts: ^3.44.0 => 3.45.2 
    arg:  undefined ()
    assert:  undefined ()
    async-retry:  undefined ()
    async-sema:  undefined ()
    autoprefixer: ^10.4.16 => 10.4.17 
    aws-amplify: 6.0.15 => 6.0.15 
    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/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-rum-web: ^1.15.0 => 1.17.0 
    axios: ^1.5.1 => 1.6.7 
    babel-packages:  undefined ()
    browserify-zlib:  undefined ()
    browserslist:  undefined ()
    buffer:  undefined ()
    bytes:  undefined ()
    ci-info:  undefined ()
    cli-select:  undefined ()
    client-only:  0.0.1 
    clsx: ^2.0.0 => 2.1.0 
    comment-json:  undefined ()
    compression:  undefined ()
    conf:  undefined ()
    constants-browserify:  undefined ()
    content-disposition:  undefined ()
    content-type:  undefined ()
    cookie:  undefined ()
    cookies-next: ^4.1.1 => 4.1.1 
    cross-spawn:  undefined ()
    crypto-browserify:  undefined ()
    css.escape:  undefined ()
    data-uri-to-buffer:  undefined ()
    dayjs: ^1.11.10 => 1.11.10 
    debug:  undefined ()
    devalue:  undefined ()
    docx: ^8.5.0 => 8.5.0 
    domain-browser:  undefined ()
    edge-runtime:  undefined ()
    eslint: ^8.52.0 => 8.56.0 
    eslint-config-airbnb: ^19.0.4 => 19.0.4 
    eslint-config-airbnb-typescript: ^17.1.0 => 17.1.0 
    eslint-config-next: ^13.5.6 => 13.5.6 
    eslint-config-prettier: ^9.0.0 => 9.1.0 
    eslint-plugin-i18next: ^6.0.3 => 6.0.3 
    eslint-plugin-import: ^2.29.0 => 2.29.1 
    eslint-plugin-jest: ^27.4.3 => 27.8.0 
    eslint-plugin-jest-dom: ^5.1.0 => 5.1.0 
    eslint-plugin-jsx-a11y: ^6.7.1 => 6.8.0 
    eslint-plugin-react: ^7.33.2 => 7.33.2 
    eslint-plugin-testing-library: ^6.1.2 => 6.2.0 
    events:  undefined ()
    find-cache-dir:  undefined ()
    find-up:  undefined ()
    framer-motion: ^10.16.4 => 10.18.0 
    fresh:  undefined ()
    get-orientation:  undefined ()
    glob:  undefined ()
    graphql: ^16.8.1 => 16.8.1 (15.8.0)
    graphql-request: ^6.1.0 => 6.1.0 
    gzip-size:  undefined ()
    http-proxy:  undefined ()
    http-proxy-agent:  undefined ()
    https-browserify:  undefined ()
    https-proxy-agent:  undefined ()
    husky: ^8.0.3 => 8.0.3 
    i18next: ^23.7.15 => 23.8.2 
    i18next-chained-backend: ^4.5.0 => 4.6.2 
    i18next-http-backend: ^2.2.2 => 2.4.3 
    i18next-localstorage-backend: ^4.2.0 => 4.2.0 
    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-worker:  undefined ()
    json5:  undefined ()
    jsonwebtoken:  undefined ()
    jwt-decode: ^3.1.2 => 3.1.2 
    loader-runner:  undefined ()
    loader-utils:  undefined ()
    lodash: ^4.17.21 => 4.17.21 
    lodash.curry:  undefined ()
    lru-cache:  undefined ()
    micromatch:  undefined ()
    mini-css-extract-plugin:  undefined ()
    mixpanel-browser: ^2.47.0 => 2.49.0 
    nanoid:  undefined ()
    native-url:  undefined ()
    neo-async:  undefined ()
    next: ^13.5.6 => 13.5.6 
    next-i18next: ^15.1.2 => 15.2.0 
    next-i18next-create-client:  undefined ()
    next-seo: ^6.1.0 => 6.4.0 
    node-fetch:  undefined ()
    node-html-parser:  undefined ()
    nookies: ^2.5.2 => 2.5.2 
    ora:  undefined ()
    os-browserify:  undefined ()
    p-limit:  undefined ()
    path-browserify:  undefined ()
    platform:  undefined ()
    postcss: ^8.4.31 => 8.4.35 (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.0.3 => 3.2.5 
    prettier-plugin-tailwindcss: ^0.5.6 => 0.5.11 
    process:  undefined ()
    punycode:  undefined ()
    querystring-es3:  undefined ()
    raw-body:  undefined ()
    react: 18.2.0 => 18.2.0 
    react-apexcharts: ^1.4.1 => 1.4.1 
    react-builtin:  undefined ()
    react-dom: 18.2.0 => 18.2.0 
    react-dom-builtin:  undefined ()
    react-dom-experimental-builtin:  undefined ()
    react-experimental-builtin:  undefined ()
    react-google-recaptcha: ^3.1.0 => 3.1.0 
    react-highlight-words: ^0.20.0 => 0.20.0 
    react-i18next: ^14.0.0 => 14.0.5 
    react-icons: ^4.11.0 => 4.12.0 
    react-infinite-scroll-component: ^6.1.0 => 6.1.0 
    react-is:  18.2.0 
    react-refresh:  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 ()
    regenerator-runtime:  0.13.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 ()
    sharp: ^0.32.6 => 0.32.6 
    shell-quote:  undefined ()
    source-map:  undefined ()
    stacktrace-parser:  undefined ()
    stream-browserify:  undefined ()
    stream-http:  undefined ()
    string-hash:  undefined ()
    string_decoder:  undefined ()
    strip-ansi:  undefined ()
    superstruct:  undefined ()
    tailwind-merge: ^1.14.0 => 1.14.0 
    tailwindcss: ^3.3.3 => 3.4.1 
    tar:  undefined ()
    terser:  undefined ()
    text-table:  undefined ()
    timers-browserify:  undefined ()
    tty-browserify:  undefined ()
    typescript: ^5.2.2 => 5.3.3 
    ua-parser-js:  undefined ()
    undici:  undefined ()
    unistore:  undefined ()
    usehooks-ts: ^2.9.1 => 2.14.0 
    util:  undefined ()
    uuid: ^9.0.1 => 9.0.1 (8.3.2)
    vm-browserify:  undefined ()
    watchpack:  undefined ()
    web-vitals:  undefined ()
    webpack:  undefined ()
    webpack-sources:  undefined ()
    ws:  undefined ()
    zod: ^3.22.4 => 3.22.4 ()
  npmGlobalPackages:
    @aws-amplify/cli: 12.10.0
    corepack: 0.22.0
    eas-cli: 7.0.0
    npm: 10.2.3
    pnpm: 8.13.1

Describe the bug

I'm getting unauthorized error trying to access rest api endpoints using getServerSideProps in a NextJS app(pages router).

 ⨯ unhandledRejection: UnauthorizedException: Unauthorized
    at buildRestApiError (file:///Users/didemkucukkaraaslan/spiky-projects/platform-v2/node_modules/@aws-amplify/api-rest/dist/esm/utils/serviceError.mjs:89:26)
    at parseRestApiServiceError (file:///Users/didemkucukkaraaslan/spiky-projects/platform-v2/node_modules/@aws-amplify/api-rest/dist/esm/utils/serviceError.mjs:26:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async job (file:///Users/didemkucukkaraaslan/spiky-projects/platform-v2/node_modules/@aws-amplify/api-rest/dist/esm/utils/createCancellableOperation.mjs:27:23) {
  underlyingError: UnauthorizedException: Unauthorized
      at parseJsonError (file:///Users/didemkucukkaraaslan/spiky-projects/platform-v2/node_modules/@aws-amplify/core/dist/esm/clients/serde/json.mjs:28:19)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async parseRestApiServiceError (file:///Users/didemkucukkaraaslan/spiky-projects/platform-v2/node_modules/@aws-amplify/api-rest/dist/esm/utils/serviceError.mjs:19:28)
      at async job (file:///Users/didemkucukkaraaslan/spiky-projects/platform-v2/node_modules/@aws-amplify/api-rest/dist/esm/utils/createCancellableOperation.mjs:27:23) {
    '$metadata': {
      httpStatusCode: 401,
      requestId: '40937120-1421-462c-94fb-e39306c89ed2',
      extendedRequestId: undefined,
      cfId: 'h5NI1kUBA7UM-p9_aBafVFrbxs3vLerxrge9aD0i6gkT-v0hmKqUEQ=='
    }
  },
  recoverySuggestion: undefined,
  constructor: [class RestApiError extends ApiError],
  _response: {
    statusCode: 401,
    headers: {
      connection: 'keep-alive',
      'content-length': '26',
      'content-type': 'application/json',
      date: 'Fri, 15 Mar 2024 06:45:51 GMT',
      via: '1.1 6e4ed2b1996ce238462d61d3bfff667a.cloudfront.net (CloudFront)',
      'x-amz-apigw-id': 'UqI5AGd6CYcECog=',
      'x-amz-cf-id': 'h5NI1kUBA7UM-p9_aBafVFrbxs3vLerxrge9aD0i6gkT-v0hmKqUEQ==',
      'x-amz-cf-pop': 'FRA60-P6',
      'x-amzn-errortype': 'UnauthorizedException',
      'x-amzn-requestid': '40937120-1421-462c-94fb-e39306c89ed2',
      'x-cache': 'Error from cloudfront'
    },
    body: '{"message":"Unauthorized"}'
  },
  '$metadata': {
    httpStatusCode: 401,
    requestId: '40937120-1421-462c-94fb-e39306c89ed2',
    extendedRequestId: undefined,
    cfId: 'h5NI1kUBA7UM-p9_aBafVFrbxs3vLerxrge9aD0i6gkT-v0hmKqUEQ=='
  }
}

Expected behavior

It shouldnt be unauthorized

Reproduction steps

  export const getServerSideProps: GetServerSideProps = async (
  ctx: GetServerSidePropsContext,
) => {
  const locale = getLocale(ctx);
  const { scopes } = await getScopes(ctx);

  // I can access amplify category apis with no problem
  const userAttributes = await runWithAmplifyServerContext({
    nextServerContext: { request: ctx.req, response: ctx.res },
    operation: (contextSpec) => fetchUserAttributes(contextSpec),
  });

  // This one is failing
  const user = await runWithAmplifyServerContext({
    nextServerContext: { request: ctx.req, response: ctx.res },
    operation: async (contextSpec) =>
      get({
        apiName: APINames.PlatformCoreRestApi,
        path: '/people/me',
        options: {
          headers: {
            Authorization: `Bearer ${contextSpec.token.value.toString()}`,
          },
        },
      }),
  });

  return {
    props: {
      ...(await serverSideTranslations(locale, ['settings', 'onboarding'])),
      scopes,
      currentUserAttributes: userAttributes,
    },
  };
};

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

[chrisbonifacio]

Hi @didemkkaslan thanks for raising this issue!

In aws-amplify v6, you can import a server-side method for the REST API operations.

For instance, you can refactor your code a bit to something like this:

import { get } from "aws-amplify/api/server";

 const user = await runWithAmplifyServerContext({
    nextServerContext: { request: ctx.req, response: ctx.res },
    operation: async (contextSpec) =>
      get(contextSpec, {
        apiName: APINames.PlatformCoreRestApi,
        path: '/people/me',
        options: {
          headers: {
            Authorization: `Bearer ${contextSpec.token.value.toString()}`,
          },
        },
      }),
  });

Can you try this and see if it resolves the issue?

[HuiSF]

In addition to the above example, the token property of the contextSpec object that's passed by runWithAmplifyServerContext function, is not an auth token.

[didemkkaslan]

Hello @chrisbonifacio thanks for the help but I think get only accepts 1 paramater its not really accepting the contextSpec

I've tried below approach also with no luck it returns 401 Unauthorized

  const user = await runWithAmplifyServerContext({
    nextServerContext: { request: ctx.req, response: ctx.res },
    operation: async (contextSpec) =>
      get({
        apiName: APINames.PlatformCoreRestApi,
        path: '/people/me',
        options: {
          headers: {
            Authorization: `Bearer ${contextSpec.token.value.toString()}`,
          },
        },
      }),
  });

What worked for me is this one( tho i really dont think its the easiest way):

 const user = await runWithAmplifyServerContext({
    nextServerContext: { request: ctx.req, response: ctx.res },
    operation: async (contextSpec) => {
      const session = await fetchAuthSession(contextSpec);
      const token = session.tokens?.idToken?.toString();
      const response = await get({
        apiName: APINames.PlatformCoreRestApi,
        path: '/people/me',
        options: {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        },
      });
      return (await response.response).body.json() as unknown as PeopleData;
    },
  });

[chrisbonifacio]

@didemkkaslan awesome! Yes, fetchAuthSession would be the recommended way to get the user's cognito tokens.

Thanks @HuiSF for the clarification!

[HuiSF]

Hi @didemkkaslan This documentation states that all APIs that are supported to be used on the server side, are exported from the /server subpath.

In your use case you should use the get API export from aws-amplify/api/server.

Also, please avoid directly using @aws-amplify namespaced packages. aws-amplify is the entry point you should interact with.