8 New features in the Amplify Authenticator for web you should try

This post is written by Erik Hanchett who works at AWS Amplify.

Last year, we launched a new redesigned version of our Amplify Authenticator for React, Vue, and Angular (read our launch blog post here). The new Authenticator allows you to add a login experience to your app with a single line of code. It addresses major customer feedback on degrees of customizability, accessibility, and a tight integration with Amplify CLI and Amplify Studio. Since then we’ve been working hard to improve the Authenticator to make it even more customizable. We’re excited to show you 8 new features we’ve launched recently, and how you can use them in your application today!

If you are new to Amplify and would like to follow along with any of the examples below, make sure to follow our Quick start guide first. All examples are in React, however you can use them with Vue and Angular as well.

1. Easily customize form fields and sign up order

When working with form fields, you’ll often want to change the content, labels, and placeholders of them. You can do this by adding a new formFields prop to your Authenticator component. In this example, we set the label, placeholder, and required field of the sign in username field.

const formFields = {
  signIn: {
    username: {
      labelHidden: false,
      placeholder: 'Enter your username here',
      isRequired: true,
      label: 'Username:'
    },
  },
}

export default function App() {
  return (
    <Authenticator formFields={formFields}>
      {({ signOut }) => <button onClick={signOut}>Sign out</button>}
    </Authenticator>
  );
}

We’ve also made it straightforward to change the order of the sign up form fields. Maybe you’ll want the password and confirm password at the bottom instead at the top. With the new formFields prop you can now add an order key to the field object within the component defined in formFields.

const formFields = {
   signUp: {      // component
     email: {     // field object
       order: 1   // order key
     },
     family_name: {
       order: 2
     },
     preferred_username: {
       order: 4
     },
     birthdate: {
       order: 3
     },
     password: {
       order: 5
     },
     confirm_password: {
       order: 6
     }
   },
  }

export default function App() {
  return (
    <Authenticator formFields={formFields}>
      {({ signOut }) => <button onClick={signOut}>Sign out</button>}
    </Authenticator>
  );
}

2. Headless hooks to customize your UI

Sometimes when working with the Authenticator you might find an advanced use case that it doesn’t support. For example, let’s say you want to show the logged in user information on several different routes. Or you want to add an extra button that transitions to the forgot password page.

The useAuthenticator hook, provides a way to access, modify and update the Authenticator’s state. You’ll have access to the user object, transitions and error states. With this hook, you’ll be able to break out of the confines of the Authenticator, to build a more custom user experience.

Here is an example using custom buttons to change the Authenticator state:

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

export default function AuthenticatorWithEmail() {
  
  const { toResetPassword, toSignUp, toSignIn } = useAuthenticator(
    ({ toSignUp, toResetPassword, toSignIn }) => [
      toSignUp,
      toResetPassword,
      toSignIn,
    ]
  );
  
  return (
    <>
      <Authenticator>
        {({ signOut }) => <button onClick={signOut}>Sign out</button>}
      </Authenticator>
      <Flex
	  	justifyContent="center"
		marginTop="2rem"
      >
        <Button onClick={toResetPassword}>Forgot Password Page</Button>
        <Button onClick={toSignIn}>Sign In Password Page</Button>
        <Button onClick={toSignUp}>Sign Up Password Page</Button>
      </Flex>
    </>
  );
}

The useAuthenticator hook is also available in Vue as a composable and Angular as a service.

3. Built-in password strength support

When a user creates a new account, they’ll need to set a password and then confirm it. The Authenticator now shows the password complexity requirements as the user types. This in incredibly helpful for the end user so they can make sure their password meets complexity requirements before they submit the form.

This new feature is built in, and requires no additional changes, or props.

4. Function calls to override default behavior

Occasionally, when using the Authenticator you’ll need access to the underlining JavaScript methods that call some of the common Auth APIs. This could include sign up, sign in, or forgot password.

The Authenticator now supports function call overrides. This gives you the ability to customize what data is being sent to the backend, with an easy to use service prop.

For example, you may want to lowercase the username and email when a user signs up as shown below.

