User is unauthorized to query sync**** with auth mode API_KEY. No data could be returned.

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

React

Amplify APIs

DataStore

Amplify Categories

auth

Environment information

# Put output below this line
System:
    OS: macOS 11.5.1
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Memory: 2.38 GB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.2.0 - /usr/local/bin/node
    Yarn: 1.22.11 - ~/Documents/******/node_modules/.bin/yarn
    npm: 7.15.0 - ~/node_modules/.bin/npm
  Browsers:
    Chrome: 92.0.4515.131
    Safari: 14.1.2
  npmPackages:
    @ampproject/toolbox-optimizer:  undefined ()
    @atlaskit/spinner: ^15.0.11 => 15.0.11 
    @atlaskit/spinner/constants:  undefined ()
    @atlaskit/spinner/spinner:  undefined ()
    @atlaskit/spinner/types:  undefined ()
    @aws-amplify/cli: ^5.3.0 => 5.3.0 
    @aws-amplify/ui-react: ^1.2.8 => 1.2.8 
    @babel/core:  undefined ()
    @fortawesome/fontawesome-svg-core: ^1.2.36 => 1.2.36 
    @fortawesome/free-brands-svg-icons: ^5.15.4 => 5.15.4 
    @fortawesome/free-solid-svg-icons: ^5.15.4 => 5.15.4 
    @fortawesome/react-fontawesome: ^0.1.15 => 0.1.15 
    @fullcalendar/common: ^5.9.0 => 5.9.0 
    @fullcalendar/core: 5.9.0 => 5.9.0 
    @fullcalendar/daygrid: ^5.9.0 => 5.9.0 
    @fullcalendar/interaction: 5.9.0 => 5.9.0 
    @fullcalendar/react: ^5.9.0 => 5.9.0 
    @next/bundle-analyzer: ^11.0.1 => 11.0.1 
    @types/googlemaps: 3.39.13 => 3.39.13 
    @types/markerclustererplus: 2.1.33 => 2.1.33 
    @types/react: 17.0.16 => 17.0.16 
    @zeit/next-css: 1.0.1 => 1.0.1 
    @zeit/next-sass: 1.0.1 => 1.0.1 
    amazon-cognito-identity-js: ^5.0.6 => 5.0.6 (4.6.3)
    amphtml-validator:  undefined ()
    arg:  undefined ()
    async-retry:  undefined ()
    async-sema:  undefined ()
    aws-amplify: ^4.2.2 => 4.2.2 
    aws-amplify-react: ^5.0.8 => 5.0.8 
    bfj:  undefined ()
    cacache:  undefined ()
    chart.js: 3.5.0 => 3.5.0 
    chart.js-auto:  undefined ()
    chart.js-helpers:  undefined ()
    check-password-strength: ^2.0.3 => 2.0.3 
    ci-info:  undefined ()
    classnames: 2.3.1 => 2.3.1 (2.2.6)
    comment-json:  undefined ()
    compression:  undefined ()
    compression-webpack-plugin: ^8.0.1 => 8.0.1 
    conf:  undefined ()
    content-type:  undefined ()
    cookie:  undefined ()
    cross-env: ^7.0.3 => 7.0.3 
    crypto-browserify: ^3.12.0 => 3.12.0 
    css-loader:  undefined ()
    debug:  undefined ()
    devalue:  undefined ()
    dropzone: 5.9.2 => 5.9.2 
    email-validator: ^2.0.4 => 2.0.4 
    escape-string-regexp:  undefined ()
    file-loader:  undefined ()
    find-cache-dir:  undefined ()
    find-up:  undefined ()
    formik: ^2.2.9 => 2.2.9 
    formsy-react: ^2.2.5 => 2.2.5 
    fresh:  undefined ()
    fullcalendar: ^5.9.0 => 5.9.0 
    gzip-size:  undefined ()
    http-proxy:  undefined ()
    ignore-loader:  undefined ()
    is-animated:  undefined ()
    is-docker:  undefined ()
    is-wsl:  undefined ()
    json-parse-better-errors: ^1.0.2 => 1.0.2 
    json5:  undefined ()
    jsonwebtoken:  undefined ()
    loader-utils:  undefined ()
    lodash.curry:  undefined ()
    log-symbols: ^5.0.0 => 5.0.0 (2.2.0, 3.0.0)
    lru-cache:  undefined ()
    mini-css-extract-plugin:  undefined ()
    moment: 2.29.1 => 2.29.1 
    nanoid:  undefined ()
    neo-async:  undefined ()
    new-plugin-package:  1.0.0 
    next: ^11.0.1 => 11.0.1 
    next-compose-plugins: 2.2.1 => 2.2.1 
    next-fonts: 1.5.1 => 1.5.1 
    next-images: 1.8.1 => 1.8.1 
    next-transpile-modules: ^8.0.0 => 8.0.0 
    nouislider: 15.3.0 => 15.3.0 
    ora:  undefined ()
    password-validator: ^5.1.1 => 5.1.1 
    path: 0.12.7 => 0.12.7 
    postcss: ^8.3.6 => 8.3.6 (6.0.23, 8.2.13, 7.0.35)
    postcss-flexbugs-fixes:  undefined ()
    postcss-loader:  undefined ()
    postcss-preset-env:  undefined ()
    postcss-scss:  undefined ()
    pretty-checkbox: ^3.0.3 => 3.0.3 
    prop-types: 15.7.2 => 15.7.2 
    rc-checkbox: ^2.3.2 => 2.3.2 
    react: ^17.0.2 => 17.0.2 (17.0.1)
    react-anchor-link-smooth-scroll: ^1.0.12 => 1.0.12 
    react-bootstrap-sweetalert: 5.2.0 => 5.2.0 
    react-bootstrap-table-next: 4.0.3 => 4.0.3 
    react-bootstrap-table2-paginator: 2.1.2 => 2.1.2 
    react-bootstrap-table2-toolkit: 2.1.3 => 2.1.3 
    react-chartjs-2: 3.0.4 => 3.0.4 
    react-checkmark: ^1.4.0 => 1.4.0 
    react-copy-to-clipboard: 5.0.3 => 5.0.3 
    react-datetime: 3.0.4 => 3.0.4 
    react-dom: ^17.0.2 => 17.0.2 
    react-google-maps: 9.4.5 => 9.4.5 
    react-jvectormap: 0.0.16 => 0.0.16 
    react-light-accordion: ^0.1.4 => 0.1.4 
    react-loading-skeleton: ^2.2.0 => 2.2.0 
    react-notification-alert: 0.0.13 => 0.0.13 
    react-perfect-scrollbar: 1.5.8 => 1.5.8 
    react-player: ^2.9.0 => 2.9.0 
    react-quill: 1.3.5 => 1.3.5 
    react-select2-wrapper: 1.0.4-beta6 => 1.0.4-beta6 
    react-tagsinput: 3.19.0 => 3.19.0 
    react-to-print: 2.13.0 => 2.13.0 
    react-toastify: ^7.0.4 => 7.0.4 
    reactstrap: 8.9.0 => 8.9.0 
    recast:  undefined ()
    resolve-url-loader:  undefined ()
    rxjs: ^7.3.0 => 7.3.0 (6.6.7)
    rxjs/ajax:  undefined ()
    rxjs/fetch:  undefined ()
    rxjs/internal-compatibility:  undefined ()
    rxjs/operators:  undefined ()
    rxjs/testing:  undefined ()
    rxjs/webSocket:  undefined ()
    sass: ^1.37.5 => 1.37.5 
    sass-loader:  undefined ()
    schema-utils:  undefined ()
    semver:  undefined ()
    send:  undefined ()
    slugify: ^1.6.0 => 1.6.0 
    source-map:  undefined ()
    stream: ^0.0.2 => 0.0.2 
    string-hash:  undefined ()
    strip-ansi:  undefined ()
    styled-components: ^5.3.0 => 5.3.0 (3.4.10)
    styled-components/macro:  undefined ()
    styled-components/native:  undefined ()
    styled-components/no-parser:  undefined ()
    styled-components/primitives:  undefined ()
    terser:  undefined ()
    text-table:  undefined ()
    unistore:  undefined ()
    web-vitals:  undefined ()
    webpack: ^5.50.0 => 5.50.0 ()
    webpack-bundle-analyzer: ^4.4.2 => 4.4.2 (4.3.0)
    webpack-sources:  undefined ()
    yarn: ^1.22.11 => 1.22.11 
    yup: ^0.32.9 => 0.32.9 
  npmGlobalPackages:
    @aws-amplify/cli: 5.3.0
    @nestjs/cli: 7.5.6
    babel-cli: 6.26.0
    codesandbox: 2.2.1
    create-react-app: 3.4.1
    cross-env: 7.0.3
    expo-cli: 3.17.16
    next: 10.0.6
    nodemon: 2.0.4
    npm-check-updates: 11.8.3
    npm: 7.20.3
    npx: 10.2.2
    prisma: 1.34.10
    prisma1: 1.34.11
    react-dom: 17.0.1
    react: 17.0.1
    yarn: 1.22.10

