reactjs - 在使用 @aws-amplify 和 react 时从自定义组件更改身份验证状态

Question

我正在尝试将 Amplify Auth 与 React 应用程序集成。

我正在使用 @aws-amplify/ui-react 包中的 AmplifyAuthenticator 来自定义身份验证流程。

虽然我可以使用 AmplifySignIn 组件并对其进行自定义，但我想创建一个完全自定义的而不是 AmplifySignIn。

以下是我的自定义组件的样子：

import React from 'react';
import { Auth } from 'aws-amplify';
import { useForm } from "react-hook-form";

export default function CustomSignIn(props){


    const { register, reset, errors, handleSubmit } = useForm();

    const onSubmit = async data => {
       
        await Auth.signIn(data.username, data.password);
       
    };

    return(
        <form className="mt-5" onSubmit={handleSubmit(onSubmit)} slot={props.slot}>
            <h4>Login</h4>
            <p>Need an account? <span>Create an account</span></p>

            <div className="form-group">
                <label>Email address</label>
                <input type="username" name="username" className="form-control" ref={register({required: true})}/>
            </div>
            <div className="form-group">
                <label>Password</label>
                <input type="password" name="password" className="form-control"  ref={register({required: true})}/>
            </div>
            <button type="submit" class="btn btn-primary btn-block">Continue</button>
        </form>
    );

}

以下是我尝试管理身份验证状态的方式：

import React, {useEffect} from 'react';
import { AmplifyAuthenticator } from '@aws-amplify/ui-react';
import '../styles/App.scss';
import { AuthState, onAuthUIStateChange } from '@aws-amplify/ui-components';
import ProtectedRoutes from './ProtectedRoutes';
import logo from '../assets/logo.svg';
import CustomSignIn from '../modules/auth/CustomSignIn';

function App() {

  const [authState, setAuthState] = React.useState();
  const [user, setUser] = React.useState();

  useEffect(() => {

      return onAuthUIStateChange((nextAuthState, authData) => {
          setAuthState(nextAuthState);
          setUser(authData)
      });

  }, []);

  
  return ( authState === AuthState.SignedIn && user ) 
  ? 
  (
    <ProtectedRoutes />
  ) 
  : 
  (
    <div className="container-fluid container-fluid--auth">
      <div className="row">
        <div className="col-md-8">
          <div className="row">
            <div className="col-12 py-3">
              <img className="logo" src={logo} alt="logo" />
            </div>
          </div>
          <div className="row">
            <div className="col-md-4 offset-md-4">
              <AmplifyAuthenticator>
                <CustomSignIn slot="sign-in" />
              </AmplifyAuthenticator>
            </div>
          </div>
        </div>
        <div className="col-md-4 col--auth-sidebar">

        </div>
      </div>
    </div>
  );

} 


export default App;

问题是，当用户单击登录页面上的“创建帐户”按钮时，我如何将用户带到注册页面？

标签： reactjsaws-amplifyaws-amplify-sdk-js