export default function AuthenticatorWithEmail() {

  const services = {
    async handleSignUp(formData) {
      let { username, password, attributes } = formData;
      // custom username
      username = username.toLowerCase();
      attributes.email = attributes.email.toLowerCase();
      return Auth.signUp({
        username,
        password,
        attributes,
      });
    },
  };

  return (
    <Authenticator services={services} initialState="signUp">
      {({ signOut }) => <button onClick={signOut}>Sign out</button>}
    </Authenticator>
  );
} 

5. Easily hide sign up UI

A common use case we’ve heard often is removing the sign up tab from the Authenticator. This is now possible with our new hideSignUp prop! After adding this new property users will only be able to sign in, and not sign up.

Let’s imagine a scenario where you need to manually sign up users. In this case, you could add our new hideSignUp prop to the Authenticator to prevent your customers from signing themselves up as seen below.

export default function App() {
  return (
    <Authenticator
      hideSignUp={true}
    >
      {({ signOut }) => <button onClick={signOut}>Sign out</button>}
    </Authenticator>
  );
}

Then log into Amplify Studio and click the User Management link to add the user manually.

6. Bundle size improvements

Reducing the bundle size of our Authenticator is very important to us. As we’ve added more features we’ve seen the bundle size steadily increase. To help with this problem, we’ve add in a new build process for our React bundle that has added in tree shaking. This drastically reduced the bundle size of our packages by over 50% or more for some bundlers!

We are continually focused on keeping our bundle sizes smaller, so expect more continuous improvements in this area in the future.

7. Customizing the style to match your brand

Did you know you can completely customize the look and feel of the Authenticator using an Theme Provider component? This feature, only available for React, gives you the option to create a theme object, where you can set all the primary colors, fonts, spacing and more! You then pass that theme object to the Theme Provider, that surrounds your app and you are good to go!

Let’s say one of your brand colors is green, and you want the Authenticator to match. Let’s take a look at how that could be done!

import {
  Authenticator,
  ThemeProvider,
  Theme,
  defaultTheme,
} from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

export function AuthStyle() {
  const { tokens } = defaultTheme;
  
  const theme: Theme = {
    name: 'Auth Example Theme',
    tokens: {
      colors: {
        brand: {
          primary: {
            '10': tokens.colors.green['10'],
            '20': tokens.colors.green['20'],
            '40': tokens.colors.green['40'],
            '60': tokens.colors.green['60'],
            '80': tokens.colors.green['80'],
            '90': tokens.colors.green['90'],
            '100': tokens.colors.green['100'],
          },
        },
      },
    },
  };
 

  return (
    
      
        {({ signOut }) => Sign out}
      
    
  );
}

Let’s say you want to use CSS instead, or you’re using Angular or Vue. You can add a CSS selector and update the brand color CSS variables directly instead.

:root {
  --amplify-colors-brand-primary-10: var(--amplify-colors-green-10);
  --amplify-colors-brand-primary-20: var(--amplify-colors-green-20);
  --amplify-colors-brand-primary-40: var(--amplify-colors-green-40);
  --amplify-colors-brand-primary-60: var(--amplify-colors-green-60);
  --amplify-colors-brand-primary-80: var(--amplify-colors-green-80);
  --amplify-colors-brand-primary-90: var(--amplify-colors-green-90);
  --amplify-colors-brand-primary-100: var(--amplify-colors-green-100);
}

Don’t forget Amplify also provides a feature rich component system, that you get for free whenever you import in our React library. Since our Authenticator is built with those components, customizing them is the same for both!

8. Six new default languages

Since our launch we’ve had many external contributors reach out to us helping with translations. We’ve been able to add translations for Polish, Portuguese, Korean, Dutch, Swedish, and Indonesian! Thanks to everyone internally, and externally who have helped with this effort.

In addition, we added translations for error messages too. The Authenticator can now translate any text, anywhere in the application. Head to the docs for more information.

Conclusion

We hope these 8 new features of the Amplify Authenticator will help you build authenticated applications easier. We are constantly making improvements to Amplify UI and the Authenticator and listening to feedback for how to make them better. We’d love to hear your feedback on our GitHub repository. For more information on Amplify UI, head to our docs site.