放大反应本机自定义登录

Question

我正在使用来自 AWS amplify 的 AWS

withAuthenticator

的

aws-amplify-react-native

组件。我可以为注册执行此操作

<SignUp signUpConfig={signUpConfig} />

，我想自定义登录、确认注册、忘记密码屏幕，而无需从头开始编写自己的组件。

signUp 配置似乎是可行的，因为

signUpConfig

是此类的一部分 https://github.com/aws-amplify/amplify-js/blob/master/packages/aws-amplify-react-native/src/Auth /SignUp.tsx#L47

但同样不适用于 singIn 和其他组件。是否有替代方案可以自定义登录、确认注册、忘记密码屏幕。

注意[1] - 我无法使用

Authenticator

的

aws-amplify-react-native

组件，注册屏幕显示在页面的一半上，显然它有渲染错误。

注[2] - 我也无法使用

Authenticator

中的

@aws-amplify/ui-react

，似乎它只为 React 而构建，不适用于 React-Native。尽管文档说它也适用于反应本机。

Answer 1

您必须使用 aws-amplify 中的

Auth

。我做了这样的事情。

/* Import the Amplify Auth API */
import { Auth } from 'aws-amplify';

export default function LoginScreen() {

   const login = async () => {
      if (validateInputFields(formData)) {
         try {
           await Auth.signIn(formData.email, formData.password);
           goToHomeScreen();
         } catch (err) { console.log({ err }); }
      }
   }

   return (
      <View>
         
         {/* Email and Password fields /*}

         <Button title="Login" onPress={() => login()} />
      </View>
   )
}

该文档也有用于注册的 API 👍

https://docs.amplify.aws/guides/authentication/custom-auth-flow/q/platform/js/

Answer 2

虽然我已经了解了您的需求，但我编写了一个详细的解决方案，使用 amplify v5 解决自定义工作流程，如下所示：

免责声明：我假设您已经在aws平台中设置了amplify和cognito。

import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import { Auth } from "aws-amplify";

const SlideAuth = () => {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [email, setEmail] = useState("");
const [error, setError] = useState(null);
const navigate = useNavigate();

const handleSignIn = async (event) => {
    event.preventDefault();
    if (username !== "" || password !== " ") {
      try {
        await Auth.signIn(username, password);
        // Redirect to dashboard after successful sign-in
        navigate("/dashboard");
      } catch (error) {
        setError(error.message);
      }
    }
};
 const handleSignUp = async (e) => {
    e.preventDefault();
    console.log({ email, username, password });
    try {
      const { user } = await Auth.signUp({
        username,
        password,
        attributes: { email },
      });
      console.log(user);
    } catch (error) {
      console.log("error signing up:", error);
    }
    reset();
  };

const reset = async () => {
    // await new Promise((resolve) => setTimeout(resolve, 2000));  --> to simulate delay
    setUsername("");
    setPassword("");
    setEmail("");
};

这些描述了启动和运行它所需的辅助方法。如果您计划执行确认流程，这有点棘手，因为将向您发送带有唯一代码的电子邮件。为了让您的用户能够确认他们是真人，请创建一个带有基本单个输入字段（可能是模式）的屏幕，允许用户在其中发布发送的唯一代码。确认逻辑如下：

  const confirmSignUp = async(username, code) => {
    try {
      const res = await Auth.confirmSignUp(username, code);
      console.log(res);
    } catch (error) {
      console.log("error confirming sign up", error);
    }
  }

下面描述一个基本形式：

  return (
    <div className="body-size">
      <div className="main">
        <input type="checkbox" id="chk" aria-hidden="true" />
        <div
          style={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <input
            type="button"
            value=" confirm email"
            style={{ display: "relative", top: "0", right: "0" }}
            onClick={() => confirmSignUp("spaco", "046488")}
          />
        </div>
        <div className="signup">
          <form onSubmit={handleSignUp}>
            <label htmlFor="chk" aria-hidden="true">
              Sign up
            </label>
            <input
              className="auth-input"
              type="text"
              name="username"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              placeholder="User name"
              required
            />
            <input
              className="auth-input"
              type="email"
              name="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="Email"
              required
            />
            <input
              className="auth-input"
              type="password"
              name="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              placeholder="Password"
              required
            />
            <button className="authBtn">Sign up</button>
            {error && <p className="error-message">{error}</p>}
          </form>
        </div>

        <div className="login">
          <form onSubmit={handleSignIn}>
            <label htmlFor="chk" aria-hidden="true">
              Login
            </label>
            <input
              className="auth-input"
              type="text"
              name="username"
              placeholder="username"
              value={username}
              onChange={(event) => setUsername(event.target.value)}
              required
            />
            <input
              className="auth-input"
              type="password"
              name="password"
              placeholder="Password"
              value={password}
              onChange={(event) => setPassword(event.target.value)}
              required
            />
            <button className="authBtn">Login</button>
          </form>
        </div>
      </div>
    </div>
  );
};

export default SlideAuth;