Cognito integration into React Website causes blank page and Uncaught Error-CodePudding

I am trying to integrate Cognito authentication which is causing a blank page and the following error:

Uncaught Error: Both UserPoolId and ClientId are required.
    CognitoUserPool CognitoUserPool.js:35
    js UserPool.js:9
    factory react refresh:6
    Webpack 15

I created a UserPool.js file that contains the following:

import { CognitoUserPool } from "amazon-cognito-identity-js";
const poolData = {

    UserPoolID: process.env.COGNITO_USER_POOL,
    ClientId: process.env.COGNITO_USER_CLIENT,
} 
export default new CognitoUserPool(poolData);

I'm testing user account creation, so I imported it into my Register.js:

import React, { useState } from "react";
import UserPool from "../UserPool";

export const Register = () => {
  const history = useNavigate();
  const [userData, setUserData] = useState({
    name: "",
    email: "",
    password: "",
    password2: "",
  });
  //submit data to the backend
    const handleSubmit = (event) => {
      event.preventDefault();
      UserPool.Register(userData)

      if (userData.name && userData.email && userData.password) {
        if (userData.terms) {
          if (userData.password === userData.password2) {
            axios
              .post(`www.url.com`, userData)
              .then((res) => {
                redirectToCompleted();
              })

I've tried without referencing the environment variables in the UserPool.js, but that gave me the same error as above. I also added import UserPool from "../UserPool"; in app.js, but that gives me a 'UserPool' is defined but never used no-unused-vars and 'pool_region' is assigned a value but never used no-unused-vars warnings.

So I'm unsure what I'm missing. Any help you can provide would be greatly appreciated.

CodePudding user response：

You are providing ClientId incorrectly to Cognito. The docs and the error message are both suggesting to use ClientId instead of userPoolWebClientId

So instead of this

const poolData = {

    UserPoolID: process.env.COGNITO_USER_POOL,
    userPoolWebClientId: process.env.COGNITO_USER_CLIENT,
}

try this:

const poolData = {

    UserPoolID: process.env.COGNITO_USER_POOL,
    ClientId: process.env.COGNITO_USER_CLIENT,
}

CodePudding user response：

The solution was simple....

UserPoolId instead of UserPoolID