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.42k stars 2.12k forks source link

"Valid authorization header not provided" when using AWS Amplify graphqlOperation & Cognito User Pool, but not in console #8892

Closed dperconti closed 3 years ago

dperconti commented 3 years ago

Before opening, please confirm:

JavaScript Framework

React

Amplify APIs

GraphQL API

Amplify Categories

auth, api

Environment information

``` # Put output below this line System: OS: macOS 11.4 CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz Memory: 19.32 MB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 16.5.0 - ~/.nvm/versions/node/v16.5.0/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 7.20.5 - ~/.nvm/versions/node/v16.5.0/bin/npm Browsers: Chrome: 93.0.4577.63 Safari: 14.1.1 npmPackages: @date-io/date-fns: 2.6.1 => 2.6.1 @formatjs/intl-pluralrules: 1.3.5 => 1.3.5 @fortawesome/fontawesome-free: 5.13.0 => 5.13.0 @manaflair/redux-batch: 1.0.0 => 1.0.0 @material-ui/core: 4.9.14 => 4.9.14 @material-ui/icons: 4.9.1 => 4.9.1 @material-ui/lab: 4.0.0-alpha.53 => 4.0.0-alpha.53 @material-ui/pickers: 3.2.10 => 3.2.10 @material-ui/styles: 4.9.14 => 4.9.14 @reduxjs/toolkit: ^1.6.1 => 1.6.1 @reduxjs/toolkit-query: 1.0.0 @reduxjs/toolkit-query-react: 1.0.0 @tanem/svg-injector: 8.0.50 => 8.0.50 @types/jest: ^26.0.23 => 26.0.23 @types/node: ^15.12.5 => 15.12.5 @types/object-path: ^0.11.0 => 0.11.0 @types/react: ^17.0.11 => 17.0.11 (16.14.8) @types/react-dom: ^17.0.8 => 17.0.8 @types/react-redux: ^7.1.16 => 7.1.16 @types/react-router-dom: ^5.1.7 => 5.1.7 algoliasearch: ^4.10.5 => 4.10.5 amazon-cognito-identity-js: ^5.0.3 => 5.0.3 (5.0.6) apexcharts: ^3.27.2 => 3.27.2 aws-amplify: ^4.2.2 => 4.2.2 aws-appsync: ^4.1.1 => 4.1.1 axios: ^0.21.1 => 0.21.1 axios-mock-adapter: 1.18.1 => 1.18.1 bootstrap: 4.6.0 => 4.6.0 chroma-js: ^2.1.2 => 2.1.2 clipboard-copy: 3.1.0 => 3.1.0 clsx: 1.1.0 => 1.1.0 copyfiles: 2.1.1 => 2.1.1 cp-cli: 2.0.0 => 2.0.0 css-mediaquery: 0.1.2 => 0.1.2 date-fns: 2.8.1 => 2.8.1 downshift: 3.4.2 => 3.4.2 fg-loadcss: 2.1.0 => 2.1.0 formik: 2.1.4 => 2.1.4 graphql-tag: ^2.12.5 => 2.12.5 json2mq: 0.2.0 => 0.2.0 jss-rtl: ^0.3.0 => 0.3.0 lodash: ^4.17.21 => 4.17.21 material-ui-popup-state: 1.4.1 => 1.4.1 object-path: ^0.11.5 => 0.11.5 perfect-scrollbar: 1.5.0 => 1.5.0 prettier: 1.19.1 => 1.19.1 prop-types: 15.7.2 => 15.7.2 react: 16.12.0 => 16.12.0 react-apexcharts: ^1.3.9 => 1.3.9 react-bootstrap: 1.0.1 => 1.0.1 react-bootstrap-table-next: 4.0.2 => 4.0.2 react-bootstrap-table2-paginator: 2.1.2 => 2.1.2 react-bootstrap/AbstractNav: undefined () react-bootstrap/AbstractNavItem: undefined () react-bootstrap/Accordion: undefined () react-bootstrap/AccordionCollapse: undefined () react-bootstrap/AccordionContext: undefined () react-bootstrap/AccordionToggle: undefined () react-bootstrap/Alert: undefined () react-bootstrap/Badge: undefined () react-bootstrap/BootstrapModalManager: undefined () react-bootstrap/Breadcrumb: undefined () react-bootstrap/BreadcrumbItem: undefined () react-bootstrap/Button: undefined () react-bootstrap/ButtonGroup: undefined () react-bootstrap/ButtonToolbar: undefined () react-bootstrap/Card: undefined () react-bootstrap/CardColumns: undefined () react-bootstrap/CardContext: undefined () react-bootstrap/CardDeck: undefined () react-bootstrap/CardGroup: undefined () react-bootstrap/CardImg: undefined () react-bootstrap/Carousel: undefined () react-bootstrap/CarouselCaption: undefined () react-bootstrap/CarouselItem: undefined () react-bootstrap/CloseButton: undefined () react-bootstrap/Col: undefined () react-bootstrap/Collapse: undefined () react-bootstrap/Container: undefined () react-bootstrap/Dropdown: undefined () react-bootstrap/DropdownButton: undefined () react-bootstrap/DropdownItem: undefined () react-bootstrap/DropdownMenu: undefined () react-bootstrap/DropdownToggle: undefined () react-bootstrap/ElementChildren: undefined () react-bootstrap/Fade: undefined () react-bootstrap/Feedback: undefined () react-bootstrap/Figure: undefined () react-bootstrap/FigureCaption: undefined () react-bootstrap/FigureImage: undefined () react-bootstrap/Form: undefined () react-bootstrap/FormCheck: undefined () react-bootstrap/FormCheckInput: undefined () react-bootstrap/FormCheckLabel: undefined () react-bootstrap/FormContext: undefined () react-bootstrap/FormControl: undefined () react-bootstrap/FormFile: undefined () react-bootstrap/FormFileInput: undefined () react-bootstrap/FormFileLabel: undefined () react-bootstrap/FormGroup: undefined () react-bootstrap/FormLabel: undefined () react-bootstrap/FormText: undefined () react-bootstrap/Image: undefined () react-bootstrap/InputGroup: undefined () react-bootstrap/Jumbotron: undefined () react-bootstrap/ListGroup: undefined () react-bootstrap/ListGroupItem: undefined () react-bootstrap/Media: undefined () react-bootstrap/Modal: undefined () react-bootstrap/ModalBody: undefined () react-bootstrap/ModalContext: undefined () react-bootstrap/ModalDialog: undefined () react-bootstrap/ModalFooter: undefined () react-bootstrap/ModalHeader: undefined () react-bootstrap/ModalTitle: undefined () react-bootstrap/Nav: undefined () react-bootstrap/NavContext: undefined () react-bootstrap/NavDropdown: undefined () react-bootstrap/NavItem: undefined () react-bootstrap/NavLink: undefined () react-bootstrap/Navbar: undefined () react-bootstrap/NavbarBrand: undefined () react-bootstrap/NavbarCollapse: undefined () react-bootstrap/NavbarContext: undefined () react-bootstrap/NavbarToggle: undefined () react-bootstrap/Overlay: undefined () react-bootstrap/OverlayTrigger: undefined () react-bootstrap/PageItem: undefined () react-bootstrap/Pagination: undefined () react-bootstrap/Popover: undefined () react-bootstrap/PopoverContent: undefined () react-bootstrap/PopoverTitle: undefined () react-bootstrap/ProgressBar: undefined () react-bootstrap/ResponsiveEmbed: undefined () react-bootstrap/Row: undefined () react-bootstrap/SafeAnchor: undefined () react-bootstrap/SelectableContext: undefined () react-bootstrap/Spinner: undefined () react-bootstrap/SplitButton: undefined () react-bootstrap/Switch: undefined () react-bootstrap/Tab: undefined () react-bootstrap/TabContainer: undefined () react-bootstrap/TabContent: undefined () react-bootstrap/TabContext: undefined () react-bootstrap/TabPane: undefined () react-bootstrap/Table: undefined () react-bootstrap/Tabs: undefined () react-bootstrap/ThemeProvider: undefined () react-bootstrap/Toast: undefined () react-bootstrap/ToastBody: undefined () react-bootstrap/ToastContext: undefined () react-bootstrap/ToastHeader: undefined () react-bootstrap/ToggleButton: undefined () react-bootstrap/ToggleButtonGroup: undefined () react-bootstrap/Tooltip: undefined () react-bootstrap/createChainedFunction: undefined () react-bootstrap/createWithBsPrefix: undefined () react-bootstrap/divWithClassName: undefined () react-bootstrap/triggerBrowserReflow: undefined () react-bootstrap/usePopperMarginModifiers: undefined () react-bootstrap/useWrappedRefWithWarning: undefined () react-datepicker: 2.16.0 => 2.16.0 react-dom: 16.12.0 => 16.12.0 react-draggable: 4.4.2 => 4.4.2 react-inlinesvg: 1.2.0 => 1.2.0 react-intl: 3.6.2 => 3.6.2 react-is: 16.13.1 => 16.13.1 (17.0.2) react-perfect-scrollbar: 1.5.8 => 1.5.8 react-portal: 4.2.0 => 4.2.0 react-quill: ^1.3.5 => 1.3.5 react-redux: 7.1.3 => 7.1.3 react-router-dom: 5.1.2 => 5.1.2 react-scripts: ^4.0.3 => 4.0.3 react-select: 3.1.0 => 3.1.0 react-swipeable-views: 0.13.9 => 0.13.9 react-syntax-highlighter: ^15.4.3 => 15.4.3 react-window: 1.8.5 => 1.8.5 redux: ^4.1.1 => 4.1.1 (3.7.2) redux-persist: ^5.10.0 => 6.0.0 (4.10.2, 5.10.0) redux-persist/constants: undefined () redux-persist/integration/react: undefined () redux-persist/storages: undefined () redux-saga: 1.1.3 => 1.1.3 redux-saga/effects: undefined () sass: 1.32.8 => 1.32.8 serve: ^12.0.0 => 12.0.0 socicon: 3.0.5 => 3.0.5 typescript: ^4.3.4 => 4.3.4 webpack-cli: ^3.3.11 => 3.3.11 webpack-messages: 2.0.4 => 2.0.4 webpack-rtl-plugin: 2.0.0 => 2.0.0 yup: 0.29.0 => 0.29.0 npmGlobalPackages: npm: 7.20.5 ```

