Amplify-cli: Multi-Auth AppSync - No Cognito Identity pool provided for unauthenticated access

[MontoyaAndres]

Describe the bug
I have configured Multi Auth with the providers Cognito and IAM. Like this:

First, I executed the command amplify auth update

And update this config to my project. I tested with amplify mock and through AWS AppSync Console. Works well.

So, I wanted to integrate it with an external project, using the commands that AWS AppSync Console gives in the Getting Started section:

amplify init

amplify add codegen --apiId <id_project>

amplify codegen

In this external project, it gives me this àws-exports.js config:

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

const awsmobile = {
  aws_project_region: "us-east-2",
  aws_appsync_graphqlEndpoint:
    "https://js34zn5dafaxjatn52jom6cqde.appsync-api.us-east-2.amazonaws.com/graphql",
  aws_appsync_region: "us-east-2",
  aws_appsync_authenticationType: "AWS_IAM",
};

export default awsmobile;

Which is right, I have the AWS_IAM config by default. So, I tried to configure amplify, on the _app.js page (I'm using Next.js). Like this:

import React from "react";
import App from "next/app";
import Amplify from "aws-amplify";
import { Auth } from "aws-amplify";

import awsmobile from "../src/aws-exports";

Amplify.configure(awsmobile);

Auth.currentCredentials()
  .then((d) => console.log("data: ", d))
  .catch((e) => console.log("error: ", e));

export default class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;

    return <Component {...pageProps} />;
  }
}

And then do a query, like this:

import React, { useState, useEffect } from "react";
import { API } from "aws-amplify";
import { GRAPHQL_AUTH_MODE } from "@aws-amplify/api";

import { listPublications } from "../src/graphql/queries";

function index() {
  const [data, setData] = useState([]);

  useEffect(() => {
    getSectionData();
  }, []);

  async function getSectionData() {
    try {
      const { data } = await API.graphql({
        query: listPublications,
        variables: {
          filter: {
            contentType: { eq: "Publications" },
          },
        },
        authMode: GRAPHQL_AUTH_MODE.AWS_IAM,
      });

      console.log(data);

      setData(data?.listPublications?.item);
    } catch (err) {
      console.error("error fetching talks...", err);
    }
  }

  return <h1>hello</h1>;
}

export default index;

But I got this error

