aws-amplify / amplify-cli

The AWS Amplify CLI is a toolchain for simplifying serverless web and mobile development.
Apache License 2.0
2.82k stars 821 forks source link

Cannot use Api-key auth for Api Gateway after upgrading to 7.X.X #9477

Closed iOrcohen closed 2 years ago

iOrcohen commented 2 years ago

Before opening, please confirm:

JavaScript Framework

React

Amplify APIs

REST API

Amplify Categories

auth, api

Environment information

``` System: OS: macOS 11.6.2 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Memory: 115.76 MB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 16.6.0 - ~/.nvm/versions/node/v16.6.0/bin/node npm: 8.1.4 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman Browsers: Chrome: 96.0.4664.110 Safari: 15.2 npmPackages: @babel/plugin-transform-runtime: ^7.15.0 => 7.15.8 (7.12.1) @babel/preset-env: ^7.15.4 => 7.15.8 (7.12.1) @datadog/browser-logs: ^3.2.0 => 3.6.11 @date-io/date-fns: ^1.3.13 => 1.3.13 @date-io/moment: ^2.11.0 => 2.11.0 @grin-rnd/grin-api-sdk: ^1.2.4 => 1.2.4 @material-ui/core: ^4.12.3 => 4.12.3 @material-ui/icons: ^4.11.2 => 4.11.2 @material-ui/lab: ^4.0.0-alpha.60 => 4.0.0-alpha.60 @material-ui/pickers: ^3.3.10 => 3.3.10 @material-ui/styles: ^4.11.4 => 4.11.4 @react-hook/hover: ^4.0.0 => 4.0.0 @stripe/react-stripe-js: ^1.4.1 => 1.6.0 @stripe/stripe-js: ^1.17.1 => 1.19.1 @types/jest: ^27.0.1 => 27.0.2 aws-amplify: ^4.2.7 => 4.3.2 aws-amplify-react: ^5.0.13 => 5.1.3 aws-sdk: ^2.983.0 => 2.1004.0 axios: ^0.21.3 => 0.21.4 babel-jest: ^26.6.0 => 26.6.3 classnames: ^2.3.1 => 2.3.1 connected-react-router: ^6.9.1 => 6.9.1 customize-cra: ^1.0.0 => 1.0.0 customize-cra-react-refresh: ^1.1.0 => 1.1.0 date-fns: ^2.23.0 => 2.25.0 detect-browser: ^5.2.1 => 5.2.1 emoji-picker-react: ^3.4.8 => 3.4.8 eslint-config-prettier: ^8.3.0 => 8.3.0 eslint-plugin-prettier: ^4.0.0 => 4.0.0 file-extension: ^4.0.5 => 4.0.5 file-saver: ^2.0.5 => 2.0.5 history: ^4.10.1 => 4.10.1 husky: ^7.0.2 => 7.0.2 i18next: ^20.6.0 => 20.6.1 i18next-browser-languagedetector: ^6.1.2 => 6.1.2 i18next-http-backend: ^1.3.0 => 1.3.1 jest: 26.6.0 => 26.6.0 jszip: ^3.7.1 => 3.7.1 jwt-decode: ^3.1.2 => 3.1.2 keymirror: ^0.1.1 => 0.1.1 lint-staged: ^11.1.2 => 11.2.3 lodash: ^4.17.21 => 4.17.21 lottie-web: ^5.8.1 => 5.8.1 mixpanel-browser: ^2.41.0 => 2.41.0 moment: ^2.29.1 => 2.29.1 moment-timezone: ^0.5.33 => 0.5.33 mui-datatables: ^3.7.8 => 3.7.8 prettier: ^2.3.2 => 2.4.1 qrcode.react: ^1.0.1 => 1.0.1 (0.8.0) query-string: ^7.0.1 => 7.0.1 (4.3.4) ramda: ^0.27.1 => 0.27.1 react: ^17.0.2 => 17.0.2 (16.14.0, 16.8.6) react-app-rewired: ^2.1.8 => 2.1.8 react-color: ^2.19.3 => 2.19.3 react-detect-click-outside: ^1.1.1 => 1.1.1 react-device-detect: ^1.17.0 => 1.17.0 react-dom: ^17.0.2 => 17.0.2 (16.14.0, 16.8.6) react-dropzone: ^11.3.4 => 11.4.2 react-google-recaptcha: ^2.1.0 => 2.1.0 react-gtm-module: ^2.0.11 => 2.0.11 react-i18next: ^11.11.4 => 11.12.0 react-image-crop: ^9.0.3 => 9.0.4 react-infinite-scroll-component: ^6.1.0 => 6.1.0 react-payment-icons: ^1.2.6 => 1.2.6 react-payment-inputs: ^1.1.8 => 1.1.8 react-payment-inputs/images: undefined () react-payment-inputs/images/amex: undefined () react-payment-inputs/images/dinersclub: undefined () react-payment-inputs/images/discover: undefined () react-payment-inputs/images/hipercard: undefined () react-payment-inputs/images/jcb: undefined () react-payment-inputs/images/mastercard: undefined () react-payment-inputs/images/placeholder: undefined () react-payment-inputs/images/unionpay: undefined () react-payment-inputs/images/visa: undefined () react-phone-input-2: ^2.14.0 => 2.14.0 react-redux: ^7.2.5 => 7.2.5 react-resize-detector: ^6.7.6 => 6.7.6 react-router: ^5.2.1 => 5.2.1 react-router-dom: ^5.3.0 => 5.3.0 react-scripts: 4.0.3 => 4.0.3 react-scroll: ^1.8.4 => 1.8.4 react-spring: ^9.2.4 => 9.3.0 react-virtualized-auto-sizer: ^1.0.6 => 1.0.6 react-window: ^1.8.6 => 1.8.6 redux: ^4.1.1 => 4.1.1 (3.7.2) redux-devtools-extension: ^2.13.9 => 2.13.9 redux-observable: ^2.0.0 => 2.0.0 reselect: ^4.0.0 => 4.0.0 rxjs: ^7.3.0 => 7.4.0 (6.6.7) rxjs/ajax: undefined () rxjs/fetch: undefined () rxjs/internal-compatibility: undefined () rxjs/operators: undefined () rxjs/testing: undefined () rxjs/webSocket: undefined () styled-components: ^5.3.1 => 5.3.1 styled-components/macro: undefined () styled-components/native: undefined () styled-components/primitives: undefined () use-debounce: ^7.0.0 => 7.0.0 uuid: ^8.3.2 => 8.3.2 (3.3.2, 3.4.0) npmGlobalPackages: @aws-amplify/cli: 7.6.5 create-react-native-app: 3.7.2 expo-cli: 5.0.1 ```

Describe the bug

After upgrading to Amplify version 7 or later, we cannot use api-key auth in our Api Gateway.

Before the update we used to edit the cloudformation-template.json to set the authorization type of two of our endpoints to use apiKey.

After the update the cloudformation-template.json is not editable anymore, and everything rely on the cli-inputs.json file which is generating the cloudformation during a push.

Now, even if we will set the apiKey in the console, every time we will do a change in the api it will override it and will break our app.

Expected behavior

Being able to set api key auth in the cli-inputs.json of the Api Gateway.

Reproduction steps

  1. Upgrade amplify cli to 7 or later version.
  2. Try to add api-key auth to an endpoint through the code.

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 commented 2 years ago

Hi @iOrcohen 👋 thank you for raising this issue. It seems this has to do with the Amplify CLI rather than the Amplify JS library so I will transfer this over to that repo for better support.

johnpc commented 2 years ago

I don't understand - can you provide more detailed reproduction steps?

This is what I tried:

npx create-react-app test-app
cd test-app
amplify init # choose defaults
amplify add api # choose defaults
amplify push

The result is an api endpoint that results in an api using apiKey auth

cjihrig commented 2 years ago

Closing due to a lack of followup, but we can revisit this issue if needed.