[UI Components] Chore usernameAlias readme update (aws-amplify#5190)

* update readme with usernameAlias * fix typo Co-authored-by: Jordan Ranz <[email protected]>
jrudder · Mar 26, 2020 · 262b8d3 · 262b8d3
1 parent aeb4f80
commit 262b8d3
Showing 1 changed file with 14 additions and 0 deletions.
diff --git a/packages/amplify-ui-components/Readme.md b/packages/amplify-ui-components/Readme.md
@@ -339,6 +339,20 @@ Theming for the UI components can be achieved by using [CSS Variables](https://d
 | `--amplify-white`              | #ffffff              |
 | `--amplify-red`                | #dd3f5b              |
 
+## Amplify Authenticator `usernameAlias`
+
+The `amplify-authenticator` component has the ability to sign in or sign up with `email` or `phone_number` instead of default `username`. To achieve this, you first need to setup the userpool to allow email or phone number as the username [using the cli workflow](https://aws-amplify.github.io/docs/cli-toolchain/quickstart#configuring-auth-without-social-providers) or through the [Cognito Console](https://docs.aws.amazon.com/cognito/latest/developerguide/user-pool-settings-attributes.html#user-pool-settings-aliases-settings-option-2). To reflect this in the `amplify-authenticator` component, you can use the `usernameAlias` property. It can take one of the three values - `email`, `phone_number` or `username`. Default is set to `username`.
+
+**Usage:**
+
+```js
+// react
+<AmplifyAuthenticator usernameAlias="email" />
+
+// angular, vue or web components
+<amplify-authenticator username-alias="phone_number" />
+```
+
 ## Migration Guide
 
 - [React](#react-2)