Issue with GraphQlAPI and Cognito Identity Pool.

[1thda]

Before opening, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have read the guide for submitting bug reports.
• [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React

Amplify APIs

GraphQL API

Amplify Categories

api

Environment information

``` # Put output below this line System: OS: macOS 12.1 CPU: (8) arm64 Apple M1 Memory: 119.03 MB / 8.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 20.5.1 - /usr/local/bin/node npm: 9.8.0 - /usr/local/bin/npm Browsers: Chrome: 117.0.5938.149 Safari: 15.2 npmPackages: @aws-amplify/ui-react: ^4.6.5 => 4.6.5 @aws-amplify/ui-react-internal: undefined () @testing-library/jest-dom: ^5.17.0 => 5.17.0 @testing-library/react: ^13.4.0 => 13.4.0 @testing-library/user-event: ^13.5.0 => 13.5.0 aws-amplify: ^5.3.11 => 5.3.11 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 react-scripts: 5.0.1 => 5.0.1 web-vitals: ^2.1.4 => 2.1.4 npmGlobalPackages: @aws-amplify/cli: 12.6.0 ```

Describe the bug

Hello, we're trying to connect an Amplify Studio project to the Visual Studio Code Interface using the Amplify CLI and we run into the following problem when trying to fetch data. We've updated our code and configured the AWS as well.

The current error that we're running into : import { API, graphqlOperation } from 'aws-amplify'; import { listPreviousIssueArchives } from "./graphql/queries";

useEffect( () => { fetchArticles() },[])

// List all items const fetchArticles = async () => { const allPreviousIssueArchives = await API.graphql(graphqlOperation(listPreviousIssueArchives)); console.log(allPreviousIssueArchives); setArticles(allPreviousIssueArchives.data.listPreviousIssueArchives) } [WARN] 04:18.17 GraphQLAPI - ensure credentials error No Cognito Identity pool provided for unauthenticated access ConsoleLogger._log @ ConsoleLogger.js:134 InternalGraphQLAPI.ts:143 Uncaught (in promise) Error: No credentials at InternalGraphQLAPIClass. (InternalGraphQLAPI.ts:143:1) at step (tslib.es6.js1) at Object.next (tslib.es6.js:81:1) at fulfilled (tslib.es6.js:71:1)

We've looked at AWS Cognito Pool and we can't find any issues or any way to "provide for unauthenticated access"

Expected behavior

Trying to list all the information in the data model.

Reproduction steps

We followed these steps from this tutorial : https://docs.amplify.aws/cli/start/install/#install-the-amplify-cli

and we've also implemented the following dependancies:

"dependencies": { "@aws-amplify/ui-react": "^4.6.5", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "aws-amplify": "^5.3.11", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4"

Code Snippet

No response

Log output

``` // Put your logs below this line [WARN] 04:18.17 GraphQLAPI - ensure credentials error No Cognito Identity pool provided for unauthenticated access ConsoleLogger._log @ ConsoleLogger.js:134 InternalGraphQLAPI.ts:143 Uncaught (in promise) Error: No credentials at InternalGraphQLAPIClass. (InternalGraphQLAPI.ts:143:1) at step (tslib.es6.js1) at Object.next (tslib.es6.js:81:1) at fulfilled (tslib.es6.js:71:1) ```

aws-exports.js

const awsmobile = { "aws_project_region": "ap-southeast-2", "aws_appsync_graphqlEndpoint": "https://k25ghlpoxfb3rdvnjqvfggoag4.appsync-api.ap-southeast-2.amazonaws.com/graphql", "aws_appsync_region": "ap-southeast-2", "aws_appsync_authenticationType": "API_KEY", "aws_appsync_apiKey": "da2-ks233fgj7vhlfnyqpujt5xl5fi", "aws_cognito_identity_pool_id": "ap-southeast-2:ad1fabae-a77d-48a3-860e-5ee8900c61ea", "aws_cognito_region": "ap-southeast-2", "aws_user_pools_id": "ap-southeast-2_RI4NQrwor", "aws_user_pools_web_client_id": "5oipt232l2ch6c6ud48tgsr7g2", "oauth": {}, "aws_cognito_username_attributes": [ "EMAIL" ], "aws_cognito_social_providers": [], "aws_cognito_signup_attributes": [], "aws_cognito_mfa_configuration": "OFF", "aws_cognito_mfa_types": [ "SMS" ], "aws_cognito_password_protection_settings": { "passwordPolicyMinLength": 8, "passwordPolicyCharacters": [ "REQUIRES_LOWERCASE", "REQUIRES_NUMBERS", "REQUIRES_SYMBOLS", "REQUIRES_UPPERCASE" ] }, "aws_cognito_verification_mechanisms": [ "EMAIL" ], "aws_user_files_s3_bucket": "teamspotflemkenarchive-storage-f7d773c001738-staging", "aws_user_files_s3_bucket_region": "ap-southeast-2" };

export default awsmobile;

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]

Hi @1thda 👋 thanks for raising this issue!

Can you please share how you're calling Amplify.configure in your app's entry file?

The error suggests that an identity pool was not provided but I do see one in your aws-exports file so maybe the Amplify and/or API instances are not configured correctly.

Also, I noticed in your aws-exports file that you have API KEY as an authentication type for AppSync.

"aws_appsync_authenticationType": "API_KEY"

Are you trying to use an API Key or IAM for public read access to your Articles table?

[1thda]

Hi Chris, Thanks so much for your message. 
We’re a team of Computer Science students working on a project for University. Our client is a local newspaper and we’re looking at creating an archive site to store past issues of the network. So far our past issues have been stored on S3 Bucket and we’re using Amplify as a back end. 
We initially created a user (TeamSpotUser) when prompted through the command line and through Identity and Access Management (IAM). Also our graphqlconfig file is located in our src folder

This is how we’re calling the AWS Amplify Instance.

And this is our graphql config file.

[chrisbonifacio]

Hi @1thda thank you for the additional context. Sounds like a cool project!

We initially created a user (TeamSpotUser) when prompted through the command line and through Identity and Access Management (IAM). Also our graphqlconfig file is located in our src folder

This user is the one that the Amplify CLI will use to authorize commands such as amplify pull, amplify push, etc but it is not the user that is used to authorize requests to the GraphQL API. That is handled by the API Key that Amplify created when the GraphQL API was first deployed.

If you do still have API Key as a authentication type, you could try changing your code to this and see if it successfully authorizes the requests.

const fetchArticles = async () => {
const allPreviousIssueArchives = await API.graphql({
    query: listPreviousIssueArchives,
    authMode: "API_KEY"
});
console.log(allPreviousIssueArchives);
setArticles(allPreviousIssueArchives.data.listPreviousIssueArchives)
}

If that does not work, and you do wish to use IAM as an auth mode:

The error [WARN] 04:18.17 GraphQLAPI - ensure credentials error No Cognito Identity pool provided for unauthenticated access ConsoleLogger._log @ ConsoleLogger.js:134 InternalGraphQLAPI.ts:143 Uncaught (in promise) Error: No credentials suggests that you are trying to authorize the request as an IAM user.

However, your AppSync API's default and only authentication type is API_KEY. You'd have to run: amplify update api >  Authorization modes > Select a default (API key is fine) > Configure additional auth types? (Answer y), Select IAM using the space bar > Enter > run amplify push

You'll also have to make sure the schema allows IAM as a provider:

1. An auth rule such as { allow: public, provider: iam } on the Article model.

Example:

type Article 
@model 
@auth(rules: [ 
{ allow: public } # API Key
{ allow: public, provider: iam } # IAM unauthenticated users
]) {
    id
    # ...fields
}

2. Allow unauthenticated logins on your auth resource by running amplify update auth then answer the prompts like so:

Complete the prompt flow. Once completed, run amplify push.

For more info on public auth modes: https://docs.amplify.aws/cli/graphql/authorization-rules/#public-data-access

Let me know if this info helps! I'm also happy to schedule a call if need be and answer any questions.

[1thda]

Hi @chrisbonifacio, Thank you so much for your help on this issue

We tried both of the solutions with modifications of the code, as well as amplify update api solution. 
unfortunately, both of these solutions did not work. And we get the following error: 



Uncaught (in promise) Error: No api-key configured
    at InternalGraphQLAPIClass.<anonymous> (InternalGraphQLAPI.ts:133:1)
    at step (tslib.es6.js:100:1)
    at Object.next (tslib.es6.js:81:1)
    at tslib.es6.js:74:1
    at new Promise (<anonymous>)
    at __awaiter (tslib.es6.js:70:1)
    at InternalGraphQLAPIClass._headerBasedAuth (InternalGraphQLAPI.ts:122:1)
    at InternalGraphQLAPIClass.<anonymous> (InternalGraphQLAPI.ts:288:1)
    at step (tslib.es6.js:100:1)
    at Object.next (tslib.es6.js:81:1)

We would really appreciate having a call with you to iron out any problems, Please let us know what time works for you? Thank you again.

[chrisbonifacio]

Hi @1thda please email me at christopher.bonifacio@gmail.com with your availability for tomorrow between 9am - 5pm EST and I will respond with a scheduled time that works for us both.

[chrisbonifacio]

Hi @1thda :wave:

It was a pleasure meeting with you!

I'm going to close this issue out since we were able to unblock you during our call.

Please open a new issue or post in the Amplify Discord server if you run into any issues or have further questions.