Next.js and AWS Amplify "No current user" at getServerSideProps - REST, not GraphQL

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, REST API

Amplify Categories

auth, api

Environment information

  System:
    OS: macOS 12.5
    CPU: (10) arm64 Apple M1 Max
    Memory: 7.33 GB / 64.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.16.0 - ~/.volta/tools/image/node/16.16.0/bin/node
    Yarn: 1.22.19 - ~/.volta/bin/yarn
    npm: 8.11.0 - ~/.volta/tools/image/node/16.16.0/bin/npm
  Browsers:
    Chrome: 104.0.5112.101
    Safari: 15.6
  npmPackages:
    @ampproject/toolbox-optimizer:  undefined ()
    @aws-amplify/ui-react: ^3.4.1 => 3.4.1
    @aws-amplify/ui-react-internal:  undefined ()
    @aws-amplify/ui-react-legacy:  undefined ()
    @babel/core:  undefined ()
    @babel/runtime:  7.15.4
    @edge-runtime/primitives:  1.1.0-beta.26
    @hapi/accept:  undefined ()
    @headlessui/react: ^1.6.6 => 1.6.6
    @heroicons/react: ^1.0.6 => 1.0.6
    @napi-rs/triples:  undefined ()
    @next/react-dev-overlay:  undefined ()
    @segment/ajv-human-errors:  undefined ()
    @tailwindcss/forms: ^0.5.2 => 0.5.2
    @vercel/nft:  undefined ()
    acorn:  undefined ()
    amphtml-validator:  undefined ()
    arg:  undefined ()
    assert:  undefined ()
    async-retry:  undefined ()
    async-sema:  undefined ()
    autoprefixer: ^10.4.8 => 10.4.8
    aws-amplify: ^4.3.33 => 4.3.33
    babel-packages:  undefined ()
    babel-plugin-inline-react-svg: ^2.0.1 => 2.0.1
    browserify-zlib:  undefined ()
    browserslist:  undefined ()
    buffer:  undefined ()
    bytes:  undefined ()
    chalk:  undefined ()
    ci-info:  undefined ()
    cli-select:  undefined ()
    comment-json:  undefined ()
    compression:  undefined ()
    conf:  undefined ()
    constants-browserify:  undefined ()
    content-disposition:  undefined ()
    content-type:  undefined ()
    cookie:  undefined ()
    cross-spawn:  undefined ()
    crypto-browserify:  undefined ()
    cssnano-simple:  undefined ()
    debug:  undefined ()
    devalue:  undefined ()
    domain-browser:  undefined ()
    edge-runtime:  undefined ()
    eslint: 8.22.0 => 8.22.0
    eslint-config-next: 12.2.5 => 12.2.5
    events:  undefined ()
    find-cache-dir:  undefined ()
    find-up:  undefined ()
    fresh:  undefined ()
    get-orientation:  undefined ()
    glob:  undefined ()
    gzip-size:  undefined ()
    http-proxy:  undefined ()
    https-browserify:  undefined ()
    icss-utils:  undefined ()
    ignore-loader:  undefined ()
    image-size:  undefined ()
    is-animated:  undefined ()
    is-docker:  undefined ()
    is-wsl:  undefined ()
    jest-worker:  undefined ()
    json5:  undefined ()
    jsonwebtoken:  undefined ()
    loader-utils:  undefined ()
    lodash.curry:  undefined ()
    lru-cache:  undefined ()
    micromatch:  undefined ()
    mini-css-extract-plugin:  undefined ()
    nanoid:  undefined ()
    native-url:  undefined ()
    neo-async:  undefined ()
    next: 12.2.5 => 12.2.5
    node-fetch:  undefined ()
    node-html-parser:  undefined ()
    ora:  undefined ()
    os-browserify:  undefined ()
    p-limit:  undefined ()
    path-browserify:  undefined ()
    postcss: ^8.4.16 => 8.4.16 (8.4.14)
    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.2.0 => 18.2.0 (18.0.0)
    react-dom: 18.2.0 => 18.2.0
    react-is:  17.0.2
    react-refresh:  0.12.0
    react-server-dom-webpack:  undefined ()
    regenerator-runtime:  0.13.4
    sass-loader:  undefined ()
    schema-utils:  undefined ()
    semver:  undefined ()
    send:  undefined ()
    setimmediate:  undefined ()
    source-map:  undefined ()
    stream-browserify:  undefined ()
    stream-http:  undefined ()
    string-hash:  undefined ()
    string_decoder:  undefined ()
    strip-ansi:  undefined ()
    tailwindcss: ^3.1.8 => 3.1.8
    tar:  undefined ()
    terser:  undefined ()
    text-table:  undefined ()
    timers-browserify:  undefined ()
    tty-browserify:  undefined ()
    ua-parser-js:  undefined ()
    unistore:  undefined ()
    util:  undefined ()
    vm-browserify:  undefined ()
    watchpack:  undefined ()
    web-vitals:  undefined ()
    webpack:  undefined ()
    webpack-sources:  undefined ()
    ws:  undefined ()
  npmGlobalPackages:
    corepack: 0.10.0
    npm: 8.11.0

Describe the bug

I’m trying to use getServerSideProps + SSR.API.get (REST, not GraphQL) and I’m getting “No current user”. If I move the code to useEffect, it works fine.

export async function getServerSideProps({req}) {
  const { Auth, API } = withSSRContext({req});
 
  try {
    const apiName = "API";
    const path = `/user/self`;

    // throws No current user
    user = await API.get(apiName, path);

    return { props: { user } }    
  } catch (e) {
    console.error(e);
    throw e
  }
}

The API Authorization is configured (it works with useEffect), and I also have SSR enabled ssr: true.

  // configuration
  API: {
    endpoints: [
      {
       /* ... */
        custom_header: async () => {
          return {
            Authorization: `Bearer ${(await Auth.currentSession())
              .getIdToken()
              .getJwtToken()}`,
          };
        },
      },
    ],
  },
  ssr: true,

I tried to re-set the Authorization, although SSR.Auth.currentSession() works fine. I could get a token, but I’m still getting “No current user”.

export const getServerSideProps = async ({ req }) => {
  const SSR = withSSRContext({ req });

    const options = {
      headers: {
        Authorization: `Bearer ${(await SSR.Auth.currentSession())
          .getIdToken()
          .getJwtToken()}`,
      },
    };

    const user = await SSR.API.get("API", "users/self", options); // throws No current user

Could it be my version of next: 12.2.5?

I found a similar issue on StackOverflow but no answers in there.

Expected behavior

Be able to make authorized requests from getServerSideProps.

Reproduction steps

1. Use REST API instead of GraphQL
2. Try to make an authorized call from getServerSideProps

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

[tannerabread]

Hi 👋 Closing this as resolved. If you are still experiencing this issue and in need of assistance, please feel free to comment and provide us with additional information so we can re-open this issue and be better able to assist you.

Thank you!

[tannerabread]

Hi 👋 @phstc!

I have reproduced this on the server with a manual configuration of some old cognito and API resources, but the problem does not happen if new resources are created from the Amplify CLI.

It also does not work for me by calling it in useEffect but I was able to obtain the resources from getServerSideProps with fetch.

I have a few follow up questions so that we can figure out the root cause:

1. Which type of Auth do you have set up for this project? API Key or Cognito?
2. If it is API key, what is the expiration on the API key? Is it expired?