Describe the bug

After I updated the Amplify packages, I just couldn’t query any data using DataStore. Even though I’m working on the API Key method to enable any public access through this build, I just couldn’t query any data on any pages.

Importantly, I am using NextJS

Using getServerSideProps is not the cause of the problem, though. Even if I try to call through the client-side, it complains.

The user is even authenticated, and I can get the attributes successfully using the currentAuthenticatedUser.

Here is the warning console logs.

[WARN] 00:57.531 DataStore - Realtime disabled when in a server-side environment
[WARN] 00:57.545 DataStore - User is unauthorized to query syncAdmins with auth mode API_KEY. No data could be returned.
[WARN] 00:57.545 DataStore - User is unauthorized to query syncInstructors with auth mode API_KEY. No data could be returned.
[WARN] 00:57.545 DataStore - User is unauthorized to query syncCourses with auth mode API_KEY. No data could be returned.
[WARN] 00:57.545 DataStore - User is unauthorized to query syncCompanies with auth mode API_KEY. No data could be returned.
[WARN] 00:57.545 DataStore - User is unauthorized to query syncSettings with auth mode API_KEY. No data could be returned.
[WARN] 00:57.545 DataStore - User is unauthorized to query syncCertificates with auth mode API_KEY. No data could be returned.
[WARN] 00:57.552 DataStore - User is unauthorized to query syncNewCourses with auth mode API_KEY. No data could be returned.
[WARN] 00:57.556 DataStore - User is unauthorized to query syncCourseInstructors with auth mode API_KEY. No data could be returned.

