es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Amplify UI no funciona correctamente en React js.

18 Jul, 2023 Programación

Estoy utilizando AWS Amplify para la autenticación de usuarios. La interfaz de usuario no es la esperada, pero no hay problema con la funcionalidad.

Amplify dependencies

"dependencies": {
    "@aws-amplify/ui-react": "^2.1.4",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "aws-amplify": "^4.3.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  }

Mi app.js

import logo from "./logo.svg";
import "./App.css";
import Amplify from "aws-amplify";
import awsconfig from "./aws-exports";
import { withAuthenticator } from "@aws-amplify/ui-react";
Amplify.configure(awsconfig);

function App() {
  return (
    <div classname="App">
      <header classname="App-header">
        {/* <amplifysignout></amplifysignout> */}
        <h2>Amplify App</h2>
      </header>
    </div>
  );
}

export default withAuthenticator(App);
Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Basándonos en la información proporcionada, parece que el problema está en la interfaz de usuario de la autenticación del usuario en lugar de en su funcionalidad. Las dependencias para AWS Amplify y @aws-amplify/ui-react también se proporcionan en el archivo app.js.

    Para personalizar la interfaz de usuario, puedes utilizar los Componentes de UI de Amplify proporcionados por @aws-amplify/ui-react. Estos componentes se pueden importar y usar en tu aplicación según sea necesario. Por ejemplo, para personalizar el formulario de registro, puedes importar el componente SignUp y renderizarlo en tu aplicación con las props requeridas:

    import { SignUp } from '@aws-amplify/ui-react';

function App() {
  return (
    <div classname="App">
      <header classname="App-header">
        <h2>Aplicación de Amplify</h2>
        <signup headertext="Crea una nueva cuenta" signupbuttontext="Registrarse" usernamealias="correo electrónico"></signup>
      </header>
    </div>
  );
}

export default withAuthenticator(App);

    En el ejemplo anterior, el componente SignUp se importa y se renderiza con las props headerText, signUpButtonText y usernameAlias. Estas props se pueden utilizar para personalizar la interfaz de usuario del formulario de registro.

    De manera similar, puedes utilizar otros Componentes de UI de Amplify para personalizar la interfaz de usuario de otros flujos de autenticación como inicio de sesión, restablecimiento de contraseña, etc.

    En general, con la ayuda de los Componentes de UI de Amplify, puedes personalizar fácilmente la interfaz de usuario de tus flujos de autenticación de usuarios según tus requisitos.

Comments are closed.