Angular Universal auth error every time

Before opening, please confirm:

• I have installed the latest version of the Amplify CLI (see above), and confirmed that the issue still persists.
• I have searched for duplicate or closed issues.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

How did you install the Amplify CLI?

npm

If applicable, what version of Node.js are you using?

v14.16.0

Amplify CLI Version

4.44.0

What operating system are you using?

Mac

Amplify Categories

auth, api

Amplify Commands

Not applicable

Describe the bug

We have created an angular amplify project which works fine in all cases apart from when hosting the angular project as an SSR Universal application. In this case, the project still works to the users, however it consistently gives this error for the first few calls:

GraphQLAPI - ensure credentials error No Cognito Identity pool provided for unauthenticated access

The app still serves the content correctly, however because of this the universal server side rendering doesnt work as well as it should and therefore google’s crawler doesnt pick up the pages correctly.

// Main.ts
import awsconfig from "./aws-exports";
Auth.configure(awsconfig);
API.configure(awsconfig);

and I have all the cognito and amplify settings set up correctly to allow user pools and unauthenticated users using IAM - as they all work fine for our web app and Ionic app.

I can’t understand why then, the angular universal project gets this error.

Expected behavior

It should not give an auth error.

Reproduction steps

1. Create angular universal project
2. Make any unauthenticated call for some data from the api:

  public runQuery<T>(query: any, variables: any, mapField: string, iamMode?: boolean, hideToast?: boolean): Observable<T | ErrorType> {
    return from(API.graphql({
      query,
      variables,
      authMode: !iamMode ? GRAPHQL_AUTH_MODE.AMAZON_COGNITO_USER_POOLS : GRAPHQL_AUTH_MODE.AWS_IAM
    }))
      .pipe(
        map((res: GraphQLResult<T>) => res?.data[mapField]),
        catchError(err => {
          console.log('API Service calling the query: ' + mapField);
          console.error(err);
          return of(ErrorType.ERROR);
        }),
        first(),
      )
  }

Log output

# Put your logs below this line
Node Express server listening on http://localhost:4000
[WARN] 19:45.186 GraphQLAPI - ensure credentials error No Cognito Identity pool provided for unauthenticated access
Error: No credentials
    at GraphQLAPIClass.<anonymous> (/Users/ollie/Documents/Development/Ping-web-version/dist/server/main.js:1:12792569)
    at step (/Users/ollie/Documents/Development/Ping-web-version/dist/server/main.js:1:12789146)
    at Object.next (/Users/ollie/Documents/Development/Ping-web-version/dist/server/main.js:1:12789262)
    at fulfilled (/Users/ollie/Documents/Development/Ping-web-version/dist/server/main.js:1:12787741)
    at ZoneDelegate.invoke (/Users/ollie/Documents/Development/Ping-web-version/dist/server/main.js:1:11013148)
    at Object.onInvoke (/Users/ollie/Documents/Development/Ping-web-version/dist/server/main.js:1:2500846)
    at ZoneDelegate.invoke (/Users/ollie/Documents/Development/Ping-web-version/dist/server/main.js:1:11013044)
    at Zone.run (/Users/ollie/Documents/Development/Ping-web-version/dist/server/main.js:1:11005562)
    at /Users/ollie/Documents/Development/Ping-web-version/dist/server/main.js:1:11024659
    at ZoneDelegate.invokeTask (/Users/ollie/Documents/Development/Ping-web-version/dist/server/main.js:1:11014080)

[sky4git]

I suggest remove “@aws-amplify” sub packages from package.json as dependencies. For example, “@aws-amplify/ui-react”: “^0.2.34”

[Milan-Shah]

@oliverandersencox - We have released a major new version of @aws-amplify/ui-react@2.1.0. Please give it a try and let us know if you are still facing any auth issues. We are here to help 😃