Expected behavior

The DataStore should successfully query the requested model.

Reproduction steps

Install the packages as shown above.

Code Snippet

// Put your code below this line.

Log output

// Put your logs below this line
[WARN] 20:26.914 DataStore - User is unauthorized to query syncAdmins with auth mode API_KEY. No data could be returned.
[WARN] 20:26.915 DataStore - User is unauthorized to query syncInstructors with auth mode API_KEY. No data could be returned.
[WARN] 20:26.915 DataStore - User is unauthorized to query syncCourses with auth mode API_KEY. No data could be returned.
[WARN] 20:26.915 DataStore - User is unauthorized to query syncCompanies with auth mode API_KEY. No data could be returned.
[WARN] 20:26.915 DataStore - User is unauthorized to query syncSettings with auth mode API_KEY. No data could be returned.
[WARN] 20:26.915 DataStore - User is unauthorized to query syncCertificates with auth mode API_KEY. No data could be returned.
[WARN] 20:26.918 DataStore - User is unauthorized to query syncNewCourses with auth mode API_KEY. No data could be returned.
[WARN] 20:26.919 DataStore - User is unauthorized to query syncCourseInstructors with auth mode API_KEY. No data could be returned.
[WARN] 20:26.919 DataStore - User is unauthorized to query syncPrograms with auth mode API_KEY. No data could be returned.
[WARN] 20:26.919 DataStore - User is unauthorized to query syncUsers with auth mode API_KEY. No data could be returned.
[WARN] 20:26.921 DataStore - User is unauthorized to query syncProgramInstructors with auth mode API_KEY. No data could be returned.
[WARN] 20:26.921 DataStore - User is unauthorized to query syncEnrolls with auth mode API_KEY. No data could be returned.
[WARN] 20:26.921 DataStore - User is unauthorized to query syncTasks with auth mode API_KEY. No data could be returned.

aws-exports.js

const awsmobile = {
    "aws_project_region": "us-east-2",
    "aws_cognito_identity_pool_id": "us-east-2:f******",
    "aws_cognito_region": "us-east-2",
    "aws_user_pools_id": "us-east-******",
    "aws_user_pools_web_client_id": "******",
    "oauth": {
        "domain": "******-staging.auth.us-east-2.amazoncognito.com",
        "scope": [
            "phone",
            "email",
            "openid",
            "profile",
            "aws.cognito.signin.user.admin"
        ],
        "redirectSignIn": "https://localhost:3000/",
        "redirectSignOut": "https://localhost:3000/",
        "responseType": "code"
    },
    "federationTarget": "COGNITO_USER_POOLS",
    "aws_appsync_graphqlEndpoint": "https://******.appsync-api.us-east-2.amazonaws.com/graphql",
    "aws_appsync_region": "us-east-2",
    "aws_appsync_authenticationType": "API_KEY",
    "aws_appsync_apiKey": "da2-******"
};

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

[chris-lee-code]

@chrisbonifacio Thank you so much for fixing the errors! You saved my life twice so far haha.

I still don’t get why using npm will cause the issue, while yarn will not. At least now I understand the risk of fixing the conflicts with either npm install --force or npm install --legacy-peer-deps. So I assume even the aws-amplify package has some conflicts with its peer dependencies.

I wish this bug report helped both of us fix issues like this from now on for us and other users as well.

Thank you so much for helping out!😆

"WOW customer experience"😏 👍

[chrisbonifacio]

@supersonix77 I was finally able to reproduce the issue. I realized that I was one version of aws-amplify ahead of you on my local branch so I downgraded to 4.2.2 and got the error. However, when I upgraded back to 4.2.3 I was still getting it. I had to delete node_modules and the package-lock.json file and reinstall all the dependencies (stuck with aws-amplify@4.2.3) for the error to go away again.

There must have been incompatible package versions or the dependency tree just got messed up somehow. Also, I noticed that you have the @aws-amplify/cli as a dependency in your project. That should either be a global or dev dependency. But yeah, try deleting node_modules and the package-lock.json file, then maybe use yarn to install your dependencies. I ran into issues trying to install all of them with npm. Got this error in particular.