I used this example as a guide and everything looks correct... And even the Unauthenticated role from IAM console is right, which is this:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Action": [
                "appsync:GraphQL"
            ],
            "Resource": [
                "arn:aws:appsync:us-east-2:980949533452:apis/56jzwszsjvbxrermdub5eujofm/types/Section/*",
                "arn:aws:appsync:us-east-2:980949533452:apis/56jzwszsjvbxrermdub5eujofm/types/Query/fields/getSection",
                "arn:aws:appsync:us-east-2:980949533452:apis/56jzwszsjvbxrermdub5eujofm/types/Query/fields/listSections",
                "arn:aws:appsync:us-east-2:980949533452:apis/56jzwszsjvbxrermdub5eujofm/types/Query/fields/sortSectionByUserIdAndCreatedAt",
                "arn:aws:appsync:us-east-2:980949533452:apis/56jzwszsjvbxrermdub5eujofm/types/Publication/*",
                "arn:aws:appsync:us-east-2:980949533452:apis/56jzwszsjvbxrermdub5eujofm/types/Query/fields/getPublication",
                "arn:aws:appsync:us-east-2:980949533452:apis/56jzwszsjvbxrermdub5eujofm/types/Query/fields/listPublications",
                "arn:aws:appsync:us-east-2:980949533452:apis/56jzwszsjvbxrermdub5eujofm/types/Query/fields/sortPublicationByUserIdAndCreatedAt",
                "arn:aws:appsync:us-east-2:980949533452:apis/56jzwszsjvbxrermdub5eujofm/types/Magazine/*",
                "arn:aws:appsync:us-east-2:980949533452:apis/56jzwszsjvbxrermdub5eujofm/types/Query/fields/getMagazine",
                "arn:aws:appsync:us-east-2:980949533452:apis/56jzwszsjvbxrermdub5eujofm/types/Query/fields/listMagazines",
                "arn:aws:appsync:us-east-2:980949533452:apis/56jzwszsjvbxrermdub5eujofm/types/Query/fields/sortMagazineByUserIdAndCreatedAt",
                "arn:aws:appsync:us-east-2:980949533452:apis/56jzwszsjvbxrermdub5eujofm/types/MagazineIndex/*",
                "arn:aws:appsync:us-east-2:980949533452:apis/56jzwszsjvbxrermdub5eujofm/types/Query/fields/getMagazineIndex",
                "arn:aws:appsync:us-east-2:980949533452:apis/56jzwszsjvbxrermdub5eujofm/types/Query/fields/listMagazineIndexs",
                "arn:aws:appsync:us-east-2:980949533452:apis/56jzwszsjvbxrermdub5eujofm/types/Event/*",
                "arn:aws:appsync:us-east-2:980949533452:apis/56jzwszsjvbxrermdub5eujofm/types/Mutation/fields/updateEvent",
                "arn:aws:appsync:us-east-2:980949533452:apis/56jzwszsjvbxrermdub5eujofm/types/Query/fields/getEvent",
                "arn:aws:appsync:us-east-2:980949533452:apis/56jzwszsjvbxrermdub5eujofm/types/Query/fields/listEvents",
                "arn:aws:appsync:us-east-2:980949533452:apis/56jzwszsjvbxrermdub5eujofm/types/Query/fields/sortEventByUserIdAndCreatedAt",
                "arn:aws:appsync:us-east-2:980949533452:apis/56jzwszsjvbxrermdub5eujofm/types/Subscription/fields/onUpdateEvent",
                "arn:aws:appsync:us-east-2:980949533452:apis/56jzwszsjvbxrermdub5eujofm/types/Participant/*",
                "arn:aws:appsync:us-east-2:980949533452:apis/56jzwszsjvbxrermdub5eujofm/types/Mutation/fields/createParticipant",
                "arn:aws:appsync:us-east-2:980949533452:apis/56jzwszsjvbxrermdub5eujofm/types/Subscription/fields/onCreateParticipant",
                "arn:aws:appsync:us-east-2:980949533452:apis/56jzwszsjvbxrermdub5eujofm/types/Subscription/*",
                "arn:aws:appsync:us-east-2:980949533452:apis/56jzwszsjvbxrermdub5eujofm/types/Mutation/fields/createSubscription",
                "arn:aws:appsync:us-east-2:980949533452:apis/56jzwszsjvbxrermdub5eujofm/types/Subscription/fields/onCreateSubscription"
            ],
            "Effect": "Allow"
        }
    ]
}

All those queries and mutations are the ones that I used with the rule @auth( rules: [ { allow: public, provider: iam, operations: [...] } ] )

I don't know why AppSync gives me that error.

Also, if I do click on the button "download config" gives me this:

{
    "UserAgent": "aws-amplify-cli/0.1.0",
    "Version": "1.0",
    "IdentityManager": {
        "Default": {}
    },
    "AppSync": {
        "Default": {
            "ApiUrl": "https://js34zn5dafaxjatn52jom6cqde.appsync-api.us-east-2.amazonaws.com/graphql",
            "Region": "us-east-2",
            "AuthMode": "AWS_IAM",
            "ClientDatabasePrefix": "shooter-dev_AWS_IAM"
        },
        "shooter-dev_AMAZON_COGNITO_USER_POOLS": {
            "ApiUrl": "https://js34zn5dafaxjatn52jom6cqde.appsync-api.us-east-2.amazonaws.com/graphql",
            "Region": "us-east-2",
            "AuthMode": "AMAZON_COGNITO_USER_POOLS",
            "ClientDatabasePrefix": "shooter-dev_AMAZON_COGNITO_USER_POOLS"
        }
    }
}

[MontoyaAndres]

Also, this option is activated:

And the repo that I used as a guide, many people have this same issue...

[MontoyaAndres]

Hey!

I could fix it with removing this config:

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

const awsmobile = {
  aws_project_region: "us-east-2",
  aws_appsync_graphqlEndpoint:
    "https://js34zn5dafaxjatn52jom6cqde.appsync-api.us-east-2.amazonaws.com/graphql",
  aws_appsync_region: "us-east-2",
  aws_appsync_authenticationType: "AWS_IAM",
};

