如何修改AWS Amplify默认登录/注册UI及实现ReactJS自定义UI

算力阿峰

2026-6-27

AWS Amplify React 自定义认证UI 指南

两种定制路径

根据需求不同，有两种主流定制方式：轻量修改默认UI，或完全从零实现自定义UI。

一、轻量定制：基于Amplify UI组件修改

如果只是调整样式、替换部分元素，无需完全重写，推荐用这种方式。

1. 覆盖默认CSS变量

Amplify UI提供了大量可自定义的CSS变量，直接在全局CSS或组件内覆盖即可：

/* 全局样式文件中添加 */
:root {
  --amplify-primary-color: #2563eb; /* 主色调 */
  --amplify-primary-tint: #3b82f6;
  --amplify-primary-shade: #1d4ed8;
  --amplify-font-family: 'Inter', sans-serif; /* 全局字体 */
}

2. 替换特定组件片段

通过Authenticator的components属性，替换认证流程中某个环节的子组件（比如登录按钮、标题、自定义字段）：

import { Authenticator, Button, Heading } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

function App() {
  // 自定义各阶段的组件
  const customComponents = {
    SignIn: {
      // 替换登录表单标题
      Header() {
        return <Heading level={2} className="custom-login-header">欢迎登录我的应用</Heading>;
      },
      // 替换登录按钮
      SubmitButton({ onClick, disabled }) {
        return (
          <Button
            onClick={onClick}
            disabled={disabled}
            style={{ backgroundColor: '#2563eb', borderRadius: '8px', padding: '10px 20px' }}
          >
            立即登录
          </Button>
        );
      }
    },
    SignUp: {
      // 替换注册表单的额外字段
      FormFields() {
        return (
          <>
            {/* 保留默认字段，添加自定义字段 */}
            <Authenticator.SignUp.FormFields />
            <div className="custom-field">
              <label>昵称</label>
              <input type="text" name="nickname" />
            </div>
          </>
        );
      }
    }
  };

  return (
    <Authenticator components={customComponents}>
      {({ signOut, user }) => (
        <main>
          <p>你好，{user.username}</p>
          <button onClick={signOut}>退出登录</button>
        </main>
      )}
    </Authenticator>
  );
}

支持替换的阶段包括：SignIn、SignUp、ForgotPassword、ConfirmSignUp等，每个阶段可替换的子组件对应Amplify UI的内置结构。

二、完全自定义UI：从零实现认证流程

如果需要100%自定义设计，直接调用Amplify Auth的底层API，自己构建表单和流程。

1. 基础步骤

确保已通过amplify add auth完成认证服务配置
导入Auth模块，调用对应的认证方法

2. 示例：自定义登录表单

import { useState } from 'react';
import { Auth } from 'aws-amplify';

function CustomLoginForm() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);
  const [errorMsg, setErrorMsg] = useState('');

  const handleLogin = async (e) => {
    e.preventDefault();
    setLoading(true);
    setErrorMsg('');
    try {
      // 调用Amplify登录API
      const user = await Auth.signIn(username, password);
      // 登录成功：更新应用状态或跳转页面
      console.log('登录成功', user);
    } catch (err) {
      // 捕获错误并提示用户
      setErrorMsg(err.message || '登录失败，请检查账号密码');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="custom-auth-form">
      <h3>用户登录</h3>
      {errorMsg && <div className="error-box">{errorMsg}</div>}
      <form onSubmit={handleLogin}>
        <div className="form-group">
          <label>账号/邮箱</label>
          <input
            type="text"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            required
            disabled={loading}
          />
        </div>
        <div className="form-group">
          <label>密码</label>
          <input
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            required
            disabled={loading}
          />
        </div>
        <button type="submit" disabled={loading} className="submit-btn">
          {loading ? '登录中...' : '登录'}
        </button>
      </form>
    </div>
  );
}

3. 其他核心认证API示例

注册账号

await Auth.signUp({
  username: 'user@example.com',
  password: 'StrongPassword123!',
  attributes: {
    email: 'user@example.com',
    phone_number: '+1234567890' // 可选，根据Auth配置决定
  }
});

确认注册验证码

await Auth.confirmSignUp('user@example.com', '123456');

忘记密码

// 发送验证码
await Auth.forgotPassword('user@example.com');
// 重置密码
await Auth.forgotPasswordSubmit('user@example.com', '123456', 'NewStrongPassword!');

最佳实践

错误处理：捕获Auth API返回的具体错误（如用户名重复、密码强度不够），给用户明确的提示，避免模糊的错误信息。
状态管理：用React Context或状态管理库（如Redux）统一管理用户登录状态，避免在多个组件中重复调用Auth.currentAuthenticatedUser()。
前端验证：提前做输入格式校验（如邮箱格式、密码长度），减少无效的后端请求。
样式统一：自定义UI时保持和应用整体设计风格一致，包括颜色、字体、间距、交互反馈。
安全规范：前端绝不存储用户密码等敏感信息，所有认证操作通过Amplify Auth API完成。
流程测试：覆盖所有认证场景（注册、登录失败、验证码错误、忘记密码），确保流程顺畅。

内容的提问来源于stack exchange，提问作者Surendhar S