Request Failed with Status 401 in AWS App Sync Console

[SaileshKumar]

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

No response

Environment information

``` # Put output below this line System: OS: macOS 10.15.7 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Memory: 13.97 GB / 32.00 GB Shell: 5.7.1 - /bin/zsh Binaries: Node: 14.16.0 - /usr/local/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 6.14.11 - /usr/local/bin/npm Browsers: Chrome: 89.0.4389.128 Safari: 14.0.3 npmPackages: @aws-amplify/ui-react: ^1.0.6 => 1.0.6 @testing-library/jest-dom: ^5.11.4 => 5.11.10 @testing-library/react: ^11.1.0 => 11.2.6 @testing-library/user-event: ^12.1.10 => 12.8.3 HelloWorld: 0.0.1 antd: ^4.15.0 => 4.15.0 aws-amplify: ^3.3.26 => 3.3.26 flow-bin: ^0.148.0 => 0.148.0 hermes-inspector-msggen: 1.0.0 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 react-native: ^0.64.0 => 0.64.0 react-router-dom: ^5.2.0 => 5.2.0 react-scripts: 4.0.3 => 4.0.3 web-vitals: ^1.0.1 => 1.1.1 npmGlobalPackages: @aws-amplify/cli: 4.46.1 npm: 6.14.11 yarn: 1.22.10 ```

Describe the bug

Can't run basic queries in AQS App Sync Console, and no information provided in the error log:

Expected behavior

Should return the results from the query (and return all classes). This worked last week, but it stopped working around the same time I was trying to add @auth (might be a red herring since when I took off @auth it was still broken). Is it possible this is my API keys being expired? I thought they'd renew every time I pushed or something...

Reproduction steps

Add my schema.graphql, amplify push, and try to run queries

Code Snippet

// Put your code below this line.
type User @model {
  id: ID!
  name: String!
  last_name: String!
  bio: String
  registered_classes: [Class] @connection
  teacher_info: TeacherInfo
  classes: [Class] @connection(keyName: "byTeacher", fields: ["id"])
}

type TeacherInfo {
  bio: String
  twitch_url: String
  instagram_url: String
}

type Class @model @key(name: "byTeacher", fields: ["teacherID"]) {
  id: ID!
  title: String!
  teacherID: ID!
  description: String!
  teacher: User @connection(fields: ["teacherID"]) 
}

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]

Hey! 👋 Thanks for raising this! As I attempt to reproduce this issue, would you mind providing me with some more information like if you're also using auth in your project? If so, how is it configured?

[SaileshKumar]

I tried adding auth with amplify add auth, and was trying to add some auth rules like owner can delete/edit, people in admin group can do anything, only people in teacher group, and anyone can read.

When I couldn't figure out why it was broken, I tried to remove the auth rules and re push, but the queries still broke in the tool...

Feel free to poke around in there if you're able to! Project is called Ruso

[SaileshKumar]

In the Amplify Web Tool it says my auth mode is Cognito User Pool

[chrisbonifacio]

Thank you! Sounds like you're using a pretty normal auth configuration. Quick question, just because I've made this mistake before (not too long ago either) - do you login as a user in your User Pool when using the AppSync console?

I don't think the GraphQL API is public and can only be queried by authenticated users, including in the Console.

If I am not logged in and run a query, I get this back

[SaileshKumar]

Ah wait that's definitely it...thank you!

What's the difference between the client and clientWeb that show up under client ID? I used clientWeb and it worked great :), but was curious what the difference was...

[chrisbonifacio]

You're very welcome. I'm glad that I was able to help :)

Here's an explanation from the team on why this is the case:

"JavaScript client libraries cannot use a client which has a secret attached. Amplify CLI creates both for people as a convenience and the web one doesn't have a secret."

Also, as I am also learning more about this, here is an article from OAuth I found on client ids and secrets that might be helpful as well https://www.oauth.com/oauth2-servers/client-registration/client-id-secret/

[github-actions[bot]]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.