4

How do I customize default AWS with Authenticator UI? I want to either hide or remove Phone Number filed and add custom colors and padding. Also want to move the entire form to the bottom of the screen with React Native's keyboardAvoidingView.

It was super fast to set authentication with AWS amplify but seems to be challenging to customize the way I want for the sign up and sign in experience. 

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);

As you can see, it's super fast to set it up but the default UI is not usable unless you can add custom style to it.

enter image description here

Skate to Eat
  • 2,554
  • 5
  • 21
  • 53

3 Answers3

1

You have two concerns here: 1. What fields are required to Authenticate \ Sign Up?

To do this, you need to change the settings of your User Pool. Login to AWS Console, go to Cognito and Manage User Pools. Create a new pool and specify how you want your users to sign in and enable\disable MFA.

How do you want your end users to sign in?

My guess is Most peple want Email Only and MFA disabled.

After that, delete the User Pool in your Mobile Hub Sign In settings and import this new user pool into your Mobile Hub Application's Sign In settings.

Mobile Hub User sign-in Settings -- Actions

  1. How to customize the AWS Amplify hosted Authentication UI?

To customize the Styles and keep the screens you can apply your own theme to <Authenticator>

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

And you can import the default and override parts

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

<Authenticator theme={MyTheme} />

All this and more in the Docs for Customizing Amplify UI Theme.

The other option is to build your auth screens and call Auth.SignIn\Up\Out from your custom screens which is also discussed in that docs link.

Patrick
  • 2,044
  • 1
  • 25
  • 44
  • the above code does not seem to change the styling when I put the background: ''red'' it stays orange !!!. – Dr. Younes Henni Nov 18 '18 at 12:57
  • same case with me as well, any suggestions ? – Waleed Mohsin May 06 '19 at 19:07
  • The customization of the Auth that is configurable on the AWS console is only the hosted WEB UI. Any App UI will need to be customized in the App itself directly. I assume this will change over-time, but it was this way last I looked. – Patrick May 10 '19 at 20:09
0

If you want to change the UI then you must override properties defined in AmplifyTheme.ts.

So, you need to overwrite UI properties like this:


const MyTheme = Object.assign({}, AmplifyTheme, {
  button: {
    ...AmplifyTheme.button,
    backgroundColor: "#2fbafa",
  },
});

export default withAuthenticator(App, false, [], null, MyTheme);

The above code should work and you can change the default UI.

Harsh Mishra
  • 862
  • 3
  • 15
  • 29
-1

Add

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

at the end of

src/global.scss

Waleed Mohsin
  • 1,103
  • 1
  • 10
  • 13