Describe the bug

After successfully logging in with AWS cognito user pool, I'm attempting to use the graphql interface with a request like this:

const evidences = await API.graphql(graphqlOperation(listEvidences))

And am getting this response:

{
  "errors" : [ {
    "errorType" : "UnauthorizedException",
    "message" : "Valid authorization header not provided."
  } ]
}

What I've done so far:

  1. I've verified that the aws-exports.js file aligns with the configuration when logging into the console.
  2. Copied over the request done in the console and compare it to the request done via the JS library via postman. When doing so, the only difference (other than the body of the request), is that the console request does not include the word bearer in the authorization header. When I remove the word bearer from the header in the JS request in postman, the request works.
  3. Tried using the AWS appsync configuration instead with:
export const amplifyClient = new AWSAppSyncClient({
  url: awsExports.aws_appsync_graphqlEndpoint,
  region: awsExports.aws_appsync_region,
  auth: {
    type: AUTH_TYPE.AMAZON_COGNITO_USER_POOLS,
    jwtToken: async () =>
      (await Auth.currentSession()).getIdToken().getJwtToken(),
  },
})

and

      const result = await amplifyClient
      .query({
        query: gql(listEvidences),
      })

However, this returns nothing, nor is there a request that actually goes out. However, using the appsync client works for a mutation but not a query. I'd much rather use the Amplify SDK.