export default awsmobile;

And adding the whole config of the main project... Maybe the command amplify add codegen --apiId <id_project> should know this and add the main config...

[Amplifiyer]

@MontoyaAndres, on the file where you are doing the query, after importing API, please call API.configure(aws_exports) again. The problem is that when you called Amplify.configure(...), API was not imported in your app and hence didn't get a chance to configure itself.

[MontoyaAndres]

If I'm not wrong I did this, in the _app.js file I add:

import React from "react";
import App from "next/app";
import Amplify from "aws-amplify";

import awsmobile from "../src/aws-exports";

Amplify.configure(awsmobile);

export default class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;

    return <Component {...pageProps} />;
  }
}

And in the pages/index.js file I've added:

import React, { useState, useEffect } from "react";
import { GRAPHQL_AUTH_MODE } from "@aws-amplify/api";
import Amplify, { API } from "aws-amplify";

import awsmobile from "../src/aws-exports";

Amplify.configure(awsmobile);

export const listPublications = /* GraphQL */ `
  query ListPublications {
    listPublications {
      items {
        id
        title
        tag
        description
        image
        isCompleted
        userId
        createdAt
      }
    }
  }
`;

function index() {
  const [data, setData] = useState([]);

  useEffect(() => {
    getSectionData();
  }, []);

  async function getSectionData() {
    try {
      const { data } = await API.graphql({
        query: listPublications,
        variables: {
          filter: {
            contentType: { eq: "Publications" },
          },
        },
        authMode: GRAPHQL_AUTH_MODE.AWS_IAM,
      });

      console.log(data);

      setData(data?.listPublications?.item);
    } catch (err) {
      console.error("error fetching talks...", err);
    }
  }

  return <h1>hello</h1>;
}

export default index;

But I got the same error...

[MontoyaAndres]

This is the solution:

The main project has AMAZON_COGNITO_USER_POOLS and AWS_IAM configured, so I used amplify add codegen --apiId <id_project> to use this AppSync API in another frontend project, as I explained before.

In this new frontend project was generated this config:

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

const awsmobile = {
  aws_project_region: "us-east-2",
  aws_appsync_graphqlEndpoint:
    "https://js34zn5dafaxjatn52jom6cqde.appsync-api.us-east-2.amazonaws.com/graphql",
  aws_appsync_region: "us-east-2",
  aws_appsync_authenticationType: "AWS_IAM",
};

export default awsmobile;

I just added these new fields from the main project:

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

const awsmobile = {
  aws_project_region: "us-east-2",
  aws_appsync_graphqlEndpoint:
    "https://js34zn5dafaxjatn52jom6cqde.appsync-api.us-east-2.amazonaws.com/graphql",
  aws_appsync_region: "us-east-2",
  aws_appsync_authenticationType: "AWS_IAM",
  aws_cognito_identity_pool_id:  "us-east-2:HERE_ID",
  aws_cognito_region: "us-east-2",
};

export default awsmobile;

And it worked... I'm sure this is a little bug, the CLI only needs to detect the Cognito config and add those fields... @Amplifiyer

[Amplifiyer]

Thanks @MontoyaAndres, passing this to amplify-cli repo to take a closer look.

[SwaySway]

Hello @MontoyaAndres using amplify add codegen --apiId <id_project> will mainly download the introspection schema from the API in the current project. If it loaded authorization as well it could potentially conflict with fields generated by the Auth category. Your use case seems as though you are running the same backend amplify project with against different frontends? If this is the case we do have documentation of multiple frontends. Docs: https://docs.amplify.aws/cli/teams/multi-frontend

[MontoyaAndres]

:open_mouth: i haven't read that :)

[MontoyaAndres]

Hey @SwaySway one more little question, I already did amplify pull to the other project, and it works... But this one does not generate the types, so I did amplify codegen and this one didn't work... Do I need to copy and paste the graphql types from the main project to others always?

[jpca999]

Whats the solution to this issue ?

[jpca999]

I foudn the solution

put this in the app.js or the index.js the base file.