Merge pull request aws-amplify#1357 from aws-amplify/feat-usernameAlias-doc

readme usernameAlias auth

Author: jordanranz

docs/ui/auth/fragments/angular/authenticator.md

@@ -242,3 +242,20 @@ Amplify UI Components use `slots` based off of the [Web Components slot element]
 ```
 
 <ui-component-props tag="amplify-greetings"></ui-component-props>
+
+## Use Cases
+
+### Authenticate with email or phone number
+
+The `amplify-authenticator` component has the ability to sign in / 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`.
+
+```html
+<amplify-authenticator username-alias="email">
+  <div>
+    My App
+    <amplify-sign-out></amplify-sign-out>
+  </div>
+</amplify-authenticator>
+```

docs/ui/auth/fragments/ionic/authenticator.md

@@ -231,3 +231,20 @@ Amplify UI Components use `slots` based off of the [Web Components slot element]
 ```
 
 <ui-component-props tag="amplify-greetings"></ui-component-props>
+
+## Use Cases
+
+### Authenticate with email or phone number
+
+The `amplify-authenticator` component has the ability to sign in / 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`.
+
+```html
+<amplify-authenticator username-alias="email">
+  <div>
+    My App
+    <amplify-sign-out></amplify-sign-out>
+  </div>
+</amplify-authenticator>
+```

docs/ui/auth/fragments/react/authenticator.md

@@ -277,3 +277,22 @@ const App = () => (
 ```
 
 <ui-component-props tag="amplify-greetings"></ui-component-props>
+
+## Use Cases
+
+### Authenticate with email or phone number
+
+The `AmplifyAuthenticator` component has the ability to sign in / 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 `AmplifyAuthenticator` 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`.
+
+```jsx
+const App = () => (
+  <AmplifyAuthenticator usernameAlias="email">
+    <div>
+      My App
+      <AmplifySignOut />
+    </div>
+  </AmplifyAuthenticator>
+);
+```

docs/ui/auth/fragments/vue/authenticator.md

@@ -238,3 +238,21 @@ Amplify UI Components use `slots` based off of the [Web Components slot element]
 ```
 
 <ui-component-props tag="amplify-greetings"></ui-component-props>
+
+
+## Use Cases
+
+### Authenticate with email or phone number
+
+The `amplify-authenticator` component has the ability to sign in / 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`.
+
+```html
+<amplify-authenticator username-alias="email">
+  <div>
+    My App
+    <amplify-sign-out></amplify-sign-out>
+  </div>
+</amplify-authenticator>
+```