@aws-amplify/[email protected]

Major Changes

Zero-Configuration Authenticator for Angular, React, & Vue

The Authenticator has been updated based on customer feedback & real-world use-cases to deliver an improved out-of-the-box experience & greater customization.

See: RFC: Authenticator@next

Goals

• Zero-config – The Authenticator automatically infers Amplify CLI & Admin UI settings to work out-of-the-box.

  Run `amplify pull` with the latest CLI whenever your backend changes, and the Authenticator automatically reflects the correct login mechanism, social providers, & more.
  

• Native – The Authenticator is implemented in its respective framework (e.g. Angular, React, Vue) for consistency & familiarity.

• Stable – Existing & upcoming Authenticator behavior is captured & tested to reduce & prevent regressions.

  [Authenticator behavior](https://github.com/aws-amplify/amplify-ui/tree/main/packages/e2e/features/ui/components/authenticator) is tested as [E2E tests](https://github.com/aws-amplify/amplify-ui/blob/main/CONTRIBUTING.md#e2e-testing) on every PR.
  

• Interoperable – Work with password managers, autofill, existing styles, & other common features.

• Customizable – More ways to customize the UI & behavior without losing the benefits of the Authenticator.

  Customers have access to the same functionality that the `Authenticator` uses internally to even build a 100% custom Authenticator, without sacrificing any of the logic.
  

• Reproducible – Authentication is complex. The Authenticator is is developed & tested against a myriad of Amplify backends, example apps, and specifications.

Check out our environments and examples for more.

---

Learn more by visiting the Authenticator Documentation.

Minor Changes

• #626 f84e9949b Thanks @ericclemmons! - ## Zero Configuration

  As of @aws-amplify/[email protected], aws-exports.js includes your backend configuration for the Authenticator to automatically infer loginMechanisms and socialProviders.

  Before (React)

  export default withAuthenticator(App, {
    loginMechanisms: ['email'],
    socialProviders: ['amazon', 'apple', 'facebook', 'google'],
  });

  After (React)

  export default withAuthenticator(App);

  Sign in with Apple

  The Authenticator supports apple as one of many socialProviders. See: https://docs.amplify.aws/lib/auth/social/q/platform/js/

• #627 bd3e09a09 Thanks @wlee221! - This implements AuthenticatorService that can be used internally and externally to access common Authenticator context and helpers.

  Usage:

  app.component.ts

  export class AppComponent {
    constructor(public authenticator: AuthenticatorService) {}
  }

  app.component.html

  <!-- example of "reset password" button -->
  <button (click)="authenticator.toResetPassword()">Reset password</button>
  
  <!-- example of "sign up" submit button -->
  <button (click)="authenticator.submitForm()">Sign Up</button>
  
  <!-- disabling the submit button if submission is in progress -->
  <button
    (click)="authenticator.submitForm()"
    [disabled]="authenticator.isPending"
  >
    Sign Up
  </button>

Patch Changes

• #695 d5009572c Thanks @ericclemmons! - ## Header & Footer Slots

  • Add Header slot above the Authenticator
  • Add Footer slot below the Authenticator
  • Add Sign In Header slot above the Sign In form
  • Add Sign In Footer slot below the Sign In form
  • Add Sign Up Header slot above the Sign Up form
  • Add Sign Up Footer slot below the Sign Up form

• Updated dependencies [bba3242af, f84e9949b, e76c5ac17, 81169c66e, 3cc1c15d7, 2b2ae8469, b46597cef, edea9ffaa, bd3e09a09, 70552a4cc, beb9b49b5, 5257a3109, 3ead9c629]:

  • @aws-amplify/[email protected]