Cognito's Complete New Password using Amplify + React

gistfile1.txt

import React, { useState, useEffect } from "react";
import Auth from "@aws-amplify/auth";
import useNotification from "hooks/useNotification";
const URLSearchParams = require("url-search-params");

import { useHistory } from "react-router-dom";

const CompleteNewPassword = props => {
  const history = useHistory();

  const [currentUser, setCurrentUser] = useState(null);
  const [password, setPassword] = useState();
  const [passwordVerify, setPasswordVerify] = useState();

  const [loading, setLoading] = useState(true);
  const { showSuccessNotification, showErrorNotification } = useNotification();

  const getRawUsername = () => {
    const url = new URL(document.URL);
    const username = url.search
      .replace("?", "")
      .split("&")
      .map(kv => {
        const [key, value] = kv.split("=");
        return { key, value };
      })
      .find(({ key }) => key === `username`);
    return username.value;
  };

  useEffect(() => {
    let params = new URLSearchParams(location.search);
    const email = getRawUsername();
    const pass = params.get("code");

    if (!email || !pass) return;

    Auth.signIn(email, pass)
      .then(results => {
        if (results.challengeName !== `NEW_PASSWORD_REQUIRED`) {
          history.push("/sign-in");
        }

        setCurrentUser(results);
        setLoading(false);
      })
      .catch(error => {
        showErrorNotification(error.message);
        setLoading(false);
      });
  }, []);

  const handleCompleteNewPassword = async e => {
    e.preventDefault();

    if (!password) return;
    if (password.length < 8) {
      showErrorNotification(
        `Please make your password a minimum of 8 characters.`
      );
      return;
    }

    if (password !== passwordVerify) {
      showErrorNotification(`Passwords do not match.`);
      return;
    }

    setLoading(true);

    try {
      await Auth.completeNewPassword(currentUser, password);
      showSuccessNotification(`Your password has been set.`);
      history.push("/");
    } catch (error) {
      console.log(error);
      showErrorNotification(error.message ?? error);
    }

    setLoading(false);
  };

  if (loading) return <div>Loading...</div>;

  return (
    <form
      onSubmit={handleCompleteNewPassword}
      className="w-1/2 flex flex-col items-start"
    >
      <svg
        className="w-6 h-6 text-gray-800"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth={2}
          d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
        />
      </svg>

      <h2 className="text-2xl text-gray-800 mb-1 font-semibold">
        Please set your password
      </h2>

      <p className="text-sm text-gray-700 italic mb-6">
        Minimum of 8 characters, stronger is better
      </p>

      <input
        className="px-4 py-3 rounded shadow block mb-4 w-full text-gray-700 outline-none focus:shadow-outline"
        style={{ maxWidth: "400px" }}
        type="password"
        placeholder="Enter a password"
        onChange={e => setPassword(e.target.value)}
        required
      />

      <input
        className="px-4 py-3 rounded shadow block mb-8 w-full text-gray-700 outline-none focus:shadow-outline"
        style={{ maxWidth: "400px" }}
        type="password"
        placeholder="Confirm your password"
        onChange={e => setPasswordVerify(e.target.value)}
        required
      />

      <input
        className="py-3 px-6 text-lg rounded bg-teal-600 hover:bg-teal-700 text-white cursor-pointer"
        type="submit"
        value={loading ? "Loading..." : "Set password"}
      />
    </form>
  );
};

export default CompleteNewPassword;