隐藏了用于 React 的 AWS Amplify 身份验证自定义 UI

Question

I'm trying to customize AWS Amplify Authentication UI. (just for sign up page)

I created React App using create-react-app to test Amplify, and I want to change sign-up form. I want sign-up form without phone number required, so I created 'MySignUp.jsx' which extends SignUp Component. However, when I clicked the sign up button, my sign up form was not displayed. I'm wondering why this happened and how to solve this.

Here is my App.js

import * as React from "react"
import logo from './logo.svg';
import './App.css';
import awsconfig from './aws-exports';

import Amplify from 'aws-amplify';

import {
  ConfirmSignIn,
  ConfirmSignUp,
  ForgotPassword,
  SignIn,
  VerifyContact,
  withAuthenticator,
} from "aws-amplify-react";
import MySignUp from './MySignUp';

Amplify.configure(awsconfig);

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default withAuthenticator(App,false, [
  <SignIn />,
  <ConfirmSignIn />,
  <VerifyContact />,
  <MySignUp override={'SignUp'} />,
  <ConfirmSignUp />,
  <ForgotPassword />,
])

Here is my MySignUp.jsx

import React from 'react';

import { Auth } from 'aws-amplify';
import {
    SignUp,
    FormSection,
    SectionHeader,
    SectionBody,
    SectionFooter,
    InputRow,
    ButtonRow,
    Link,
} from 'aws-amplify-react';

export default class MySignUp extends SignUp {

    signUp() {
        const { username, password, email } = this.inputs;
        const param = {
            username: username,
            password: password,
            attributes:{
                email: email,
            }
        }
        Auth.signUp(param)
            .then(() => this.changeState('confirmSignUp', username))
            .catch(err => this.error(err));
    }

    showComponent(theme) {
        const { hide } = this.props;
        if (hide && hide.includes(SignUp)) { return null; }

        return (
            <FormSection theme={theme}>
                <SectionHeader theme={theme}>{'Sign Up Account'}</SectionHeader>
                <SectionBody theme={theme}>
                <InputRow
                        autoFocus
                        placeholder={'Username'}
                        theme={theme}
                        key="username"
                        name="username"
                        onChange={this.handleInputChange}
                    />
                    <InputRow
                        placeholder={'Password'}
                        theme={theme}
                        type="password"
                        key="password"
                        name="password"
                        onChange={this.handleInputChange}
                    />
                    <InputRow
                        placeholder={'Email'}
                        theme={theme}
                        key="email"
                        name="email"
                        onChange={this.handleInputChange}
                    />
                    <ButtonRow onClick={this.signUp} theme={theme}>
                        {'Sign Up'}
                    </ButtonRow>
                </SectionBody>
                <SectionFooter theme={theme}>
                    <div style={theme.col6}>
                        <Link theme={theme} onClick={() => this.changeState('confirmSignUp')}>
                            {'Confirm a Code'}
                        </Link>
                    </div>
                    <div style={Object.assign({textAlign: 'right'}, theme.col6)}>
                        <Link theme={theme} onClick={() => this.changeState('signIn')}>
                            {'Sign In'}
                        </Link>
                    </div>
                </SectionFooter>
            </FormSection>
        )
    }
}

Answer 1

I have faced into the same problem. So what I did to get it works is removing this:

const { hide } = this.props;
        if (hide && hide.includes(SignUp)) { return null; }

Let me know if it works

Answer 2

The main reason is why you are inheriting from the SignUp class, and when you specify in the next block of code that your MySignUp component overwrites the SignUp component, you are inherently hiding the SignUp component.

export default withAuthenticator(App,false, [
  <SignIn />,
  <ConfirmSignIn />,
  <VerifyContact />,
  <MySignUp override={'SignUp'} />,
  <ConfirmSignUp />,
  <ForgotPassword />,
])

What the Authenticator component does is include it in the array of components to be hidden: https://github.com/aws-amplify/amplify-js/blob/master/packages/aws-amplify-react/src/Auth/Authenticator.tsx#L259

hide = hide.filter(
            component => !props_children.find(child => child.type === component)
        );

There are two options:

1. The first is to eliminate those lines of code, as @brian-nguyen has mentioned

    const { hide } = this.props;
        if (hide && hide.includes(SignUp)) { return null; }

2. The second is to modify them to include your own component as follows:

    const { hide } = this.props;
        if (hide && hide.includes(MySignUp)) { return null; }

I hope this is helpful!!!