search

aws-amplify / amplify-js

A declarative JavaScript library for application development using cloud services.
https://docs.amplify.aws/lib/q/platform/js
Apache License 2.0
9.43k stars 2.13k forks source link

Unable to retrieve Cognito credentials in React Native when using Ignite 7.10.10 #9961

Closed myfoostrong closed 1 year ago

myfoostrong commented 2 years ago

Before opening, please confirm:

JavaScript Framework

React Native

Amplify APIs

Authentication, REST API

Amplify Categories

auth, api

Environment information

``` # Put output below this line System: OS: macOS 12.4 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Memory: 77.10 MB / 16.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node Yarn: 1.22.18 - ~/.nvm/versions/node/v16.15.0/bin/yarn npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm Watchman: 2022.05.30.00 - /usr/local/bin/watchman Browsers: Chrome: 102.0.5005.61 Firefox: 100.0.2 Safari: 15.5 npmPackages: @aws-amplify/datastore-storage-adapter: ^1.3.2 => 1.3.2 @babel/core: ^7.12.9 => 7.18.2 @babel/plugin-proposal-decorators: 7.12.1 => 7.12.1 (7.18.2) @babel/plugin-proposal-optional-catch-binding: 7.12.1 => 7.12.1 (7.16.7) @babel/preset-env: ^7.16.11 => 7.18.2 @babel/runtime: ^7.12.5 => 7.18.3 @react-native-async-storage/async-storage: ^1.17.6 => 1.17.6 @react-native-community/cli-platform-ios: ^6.2.0 => 6.2.0 @react-native-community/netinfo: ^8.3.1 => 8.3.1 @react-native-picker/picker: ^2.4.1 => 2.4.1 @react-navigation/native: ~6.0.1 => 6.0.10 @react-navigation/native-stack: ^6.0.2 => 6.6.2 @react-navigation/stack: ~6.0.1 => 6.0.11 @rnx-kit/metro-config: ^1.2.31 => 1.2.32 @rnx-kit/metro-resolver-symlinks: ^0.1.15 => 0.1.20 @storybook/addons: 5.3.21 => 5.3.21 @storybook/react-native: 5.3.25 => 5.3.25 @storybook/react-native-server: 5.3.23 => 5.3.23 @types/i18n-js: 3.0.3 => 3.0.3 @types/jest: 26.0.19 => 26.0.19 @types/react: 17.0.37 => 17.0.37 (17.0.45) @types/react-native: 0.66.9 => 0.66.9 @types/react-test-renderer: 17.0.1 => 17.0.1 @typescript-eslint/eslint-plugin: 4.10.0 => 4.10.0 @typescript-eslint/parser: 4.10.0 => 4.10.0 HelloWorld: 0.0.1 amazon-cognito-identity-js: ^5.2.9 => 5.2.9 apisauce: 2.0.0 => 2.0.0 (0.14.3) aws-amplify: ^4.3.24 => 4.3.24 aws-amplify-react-native: ^6.0.4 => 6.0.4 babel-jest: 26.6.3 => 26.6.3 babel-loader: 8.2.2 => 8.2.2 detox: 19.3.0 => 19.3.0 eslint: 7.15.0 => 7.15.0 eslint-config-prettier: 7.0.0 => 7.0.0 eslint-config-standard: 16.0.2 => 16.0.2 eslint-plugin-import: 2.22.1 => 2.22.1 eslint-plugin-node: 11.1.0 => 11.1.0 eslint-plugin-promise: 4.2.1 => 4.2.1 eslint-plugin-react: 7.21.5 => 7.21.5 eslint-plugin-react-native: 3.10.0 => 3.10.0 expo: ~44.0.6 => 44.0.6 expo-linear-gradient: 11.0.3 => 11.0.3 expo-localization: 12.0.1 => 12.0.1 expo-modules-autolinking: ^0.5.5 => 0.5.5 expo-modules-core: ^0.6.5 => 0.6.5 fbjs-scripts: 3.0.0 => 3.0.0 hermes-inspector-msggen: 1.0.0 i18n-js: 3.8.0 => 3.8.0 jest: 26 => 26.6.3 jest-circus: 26 => 26.6.3 jest-environment-node: 26 => 26.6.2 jest-expo: ^44.0.1 => 44.0.1 jetifier: 1.6.6 => 1.6.6 memo-parser: 0.2.1 metro-config: 0.66.2 => 0.66.2 metro-react-native-babel-preset: 0.66.2 => 0.66.2 (0.64.0) mobx: 6.1.8 => 6.1.8 mobx-react-lite: 3.2.0 => 3.2.0 mobx-state-tree: 5.0.1 => 5.0.1 mocha: 6 => 6.2.3 patch-package: 6.2.2 => 6.2.2 postinstall-prepare: 1.0.1 => 1.0.1 prettier: 2.2.1 => 2.2.1 query-string: ^7.0.1 => 7.1.1 (6.14.1, 6.10.1) react: 17.0.2 => 17.0.2 (16.14.0) react-devtools-core: 4.10.1 => 4.10.1 (4.19.1) react-dom: ^17.0.2 => 17.0.2 (16.14.0) react-native: 0.67.2 => 0.67.2 react-native-clean-project: ^3.6.3 => 3.6.7 react-native-gesture-handler: 1.10.3 => 1.10.3 react-native-get-random-values: ^1.8.0 => 1.8.0 react-native-image-placeholder: ^1.0.14 => 1.0.14 react-native-keychain: 6.2.0 => 6.2.0 react-native-safe-area-context: 3.1.8 => 3.1.8 react-native-screens: 3.8.0 => 3.8.0 react-native-sqlite-storage: ^6.0.1 => 6.0.1 react-native-url-polyfill: ^1.3.0 => 1.3.0 react-native-web: ^0.16.3 => 0.16.5 reactotron-core-client: ^2.8.10 => 2.8.10 (2.8.9) reactotron-mst: 3.1.4 => 3.1.4 reactotron-react-js: ^3.3.7 => 3.3.7 reactotron-react-native: 5.0.2 => 5.0.2 regenerator-runtime: ^0.13.4 => 0.13.9 solidarity: 2.3.1 => 2.3.1 ts-jest: 26 => 26.5.6 typescript: 4.2.3 => 4.2.3 validate.js: 0.13.1 => 0.13.1 webpack: 4 => 4.46.0 npmGlobalPackages: corepack: 0.10.0 npm: 8.5.5 yarn: 1.22.18 ```

