amplify-js: Datastore does not save on Next JS API Route

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

DataStore

Amplify Categories

auth

Environment information

 System:
    OS: macOS 11.2.3
    CPU: (8) x64 Apple M1
    Memory: 27.85 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.15.2 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.9 - /usr/local/bin/npm
  Browsers:
    Chrome: 91.0.4472.101
    Firefox: 89.0
    Firefox Developer Edition: 90.0
    Safari: 14.0.3
  npmPackages:
    @ampproject/toolbox-optimizer:  undefined ()
    @aws-amplify/ui-react: ^1.0.3 => 1.2.0
    @babel/core:  undefined ()
    @cypress/code-coverage: ^3.9.2 => 3.9.5
    @date-io/luxon: 1.x => 1.3.13
    @datepicker-react/hooks: ^2.8.0 => 2.8.0
    @iconscout/react-unicons: ^1.1.6 => 1.1.6
    @iconscout/unicons: ^3.0.6 => 3.0.6
    @istanbuljs/nyc-config-typescript: ^1.0.1 => 1.0.1
    @material-ui/core: ^4.11.3 => 4.11.4
    @material-ui/lab: ^4.0.0-alpha.57 => 4.0.0-alpha.58
    @material-ui/pickers: ^3.3.10 => 3.3.10
    @react-native-async-storage/async-storage: ^1.13.0 => 1.15.4
    @svgr/cli: ^5.5.0 => 5.5.0
    @testing-library/cypress: ^7.0.3 => 7.0.6
    @testing-library/jest-dom: ^5.11.9 => 5.12.0
    @testing-library/react: ^11.2.3 => 11.2.7
    @types/cors: ^2.8.10 => 2.8.10
    @types/graphql: ^14.5.0 => 14.5.0
    @types/jest: ^26.0.20 => 26.0.23
    @types/luxon: ^1.25.1 => 1.26.5
    @types/node: ^14.14.25 => 14.17.0 (15.3.1, 12.12.50)
    @types/react: ^17.0.4 => 17.0.6 (16.14.6)
    @types/react-beautiful-dnd: ^13.0.0 => 13.0.0
    @types/react-csv: ^1.1.1 => 1.1.1
    @types/react-dom: ^16.9.4 => 16.9.13 (17.0.5)
    @types/react-hooks-helper: ^1.6.3 => 1.6.3
    @types/react-select: ^4.0.14 => 4.0.15
    @types/styled-components: ^5.1.9 => 5.1.9
    @types/uuid: ^8.3.0 => 8.3.0
    amphtml-validator:  undefined ()
    arg:  undefined ()
    async-retry:  undefined ()
    async-sema:  undefined ()
    autoprefixer: ^10.2.1 => 10.2.5
    aws-amplify: ^4.0.1 => 4.0.2
    aws-amplify-react: ^4.2.31 => 4.2.35
    babel-plugin-istanbul: ^6.0.0 => 6.0.0
    babel-plugin-macros: ^3.0.1 => 3.1.0 (2.8.0)
    babel-plugin-styled-components: ^1.12.0 => 1.12.0
    bfj:  undefined ()
    cacache:  undefined ()
    cache-loader:  undefined ()
    ci-info:  undefined ()
    comment-json:  undefined ()
    compression:  undefined ()
    conf:  undefined ()
    content-type:  undefined ()
    cookie:  undefined ()
    cors: ^2.8.5 => 2.8.5
    css-loader:  undefined ()
    ctix: ^0.3.1 => 0.3.1
    cypress: ^6.2.1 => 6.9.1
    debug:  undefined ()
    devalue:  undefined ()
    dotenv: ^8.2.0 => 8.6.0
    escape-string-regexp:  undefined ()
    file-loader:  undefined ()
    find-cache-dir:  undefined ()
    find-up:  undefined ()
    formik: ^2.2.6 => 2.2.7
    framer-motion: ^4.1.17 => 4.1.17
    fresh:  undefined ()
    graphql-tag: ^2.11.0 => 2.12.4
    gzip-size:  undefined ()
    http-proxy:  undefined ()
    ignore-loader:  undefined ()
    immer: ^8.0.1 => 8.0.4 (8.0.1)
    immutable: ^4.0.0-rc.12 => 4.0.0-rc.12
    is-animated:  undefined ()
    is-docker:  undefined ()
    is-wsl:  undefined ()
    jest: ^26.6.3 => 26.6.3
    json5:  undefined ()
    jsonwebtoken:  undefined ()
    libphonenumber-js: ^1.9.11 => 1.9.17
    libphonenumber-js-core:  1.0.0
    libphonenumber-js-max:  1.0.0
    libphonenumber-js-min:  1.0.0
    libphonenumber-js-mobile:  1.0.0
    loader-utils:  undefined ()
    lodash.curry:  undefined ()
    lru-cache:  undefined ()
    luxon: ^1.26.0 => 1.27.0
    nanoid:  undefined ()
    neo-async:  undefined ()
    next: 10.2.0 => 10.2.0
    nyc: ^15.1.0 => 15.1.0
    ora:  undefined ()
    postcss: ^8.2.8 => 8.2.15 (8.2.13, 6.0.23)
    postcss-flexbugs-fixes:  undefined ()
    postcss-loader:  undefined ()
    postcss-preset-env:  undefined ()
    postcss-scss:  undefined ()
    react: ^16.12.0 => 16.14.0
    react-beautiful-dnd: ^13.1.0 => 13.1.0
    react-csv: ^2.0.3 => 2.0.3
    react-dom: ^16.12.0 => 16.14.0
    react-feather: ^2.0.9 => 2.0.9
    react-hooks-helper: ^1.6.0 => 1.6.0
    react-is: ^17.0.2 => 17.0.2 (16.13.1)
    react-multistep: ^5.1.0 => 5.1.0
    react-scrollspy: ^3.4.3 => 3.4.3
    react-select: ^4.3.0 => 4.3.1
    recast:  undefined ()
    recoil: ^0.1.2 => 0.1.3
    recoil-persist: ^2.3.0 => 2.5.0
    recoil-undo: ^0.0.7 => 0.0.7
    resolve-url-loader:  undefined ()
    sass-loader:  undefined ()
    schema-utils:  undefined ()
    semver:  undefined ()
    send:  undefined ()
    source-map:  undefined ()
    source-map-support: ^0.5.19 => 0.5.19
    start-server-and-test: ^1.11.7 => 1.12.2
    string-hash:  undefined ()
    strip-ansi:  undefined ()
    styled-components: ^5.2.3 => 5.3.0
    styled-components/macro:  undefined ()
    styled-components/native:  undefined ()
    styled-components/primitives:  undefined ()
    swr: ^0.4.2 => 0.4.2
    tailwindcss: ^2.1.2 => 2.1.2
    terser:  undefined ()
    text-table:  undefined ()
    thread-loader:  undefined ()
    ts-node: ^9.1.1 => 9.1.1
    twin.macro: ^2.4.1 => 2.4.1
    typescript: 4.0 => 4.0.7
    unistore:  undefined ()
    use-immer: ^0.4.2 => 0.4.2
    uuid: ^8.3.2 => 8.3.2 (3.4.0, 3.3.2)
    web-vitals:  undefined ()
    webpack:  undefined ()
    webpack-sources:  undefined ()
    window-mock: ^0.1.0 => 0.1.0
    yarn-run-all: ^3.1.1 => 3.1.1
    yup: ^0.32.8 => 0.32.9

