Настройте AWS для усиления с помощью пользовательского интерфейса Authenticator в React Native

Question

Как настроить AWS по умолчанию с помощью интерфейса аутентификатора?Я хочу либо скрыть, либо удалить Phone Number поле и добавить пользовательские цвета и отступы.Также хочу переместить всю форму в нижнюю часть экрана с помощью React Native keyboardAvoidingView.

Настроить аутентификацию с AWS-усилением было очень быстро, но, похоже, сложно настроить способ, которым я хочу обозначитьи войдите в опыт.

import React from 'react';
import Root from './src/components/Root/Root';
import { withAuthenticator } from 'aws-amplify-react-native';
import Amplify from 'aws-amplify';
import aws_exports from './aws-exports';
Amplify.configure(aws_exports);

class App extends React.Component {
  render() {
    return <Root />;
  }
}

export default withAuthenticator(App);

Как видите, настроить его очень быстро, но пользовательский интерфейс по умолчанию не может использоваться, если вы не можете добавить к нему собственный стиль.

Answer 1

Добавить

@import '../src/theme/variables.scss';

в конце

src / global.scss

Answer 2

У вас есть две проблемы: 1. Какие поля необходимы для аутентификации \ регистрации?

Для этого вам необходимо изменить настройки вашего пула пользователей.Войдите в консоль AWS, перейдите в Cognito и управляйте пользовательскими пулами.Создайте новый пул и укажите, как вы хотите, чтобы ваши пользователи входили в систему и включали / отключали MFA.

Я предполагаю, что большинство пользователей хотят только электронную почту иMFA отключен.

После этого удалите пул пользователей в настройках входа в Mobile Hub и импортируйте этот новый пул пользователей в настройки входа в приложении Mobile Hub.

Как настроить размещенный пользовательский интерфейс аутентификации AWS Amplify?

Чтобы настроить стили и сохранить экраны, вы можете применить свою собственную тему к <Authenticator>

import MyTheme from './MyTheme';
<Authenticator theme={MyTheme} />

ИВы можете импортировать детали по умолчанию и переопределять детали

import { AmplifyTheme } from 'aws-amplify-react';
const MySectionHeader = Object.assign({}, AmplifyTheme.sectionHeader, { background: 'orange' });
const MyTheme = Object.assign({}, AmplifyTheme, { sectionHeader: MySectionHeader });

<Authenticator theme={MyTheme} />

Все это и многое другое в Документах для настройки темы пользовательского интерфейса Amplify .

Другой вариант - создать свой аутентификатор.экраны и вызовите Auth.SignIn \ Up \ Out со своих пользовательских экранов, что также обсуждается в этой ссылке на документы.