5 New Features For Amplify UI and Studio You Should Try Today

For the last two years I've been working as a front-end engineer on the AWS Amplify UI team. On that team I saw the creation of the Authenticator component for Vue, React and Angular. We created a components library for React and a complete theming system as well. It was a very busy two years!

At the end of last year we launched several new exciting features! In this post I'll be going over each new feature we've recently launched, and how it can benefit you.

Please, follow me on Twitter at ErikCH for more updates on new Amplify features and if you have any questions!

If you're new to Amplify and stumbled on the blog post, welcome! Feel free to check out my last post on Getting Started with Auth!

As of this writing the Account Settings, File Uploader, and React Native Authenticator features are all in developer preview.

1. Account Settings

The Account Settings connected component adds a straight forward way to change settings for users. For the preview launch we targeted deleting users and changing passwords for logged in users.

Imagine a user is signed in and wants to delete their account. The Account Settings component can be added into any page to add this functionality in.

import React from 'react';
import { AccountSettings } from '@aws-amplify/ui-react';

function App() {
  const handleSuccess = () => {
    alert('user has been successfully deleted')
  }

  return (
    <AccountSettings.DeleteUser onSuccess={handleSuccess} />
  );
}

Another common scenario is for users to change their account password, after signing in. The change password component can be added in with a few lines of code.

import React from 'react';
import { AccountSettings } from '@aws-amplify/ui-react';

function App() {
  const handleSuccess = () => {
    alert('password is successfully changed!')
  }

  return (
    <AccountSettings.ChangePassword onSuccess={handleSuccess}/>
  );
}

Each of these components can be completly overriden and customized.

2. File Uploader

Uploading files to S3 has never been more straight forward than with the File Uploader connected component. This component adds a way to upload files to S3 by drag-and-drop or by clicking the Browse files button.

import { FileUploader } from '@aws-amplify/ui-react'; 

import '@aws-amplify/ui-react/styles.css'

export const DefaultFileUploaderExample = () => {
  return (

    <FileUploader
      acceptedFileTypes={['image/*']}
      accessLevel="public"
    />

  );
};

A file preview window will appear after a file is selected to allow for renaming, adding or removing files if needed.

As with many of our other connected components, we have included an extensive API that includes many ways to customize the File Uploader experience including limits on max number of files, max size, resuming of files, displaying image preview, and a lot more!

3. React Native Support For Authenticator

The Authenticator component adds a complete authentication flow to your application with minimal boilerplate. What that means is you can add the Authenticator to your application, and get a sign in, sign up, and federated identities all with a few lines of code!

This component is now in developer preview for React Native. Like our other implementations of the Authenticator for web, we have included in React Native the same rich set of API configurations and settings. This includes changing sign up attributes, login mechanisms, and headless usage with sub component overrides! Sub component overrides just means that you can override any component inside the Authenticator to customize it to your liking.

import React from 'react';
import { Button } from 'react-native';

import { Amplify } from 'aws-amplify';
import {
  useAuthenticator,
  withAuthenticator,
} from '@aws-amplify/ui-react-native';

import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

function SignOutButton() {
  const { signOut } = useAuthenticator();
  return <Button onPress={signOut} title="Sign Out" />;
}

function App() {
  return <SignOutButton />;
}

export default withAuthenticator(App);

4. Form Builder

A common use case in web development is creating forms and connecting those forms to backend data sources. The Amplify Studio's Form Builder makes this chore a snap.

With Form Builder you can connect any data model, any JSON object, or create forms from scratch using our visual builder.

Let's imagine you want to create a form with a JSON object. You can paste the object into the builder and it will generate the form.

{
  "basics": {
    "firstName": "Wesley",
    "emailAddress": "wpeck@amazon.com"
  },
  "favoriteThings": {
    "animals": ["Cats", "Snakes", "Quokka"],
    "month": "December",
    "number": 17
  },
  "active": true,
  "enabled": false
}

You can then download the form into your project, by using the Amplify Pull command. We auto generate all the code for you using our Amplify UI Components library. You can then connect this form anywhere you want in your application.

5. Data Management

Inside Amplify Studio, we added a new Data Management view. This gives you a tabular view of the backend data for an application.

This can be used by technical and non-technical team members the abality to create and update an applications data in real-time instead of building admin views.

I find this feature particularly helpful to seed my database for testing purposes, which is another feature of the Data Management view.

Bonus

One of our biggest launches recently is the addition of Next 12, 13 with SSR and ISR support for Amplify Hosting.

We now support API routes, middleware, and image optimization! We've also improved hosting with faster builds, Amazon Cloudwatch integration with a better fully managed hosting infrastructure.

Conclusion

We've been working hard on adding more features that you want! If you have an idea for a feature or a bug that needs fixing, add an issue.