Describe the bug

Cognito credentials are not able to be stored/retrieved after a valid authentication in my project, which is based on IgniteCLI 7.10.10. The authentication handshake is successful, but any subsequent calls to the REST API have an invalid authentication header (the credential Access Key ID is undefined) which results in a 403 from API gateway.

This was working without issue ~1-2 months ago... Have been trying to identify what change was the culprit but no results.

I have tested with a fresh install of Amplify REST API where Guest and Authenticated users were selected, so I can confirm it's not my Amplify project.

I have tested this on a fresh install of React Native 0.68.2, and I can successfully authenticate and call the API without issues.

Expected behavior

Being able to retrieve the stored Cognito credentials A 200 OK Response from API

Reproduction steps

Create new Ignite app, setup and pull Amplify

  1. npx ignite-cli@7.10.10 new testApp
  2. cd testApp
  3. npm install aws-amplify amazon-cognito-identity-js @react-native-community/netinfo @react-native-async-storage/async-storage
  4. npx pod-install
  5. amplify init
  6. amplify add API (Choose REST, default options, restrict API access and give authenticated users all permissions)
  7. Add Amplify config lines to app.tsx 
    import { Amplify, Auth } from 'aws-amplify';
import { withAuthenticator } from 'aws-amplify-react-native';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);
Amplify.Logger.LOG_LEVEL = 'DEBUG';
  8. Replace the last line of app.tsx with export default withAuthenticator(App);
  9. Add API GET code to button on a screen 
    const apiName = 'MyApiName';
const path = '/path'; 
const myInit = { // OPTIONAL
headers: {}, // OPTIONAL
response: true, // OPTIONAL (return the entire Axios response object instead of only response.data)
queryStringParameters: {  // OPTIONAL
    name: 'param',
},
};
  10. npm run ios
  11. Press the button, and see the 403 result in the logs

