Can't fetch ListUsers with CognitoIdentityProviderClient (aws-sdk) and next.js (v14 with /app router)

54 Views Asked by At

I have problems fetching users list from Cognito User Pool using aws/sdk.

I'm working with next.js with /app router (v14.0.4), aws-amplify (v6.0.10) and @aws-sdk/client-cognito-identity-provider (3.496.0).

I'm trying to create an user page (profile page) and a page of users and my components look like this:

app/(auth)/(users)/[id]/actions.ts

"use server";

import {
  CognitoIdentityProviderClient,
  ListUsersCommand,
} from "@aws-sdk/client-cognito-identity-provider";

export const listUsers = async () => {
  const cognitoIdentityProviderClient = new CognitoIdentityProviderClient({});
  const userPoolId = process.env.NEXT_PUBLIC_USERPOOL_ID!;

  const params = {
    UserPoolId: userPoolId,
  };

  try {
    const result = await cognitoIdentityProviderClient.send(
      new ListUsersCommand(params)
    );

    return result.Users;
  } catch (err: any) {
    console.error(err, err.stack);
    if (err.digest) {
      console.error("Error Digest:", err.digest);
    }
    throw err;
  }
};

app/(auth)/(users)/[id]/page.tsx

"use client";

...
const UserPage = () => {
 ...

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        // @ts-ignore
        const usersFromUserPool: UserType[] | undefined = await listUsers();
        setUsers(usersFromUserPool || []);
      } catch (error: any) {
        console.error("Error fetching users:", error);
      }
    };
    fetchUsers();
  }, []);

 ...
  return (
   ..
  );
};

export default UserPage;

Everything works fine in local, but not in production, where I get this error:

An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.

I also included the environment variables in my amplify console and in my build settings.

For more context this is what my amplify.yml under App settings: Build settings look like:

version: 1
backend:
  phases:
    build:
      commands:
        - '# Execute Amplify CLI with the helper script'
        - amplifyPush --simple
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - env | grep -e BUCKET_NAME -e BUCKET_REGION -e ACCESS_KEY -e SECRET_ACCESS_KEY -e NEXT_PUBLIC_USERPOOL_ID >> .env.production
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

and this is how I adedd my env vars to amplify: Here

Any idea what I'm doing wrong? Thanks in advance

0

There are 0 best solutions below