Expected behavior

Logging into the appsync console to execute the same request like so:

query listStandards {
  listStandards {
    items {
      name
    }
  }
}

I am able to receive a successful 200 response. I'd expect the amplify interface to function the same.

Reproduction steps

  1. install aws cli
  2. create basic app
  3. add cognito auth
  4. add graphql API
  5. Create an item view consol
  6. Attempt to list items via JS SDK
  7. Attempt to list items via Console
  8. Compare the two requests. You should find that the authorization headers are different.

Code Snippet

Screen Shot 2021-09-14 at 8 04 41 AM

Screen Shot 2021-09-14 at 8 05 17 AM

type Evidence @model @key(name: "byUser", fields: ["userID"]) @auth(rules: [{allow: private}]) {
  id: ID!
  title: String
  date: AWSDate
  Standards: [EvidenceStandard] @connection(keyName: "byEvidence", fields: ["id"])
  userID: ID
  Subjects: [Subject] @connection(keyName: "byEvidence", fields: ["id"])
  score: Int
  totalScore: Int
  scoreString: String
  notes: AWSJSON
}

Log output

``` // Put your logs below this line ```

aws-exports.js

/* eslint-disable */
// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
    "aws_project_region": "us-east-1",
    "aws_cognito_identity_pool_id": "us-east-1:********",
    "aws_cognito_region": "us-east-1",
    "aws_user_pools_id": "us-east-1_******",
    "aws_user_pools_web_client_id": "*********",
    "oauth": {},
    "aws_appsync_graphqlEndpoint": "https://*********.appsync-api.us-east-1.amazonaws.com/graphql",
    "aws_appsync_region": "us-east-1",
    "aws_appsync_authenticationType": "AMAZON_COGNITO_USER_POOLS",
    "aws_appsync_apiKey": "**********"
};

