Customizing the authentication experience of Amplify’s withAuthenticator.

This image increases engagement

Note: This article builds off of my first article, but if you’re already familiar with AWS Amplify you should be able to follow along.

When we left off, we implemented authentication into our app using aws-amplify-react’s withAuthenticator component. The result of this is that our app now has some basic login, register, and reset password screens.

Login

New Account

Reset Password

You’re probably going to want to change up these screens up, unless your app happens to use the same white and orange branding.

When I saw these screens, the first thing I wanted to change were the attributes required for new users. I want the user to enter their name so that the app can greet them when they login. I also don’t need to get a user’s phone number.

To make these changes we will first need to run

amplify update auth

When prompted select ‘No, I will set up my own configuration’, and keep on pressing enter to select the default value for each option. When asked ‘Do you want to specify the user attributes this app can read and write?’ say yes. From that list select the attributes that you want a user to enter on sign-up. For the purposes of this example I chose email and name.

After this you will have to run

amplify push

to save your changes in the cloud.

If you run your app you will noticed that the registered screen has not changed. In order to change the register screen you will have to add a parameter to withAuthenticator.

export default withAuthenticator(App, {
  signUpConfig: {
    hiddenDefaults: ["phone_number"],
    signUpFields: [
      { label: "Name", key: "name", required: true, type: "string" }
    ]
}});

Now we can see the name field added to our registration screen.

Our new sign up page

Next I wanted to add the ability of a user to login using their Google account. First we will have to create a Google Web Client ID. In order to complete this process we will have to run ‘amplify update auth’ again. This time you will want to answer yes when asked if you want to enable 3rd party authentication. Selected Google when you’re shown the list of providers. Paste in the Web Client ID when prompted. Now you run ‘amplify push’ again, but if you run your app you’ll see that, just like before, your login screen hasn’t been updated.

In order to add the Google sign in button you will have add the following lines in index.js .

const federated = {
  google_client_id: "your Google Web Client ID goes here"
};
ReactDOM.render(<App federated={federated} />,document.getElementById("root"));

Once you’ve added all these elements you will likely want to edit the style of the screens. You can change the style of the authentication screens by passing a theme object into withAuthenticator. Theme objects need to adhere to the following template. Attached below is a sample theme.

const MyTheme = {
  googleSignInButton: { backgroundColor: "red", borderColor: "red" },
  button: { backgroundColor: "green", borderColor: "red" },
  signInButtonIcon: { display: "none" }
};
export default withAuthenticator(App, false, [], null, MyTheme, {
  signUpConfig: {
    hiddenDefaults: ["phone_number"],
    signUpFields: [
      { label: "Name", key: "name", required: true, type: "string" }
    ]
  }
});

Our new-theme log in page

Another way to customize withAuthenticator is by using custom components. I will not dive into that here because Kyle Galbraith has already written a fantastic article on the topic.

Thanks for reading this article. If you have any questions or if this article helped I’d love to hear from you on twitter.