Describe the bug

When using a NextJS API route. DataStore does not save data because the user is not authenticated there is a warning that looks like this.

ARN] 46:16.232 DataStore - User is unauthorized to query syncReviews with auth mode AMAZON_COGNITO_USER_POOLS. No data could be returned.

However, I am able to run Auth.currentAuthenticatedUser() and get a result.

Expected behavior

DataStore should be able to save data to an auth-protected model in a NextJS API route.

Reproduction steps

setup nextjs and amplify
try to save a model in an API route.

Code Snippet

async function handler(req: NextApiRequest, res: NextApiResponse) {
    const review = new Review({ ...req.body.review })

    const { DataStore } = withSSRContext({ req })

    const result = await DataStore.save(review)

   res.json({ result })

)

Log output

ARN] 46:16.232 DataStore - User is unauthorized to query syncReviews with auth mode AMAZON_COGNITO_USER_POOLS. No data could be returned.

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

Iphone8

Mobile Operating System

iOS8.1

Mobile Browser

Safari

Mobile Browser Version

Additional information and screenshots

No response

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 23 (13 by maintainers)

Commits related to this issue

Removed DataStore usage at api-route due to https://github.com/aws-amplify/amplify-js/issues/8454 — committed to ikendoit/many-windows by ikendoit 2 years ago

Most upvoted comments

@chrisbonifacio actually, ideally I would like to invoke this DataStore call from another origin. Trying to give an API option to import data into my app. I’m trying to import a large amount of data so calling datastore on the client-side isn’t performant enough.

If we don’t figure this out quickly I will likely migrate to using the Graphql API rather than Datastore.

Thanks for your help.

theAndrewCline on Jun 17, 2021

There might be gaps in my knowledge on using DataStore in an SSR context but I labeled this as a bug for the team to look into further since I was able to reproduce the issue consistently.

chrisbonifacio on Jun 17, 2021

Just a fetch

fetch('/review/create', { method: 'POST', credentidials: 'include', body: new_review })

theAndrewCline on Jun 16, 2021

Here is an example.

some of my models also have { allow: public, provider: IAM }

type Review
  @model
  @auth(rules: [{ allow: private }])
  @key(name: "byAuthor", fields: ["author_id"])
  @key(name: "byMeal", fields: ["meal_id"]) {
  id: ID!
  content: [String]
  additional_content: String
  author_id: ID
  meal_id: ID
  author: Student @connection(fields: ["author_id"])
  meal: Meal @connection(fields: ["meal_id"])
  rating: Rating
}

theAndrewCline on Jun 16, 2021