CODEWITHSUNDEEP
reactjsamazon-web-servicessessionamazon-cognito
sumanth shetty
sumanth shetty

Reputation: 2181

Error Username and Pool information required while using Cognito with react app

I am trying my hands on have a demo app on cognito with react. To try things out I am trying the code which is present in this git_repo

But I am getting the Error Username and Pool information required . Which I don't know why. I have a user pool and client id set up and using them in the code. While creating the app client I also uncheck the box Genereate client secret.

The line where the error point to is props.setSession(session);

import {
  AuthenticationDetails,
  CognitoUser,
  CognitoUserSession,
} from "amazon-cognito-identity-js";
import React, { useState } from "react";
import { useForm } from "react-hook-form";
import { useHistory } from "react-router-dom";
import userPool from "../aws/UserPool";

type FormData = {
  email: string;
  password: string;
};

type LoginProps = {
  setSession: React.Dispatch<React.SetStateAction<CognitoUserSession | null>>;
};

const Login = (props: LoginProps) => {
  const { register, handleSubmit, errors } = useForm<FormData>();
  const history = useHistory();
  const [errorMessage, setErrorMessage] = useState("");

  const onSubmit = handleSubmit((values) => {
    const user = new CognitoUser({
      Username: values.email,
      Pool: userPool,
    });

    const authenticationDetails = new AuthenticationDetails({
      Username: values.email,
      Password: values.password,
    });

    user.authenticateUser(authenticationDetails, {
      onSuccess: (session) => {
        console.log("Login successful");
        props.setSession(session);
        history.push("/");
      },

      onFailure: (err) => {
        console.error("Login failed", err);
        setErrorMessage(`An error occurred while logging in: ${err?.message}`);
      },
    });
  });

  return (
    <div>
      <p>
        Welcome to this sample application <br /> Login below.
      </p>

      <form onSubmit={onSubmit} className="form">
        <input name="email" placeholder="email" type="email" ref={register} />
        {errors.email && errors.email.message}

        <input
          name="password"
          placeholder="password"
          type="password"
          ref={register}
        />
        {errors.password && errors.password.message}

        <button type="submit">Login</button>

        {errorMessage}
      </form>
    </div>
  );
};

export default Login;

Can anyone help me out any steps that I am missing here?

Upvotes: 1

Views: 2357

Answers (1)

mango parade
mango parade

Reputation: 143

If you have a Cognito User Pool set up but haven't linked it to an Identity Pool, you'll get this.

How to Fix

  1. Create a Cognito Identity Pool (all defaults are fine)
  2. In the Authentication Providers for the Identity Pool, set the User Pool ID to your Cognito User Pool ID
  3. In the same section, set the App Client ID to your User Pools Web Client ID

You'll probably need to update your src/aws_exports.js with the following key:

"aws_cognito_identity_pool_id": "TheNewIdentityPoolID"

That's in addition to your other Amplify auth keys like:

"aws_user_pools_id": "UserPoolID",
"aws_user_pools_web_client_id": "WebClientId",
"oauth": {
  "domain": "domain",
  "redirectSignin": "http://localhost:4321",
  "redirectSignOut": "http://localhost:4321",
"

Upvotes: 0

Related Questions