CODEWITHSUNDEEP
react-nativeaws-mobilehubaws-amplify
Skate to Eat
Skate to Eat

Reputation: 2834

Customize AWS amplify withAuthenticator UI on React Native

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

Upvotes: 4

Views: 4659

Answers (3)

Harsh Mishra
Harsh Mishra

Reputation: 978

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.

Upvotes: 0

Waleed Mohsin
Waleed Mohsin

Reputation: 1133

Add

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

at the end of

src/global.scss

Upvotes: -1

Patrick
Patrick

Reputation: 2247

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.

Upvotes: 1

Related Questions