aws-amplify-auth-alt

import React, { Fragment } from 'react';
import { Auth, API } from 'aws-amplify';

export default class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: '',
      email: '',
      password: '',
      user: null,
      isAuthenticated: false,
      isAuthenticating: false,
      oldPassword: '',
      newPassword: '',
    };
  }

  handleChange = (key) => (e) => {
    this.setState({
      [key]: e.target.value,
    });
  }

  handleLogin = async (e) => {
    e.preventDefault();
    const { email, password } = this.state;
    try {
      await this.setState({ isAuthenticating: true });
      const user = await Auth.signIn(email, password);
      await this.setState({ user, isAuthenticated: true, isAuthenticating: false, password: '' });
      console.log('login successful', user);
    } catch (err) {
      console.error('login failed', err);
    }
  }

  handleChangePassword = async (e) => {
    e.preventDefault();
    try {
      if (this.state.user === null) {
        throw new Error('user is null');
      }
      await Auth.changePassword(this.state.user, this.state.oldPassword, this.state.newPassword);
      console.log('change password successful');
      await this.setState({ isAuthenticated: false });
    } catch (err) {
      console.error('something in change password failed', err);
    }
  }

  handleLogout = async (e) => {
    e.preventDefault();
    console.log('handleLogout', e);
    try {
      await Auth.signOut();
      await this.setState({ isAuthenticated: false });
      console.log('logout successful');
    } catch (err) {
      console.error('logout failed', err);
    }
  }

  render() {
    return (
      <div>
        <form>
          {
            !this.state.isAuthenticated
            ? (
              <Fragment>
                <label htmlFor="email">
                  Email
                  <input
                    id="email"
                    name="email"
                    type="email"
                    defaultValue={this.state.email}
                    value={this.state.email}
                    onChange={this.handleChange('email')}
                  />
                </label>
                <label htmlFor="password">
                  Password
                  <input
                    id="password"
                    name="password"
                    type="password"
                    defaultValue={this.state.password}
                    value={this.state.password}
                    onChange={this.handleChange('password')}
                  />
                </label>
                <input
                  name="submit"
                  type="submit"
                  value="Login"
                  onClick={this.handleLogin}
                />
                { this.state.isAuthenticating ? (<span>Authenticating...</span>) : null }
              </Fragment>
            )
            : (
              <Fragment>
                <div>
                  <label htmlFor="old-password">
                      OldPassword
                    <input
                      id="old-password"
                      name="old-password"
                      type="password"
                      defaultValue={this.state.oldPassword}
                      value={this.state.oldPassword}
                      onChange={this.handleChange('oldPassword')}
                    />
                  </label>
                  <label htmlFor="new-password">
                      NewPassword
                    <input
                      id="new-password"
                      name="new-password"
                      type="password"
                      defaultValue={this.state.newPassword}
                      value={this.state.newPassword}
                      onChange={this.handleChange('newPassword')}
                    />
                  </label>
                  <input
                    name="submit"
                    type="submit"
                    value="Change Password"
                    onClick={this.handleChangePassword}
                  />
                </div>
                <div>
                  <input
                    name="submit"
                    type="submit"
                    value="Logout"
                    onClick={this.handleLogout}
                  />
                </div>
              </Fragment>

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