Authenticate AppSync queries console with Cognito User Pools

Question

I am trying to authenticate Queries playground in AWS AppSync console. I have created User Pool and linked it to the AppSync API, I have also created an App Client in Cognito User Pool (deployed using CloudFormation). It appears under Select the authorization provider to use for running queries on this page: in the console. When I run test query I get:

{
  "errors": [
    {
      "errorType": "UnauthorizedException",
      "message": "Unable to parse JWT token."
    }
  ]
}

This is what I would expect. There is an option to Login with User Pools. The issue is I can't select any Client ID and when I choose to insert Client ID manually, anything I enter I get Invalid UserPoolId format. I am trying to copy Pool ID from User Pool General settings (format eu-west-2_xxxxxxxxx) but no joy. Btw, I am not using Amplify and I have not configured any Identity Pools.

EDIT:

Here is the CloudFormation GraphQLApi definition:

  MyApi:
    Type: AWS::AppSync::GraphQLApi
    Properties:
      Name: !Sub "${AWS::StackName}-api"
      AuthenticationType: AMAZON_COGNITO_USER_POOLS
      UserPoolConfig:
        UserPoolId: !Ref UserPoolClient
        AwsRegion: !Sub ${AWS::Region}
        DefaultAction: ALLOW

Answer 1

To set up the stack using CloudFormation I have followed these 2 examples:

https://adrianhall.github.io/cloud/2018/04/17/deploy-an-aws-appsync-graphql-api-with-cloudformation/

https://gist.github.com/adrianhall/f330a10451f05a529680f32978dddb64

Turns out they both (same author) have an issue in them in the section where ApiGraphQL is defined. This:

  MyApi:
    Type: AWS::AppSync::GraphQLApi
    Properties:
      Name: !Sub "${AWS::StackName}-api"
      AuthenticationType: AMAZON_COGNITO_USER_POOLS
      UserPoolConfig:
        UserPoolId: !Ref UserPoolClient
        AwsRegion: !Sub ${AWS::Region}
        DefaultAction: ALLOW

Should be:

  MyApi:
    Type: AWS::AppSync::GraphQLApi
    Properties:
      Name: !Sub "${AWS::StackName}-api"
      AuthenticationType: AMAZON_COGNITO_USER_POOLS
      UserPoolConfig:
        UserPoolId: !Ref UserPool
        AwsRegion: !Sub ${AWS::Region}
        DefaultAction: ALLOW

Thank you @Myz for pointing me back to review the whole CF yaml file