This is the third article of my series "Amplify Adventures". If you want to read the other articles:

What is Amplify Auth?

Amplify Auth is a robust authentication service provided by AWS Amplify. It offers a comprehensive set of features and tools that simplify the implementation of authentication workflows in modern applications. By leveraging Amplify Auth, developers can save valuable time and effort by focusing on building core features and functionalities rather than dealing with the complexities of authentication.

Advantages

Seamless Integration with AWS Amplify

Amplify Auth seamlessly integrates with AWS Amplify, a development platform that simplifies building scalable and secure cloud-powered applications. With a few simple steps, developers can configure and deploy Amplify Auth within their Amplify projects, enabling them to leverage the full power of AWS services and infrastructure while benefiting from the convenience of Amplify's unified development workflow.

User Management Made Easy

Amplify Auth provides a comprehensive set of user management capabilities out of the box. Developers can easily create and manage user accounts, including sign-up, sign-in, and password recovery functionalities. Amplify Auth also supports user attribute customization, allowing developers to capture additional user information during the registration process, such as user preferences or profile data.

Adaptive Security for Enhanced Protection

Security is a top priority when it comes to authentication. Amplify Auth offers adaptive security features that help protect against common security threats. It includes built-in mechanisms for detecting and preventing brute-force attacks, account takeovers, and other malicious activities. Amplify Auth also supports multi-factor authentication (MFA), adding an extra layer of security to user accounts.

Customizable Authentication Workflows

Every application has its unique authentication requirements. Amplify Auth understands this and allows developers to customize authentication workflows according to their specific needs. Whether configuring social sign-in options, implementing custom password policies, or integrating with external identity providers, Amplify Auth offers a wide range of customization options to fit diverse application scenarios.

Supporting Multiple Identity Providers

Amplify Auth supports a variety of identity providers, allowing users to sign in with their preferred accounts. It seamlessly integrates with popular providers such as Amazon, Google, Facebook, and more. By enabling users to choose their preferred identity provider, Amplify Auth simplifies the sign-in process and provides a frictionless experience.

Scalability and Performance

Amplify Auth is built on top of AWS's scalable and reliable infrastructure. This ensures that authentication workflows can handle high volumes of users and requests without compromising performance. Whether an application serves hundreds or millions of users, Amplify Auth can effortlessly scale to meet the demand, ensuring a seamless authentication experience for all users.

User-Centric Authentication Experience

In today's competitive landscape, user experience is paramount. Amplify Auth focuses on providing a user-centric authentication experience, aiming to balance security and convenience. With features such as social sign-in, passwordless authentication, and remember device options, Amplify Auth empowers developers to create authentication workflows that are both secure and user-friendly.

Data Privacy and Compliance

Data privacy and compliance are critical considerations in modern application development. Amplify Auth adheres to industry best practices and regulations, ensuring that user data is protected and handled in a compliant manner. With built-in features such as encryption at rest and in transit, developers can rest assured that user data is secure and meets the highest standards of privacy and compliance.

Create your first amplify app with auth system

Like the last article, we use Vite Framework to create the scaffold of our app:

npm create vite@latest amplify-auth-example -- --template react-ts

A new Vite project it's made. Now goes inside the directory and install the npm package.

Now configure the amplify project with the command amplify init inside the folder.

After doing that we need to add a hosting service for this project. To do that run the command amplify hosting add

To add the auth service we need to use amplify cli with the command amplify add auth

After doing that run the command amplify push and amplify publish

Now it's time to add the Auth integration inside your React App. To do that we need to add pre-built UI components of Amplify. Amplify UI is an open-source design system with cloud-connected components and primitives that simplify building accessible, and responsive.

Install the packages with the command npm i @aws-amplify/ui-react aws-amplify

Open in your project with your editor and open the file src/App.tsx to add the Authenticator component.

We need to add package and the configuration properties inside in the file:

import { Amplify } from 'aws-amplify';

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

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

It's possible that the row import awsExports from './aws-exports'; show an error like this: No declaration file was found for module './aws-exports'. To resolve this add a file named aws-exports.d.ts in the folder src and add this content:

export = awsmobile; declare const awsmobile: any;

We need also change the HTML of App:

return (
    <>
      <Authenticator loginMechanisms={['email']}>
        {({ signOut, user }) => (
          <>
            <div>
              <a href="https://vitejs.dev" target="_blank">
                <img src={viteLogo} className="logo" alt="Vite logo" />
              </a>
              <a href="https://react.dev" target="_blank">
                <img src={reactLogo} className="logo react" alt="React logo" />
              </a>
            </div>
            <h1>Vite + React</h1>
            <div className="card">
              <h1>Hello {user?.username}</h1>
              <button onClick={signOut}>Sign out</button>
            </div>
            <p className="read-the-docs">
              Click on the Vite and React logos to learn more
            </p>
          </>

        )}
      </Authenticator>

    </>
  )

The Authenticator component adds complete authentication flows to your application with minimal boilerplate.

In this example, we use to login the email instead the username ( default attribute ). As you can see I add an option of Authenticator component.

Inside the Authenticator component, we need to add the HTML that which will be displayed if the user is logged in.

Now it's time to publish your app. Run the command amplify publish.

Now go to the URL of the amplify app and you will see the Authenticator component like this:

Try to Create Account. The authentication flow expects an email to be sent with a confirmation code.

After confirmation flow you will see the page with user logged:

Conclusions

In this article we integrate amplify auth with standard configuration. There are some parameters and personalization. I invited you to read the official documentation: