amplify-js: 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

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 26 (10 by maintainers)

Most upvoted comments

@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"😏 👍

chris-lee-code on Aug 19, 2021

@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.

chrisbonifacio on Aug 18, 2021

@chrisbonifacio It happens both before and after logging in. Since I configured the auth mode as API Key, not Cognito User Pool, I don’t think signing in really makes changes.

I just sent you the aws-exports file to the email. Please take a look!

chris-lee-code on Aug 18, 2021

@chrisbonifacio Thanks! I think this is literally what the “WOW customer experience” means.

However, unfortunately, that didn’t fix the error on my side. Looking at your console having a different example program, I believe you created your own Amplify backend so that you can make it on your own. The only possibility now I can think of is there is something wrong with the Amplify backend (since you used the identical code).

스크린샷 2021-08-18 오전 8 49 23

Are there any ways I can invite you to my real Amplify project so that you can check if there is anything wrong with the configuration??

chris-lee-code on Aug 18, 2021

@chrisbonifacio Thank you for letting me know!

Alright. So I just invited you to my repo as a collaborator. Please take a look at the “beta” branch.

npm run dev
Surf to localhost:3000/program. The code can be found in pages/program/index.js
Then in the getServerSideProps, you will be able to find the code below that I intentionally split into two parts just to let you know how they work differently.

    console.log("Getting programs...");
    const dataStoreProgramsQuery = await DataStore.query(Program);
    console.log(
      "Results from getting DataStore programs: ",
      dataStoreProgramsQuery
    );
    const programsQuery = await API.graphql({ query: queries.listPrograms });
    console.log("API Program: ", programsQuery.data.listPrograms.items);

Please let me know what other information you would need to address this issue!

chris-lee-code on Aug 17, 2021