export default awsmobile;

Manual configuration

No response

Additional configuration

{
    "UserPool": {
        "Id": "us-east-1_****",
        "Name": "***-dev",
        "Policies": {
            "PasswordPolicy": {
                "MinimumLength": 8,
                "RequireUppercase": false,
                "RequireLowercase": false,
                "RequireNumbers": false,
                "RequireSymbols": false,
                "TemporaryPasswordValidityDays": 7
            }
        },
        "LambdaConfig": {},
        "LastModifiedDate": "2021-07-27T14:13:48.243000-07:00",
        "CreationDate": "2021-07-26T11:37:38.391000-07:00",
        "SchemaAttributes": [
            {
                "Name": "sub",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": false,
                "Required": true,
                "StringAttributeConstraints": {
                    "MinLength": "1",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "name",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "given_name",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "family_name",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "middle_name",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "nickname",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "preferred_username",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "profile",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "picture",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "website",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "email",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": true,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "email_verified",
                "AttributeDataType": "Boolean",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false
            },
            {
                "Name": "gender",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "birthdate",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "10",
                    "MaxLength": "10"
                }
            },
            {
                "Name": "zoneinfo",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "locale",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "phone_number",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "phone_number_verified",
                "AttributeDataType": "Boolean",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false
            },
            {
                "Name": "address",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "updated_at",
                "AttributeDataType": "Number",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "NumberAttributeConstraints": {
                    "MinValue": "0"
                }
            }
        ],
        "AutoVerifiedAttributes": [
            "email"
        ],
        "UsernameAttributes": [
            "email"
        ],
        "SmsVerificationMessage": "Your verification code is {####}",
        "EmailVerificationMessage": "Your verification code is {####}",
        "EmailVerificationSubject": "Your verification code",
        "VerificationMessageTemplate": {
            "SmsMessage": "Your verification code is {####}",
            "EmailMessage": "Your verification code is {####}",
            "EmailSubject": "Your verification code",
            "DefaultEmailOption": "CONFIRM_WITH_CODE"
        },
        "SmsAuthenticationMessage": "Your authentication code is {####}",
        "MfaConfiguration": "OFF",
        "EstimatedNumberOfUsers": 1,
        "EmailConfiguration": {
            "EmailSendingAccount": "COGNITO_DEFAULT"
        },
        "SmsConfiguration": {
            "SnsCallerArn": "arn:aws:iam::043895463514:role/snsfadb09ec113248-dev",
            "ExternalId": "altumfadb09ec_role_external_id"
        },
        "UserPoolTags": {},
        "Domain": "altum",
        "AdminCreateUserConfig": {
            "AllowAdminCreateUserOnly": true,
            "UnusedAccountValidityDays": 7
        },
        "UsernameConfiguration": {
            "CaseSensitive": false
        },
        "Arn": "arn:aws:cognito-idp:us-east-1:******:userpool/us-east-1_******",
        "AccountRecoverySetting": {}
    }
}

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 3 years ago

Hi @dperconti 👋 Thanks for raising this issue. Can you share your graphQL schema as well so I can see how your auth rules are configured on the model?

dperconti commented 3 years ago

Thanks for the fast reply, @chrisbonifacio. I've updated the original question to include a screenshot of the model that I created in the console, as well as the object schema.graphql object for evidence by itself. The whole file is 250+ lines, so I only included the Evidence object. If you'd like to see the whole thing let me know and I can certainly add it all.

dperconti commented 3 years ago

I had an axios interceptor that was injecting the Bearer string along with the auth token. Removed it and now it's working.

github-actions[bot] commented 1 year ago

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.