Replace the first instruction with npx react-native init testApp and it will result in a 200. You can just amplify pull for the second run to save time.

Code Snippet

// Put your code below this line.

Log output

``` // Put your logs below this line ... LOG [DEBUG] 36:16.770 Credentials - getting credentials LOG [DEBUG] 36:16.770 Credentials - picking up credentials LOG [DEBUG] 36:16.771 Credentials - getting new cred promise LOG [DEBUG] 36:16.771 Credentials - checking if credentials exists and not expired LOG [DEBUG] 36:16.771 Credentials - need to get a new credential or refresh the existing one LOG [DEBUG] 36:16.772 Credentials - no credentials for expiration check LOG [DEBUG] 36:16.772 AuthClass - Getting current user credentials LOG [DEBUG] 36:16.772 AuthClass - failed to get or parse item aws-amplify-federatedInfo [SyntaxError: JSON Parse error: Unexpected identifier "undefined"] ... LOG [DEBUG] 36:16.776 Credentials - set credentials from session LOG [DEBUG] 36:16.777 Credentials - Failed to load credentials {"_U": 1, "_V": 3, "_W": {"_1": 1, "_U": 0, "_V": 2, "_W": [TypeError: undefined is not an object (evaluating 'punycode.ucs2.decode')], "_X": null}, "_X": null} LOG [DEBUG] 36:16.778 Credentials - Error loading credentials [TypeError: undefined is not an object (evaluating 'punycode.ucs2.decode')] LOG [DEBUG] 36:16.778 AuthClass - getting guest credentials LOG [DEBUG] 36:16.778 Credentials - setting credentials for guest LOG [DEBUG] 36:16.779 Credentials - Failed to load credentials {"_U": 1, "_V": 3, "_W": {"_1": 2, "_U": 0, "_V": 2, "_W": [TypeError: undefined is not an object (evaluating 'punycode.ucs2.decode')], "_X": null}, "_X": null} LOG [DEBUG] 36:16.780 Credentials - Error loading credentials [TypeError: undefined is not an object (evaluating 'punycode.ucs2.decode')] LOG [DEBUG] 36:16.781 Signer - GET /foosb/items/ host:qmbff2oz7a.execute-api.us-east-2.amazonaws.com user-agent:aws-amplify/4.5.5 react-native x-amz-date:20220602T153616Z host;user-agent;x-amz-date e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855 LOG [DEBUG] 36:16.783 Signer {"region": "us-east-2", "service": "execute-api"} LOG [DEBUG] 36:16.784 RestClient - Signed Request: {"cancelToken": {"promise": {"_U": 0, "_V": 0, "_W": null, "_X": null}}, "data": null, "headers": {"Authorization": "AWS4-HMAC-SHA256 Credential=undefined/20220602/us-east-2/execute-api/aws4_request, SignedHeaders=host;user-agent;x-amz-date, Signature=aed3de23a3051edf7e7ded605c4106cb4821fe9e6319ba06546e588cf1c4ca4e", "User-Agent": "aws-amplify/4.5.5 react-native", "host": "qmbff2oz7a.execute-api.us-east-2.amazonaws.com", "x-amz-date": "20220602T153616Z"}, "host": "cognitoid.execute-api.us-east-2.amazonaws.com", "method": "GET", "path": "/foosb/items/", "responseType": "json", "timeout": 0, "url": "https://cognitoid.execute-api.us-east-2.amazonaws.com/foosb/items/"} LOG [DEBUG] 36:16.967 RestClient [Error: Request failed with status code 403] ```

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 commented 1 year ago

Hi @myfoostrong I just tried this with the most recent Ignite version v8.5.1 and didn't have any issues with the flow you described.

Can you confirm if you are pinned to the version you mentioned or if this issue was just old? I ran into separate issues with the CLI version you mentioned so tried with the most recent.

Also are you still experiencing this?

myfoostrong commented 1 year ago

Yes, I've confirmed everything works smoothly on latest version of Ignite. Closing since it's no longer an issue for me.

I'm not tied to that version, so haven't done any extensive testing to identify the culprit.

tannerabread commented 1 year ago

Glad to hear it! Thanks for responding