Example how to use 'amazon-cognito-identity-js'

index.tsx

import {
  CognitoUserPool,
  CognitoUserAttribute,
  CognitoUser,
  AuthenticationDetails,
  CognitoUserSession,
  CodeDeliveryDetails,
} from 'amazon-cognito-identity-js';
import React, { FC, useState } from 'react';

const userPool = new CognitoUserPool({
  UserPoolId: 'eu-central-1_...',
  ClientId: '...',
});

const SignUp: FC = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();

        const attributeList = [
          new CognitoUserAttribute({
            Name: 'email',
            Value: email,
          }),
        ];

        userPool.signUp(
          email,
          password,
          attributeList,
          null as any, // can be null - typings are wrong
          (err, result) => {
            if (err) {
              console.log(err);
              return;
            }
            console.log('user name is ' + result!.user.getUsername());
            console.log('call result: ' + result);
          }
        );
      }}
    >
      <input
        autoComplete="email"
        type="text"
        value={email}
        placeholder="Email"
        onChange={(e) => setEmail(e.currentTarget.value)}
      />
      <input
        type="password"
        value={password}
        placeholder="Password"
        onChange={(e) => setPassword(e.currentTarget.value)}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

const SignIn: FC = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();

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

        const cognitoUser = new CognitoUser({
          Username: email,
          Pool: userPool,
        });

        cognitoUser.authenticateUser(authenticationDetails, {
          onSuccess(result) {
            console.log('onSuccess', result);

            const accessToken = result.getIdToken().getJwtToken();
            cognitoUser.getSession(
              (err: unknown, session: CognitoUserSession) => {
                if (err) {
                  console.log('getSession: error', result);
                } else {
                  console.log('getSession: session', session);
                }
              }
            );
          },
          onFailure(error) {
            console.log('onFailure', error);
          },
        });
      }}
    >
      <input
        autoComplete="email"
        type="text"
        value={email}
        placeholder="Email"
        onChange={(e) => setEmail(e.currentTarget.value)}
      />
      <input
        type="password"
        value={password}
        placeholder="Password"
        onChange={(e) => setPassword(e.currentTarget.value)}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

const ForgotPassword: FC = () => {
  const [email, setEmail] = useState('');
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();

        const cognitoUser = new CognitoUser({
          Username: email,
          Pool: userPool,
        });

        cognitoUser.forgotPassword({
          onSuccess(data: { CodeDeliveryDetails: CodeDeliveryDetails }) {
            console.log('onSuccess: forgotPassword', data);
          },
          onFailure(error) {
            console.log('onFailure: forgotPassword', error);
          },
        });
      }}
    >
      <input
        autoComplete="email"
        type="text"
        value={email}
        placeholder="Email"
        onChange={(e) => setEmail(e.currentTarget.value)}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

const ResetPassword: FC = () => {
  const [email, setEmail] = useState('');
  const [code, setCode] = useState('');
  const [password, setPassword] = useState('');
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();

        const cognitoUser = new CognitoUser({
          Username: email,
          Pool: userPool,
        });

        cognitoUser.confirmPassword(code, password, {
          onSuccess() {
            console.log('onSuccess: confirmPassword');
          },
          onFailure(error) {
            console.log('onFailure: confirmPassword', error);
          },
        });
      }}
    >
      <input
        autoComplete="email"
        type="text"
        value={email}
        placeholder="Email"
        onChange={(e) => setEmail(e.currentTarget.value)}
      />
      <input
        type="text"
        value={code}
        placeholder="Verification code"
        onChange={(e) => setCode(e.currentTarget.value)}
      />
      <input
        type="password"
        value={password}
        placeholder="Password"
        onChange={(e) => setPassword(e.currentTarget.value)}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

const App: FC = () => {
  return (
    <>
      <h1>Home Page!</h1>

      <h2>Sign up</h2>
      <SignUp />

      <h2>Sign in</h2>
      <SignIn />

      <h2>Sign out</h2>
      <button
        onClick={() => {
          const cognitoUser = userPool.getCurrentUser();

          if (cognitoUser) {
            cognitoUser.signOut();
          }
        }}
      >
        Sign out
      </button>

      <h2>Forgot password</h2>
      <ForgotPassword />

      <h2>Reset password</h2>
      <ResetPassword />
    </>
  );
};