search

aws-amplify / amplify-android

The fastest and easiest way to use AWS from your Android app.
https://docs.amplify.aws/lib/q/platform/android/
Apache License 2.0
246 stars 117 forks source link

RFC: Amplify UI Components - Authenticator #685

Closed lawmicha closed 2 years ago

lawmicha commented 4 years ago

This issue is a Request For Comments (RFC). It is intended to elicit community feedback regarding a proposed feature to the Amplify Libraries. Please feel free to post comments or questions here.

The proposed feature is to provide a set of customizable UI components to make it easier to add user management functionality to your app. This will be similar to the JS library in terms of design and feature parity, while with platform dependent differences such as considerations of Google's material design guidelines.

Current

  1. Amplify Libraries provide an out-of-the-box UI component for JS frameworks such as React, React Native, Angular, Vue, etc. This is designed to Amplify’s UI styles and can be customized. By making it easier to add an onboarding flow, developers can spend more time building out other important parts of their app. (link)
  2. The legacy SDK’s have a “drop-in” UI component that provides similar capability for authentication, logo/background color customizations, and the ability to do federated sign-in with social providers through Cognito Identity Pool. While this covers similar use cases as the Amplify UI component above, there are some styling differences, customizability options, and it does not support creating a user in a Cognito user pool when signing in using social providers. (link)
  3. Amplify’s AWSCognitoAuthPlugin provides a set of declarative APIs for developers to build their own user interfaces. The signInWithWebUI functionality provided by this plugin displays Cognito's HostedUI webpage. The developer can customize this in the Cognito console. The API also supports opens directly to a specific social provider which is useful for creating social provider specific buttons. (link)

Use cases

The following are to outline which developer use cases we are looking to address with these UI components.

  1. A drop-in UI component for onboarding users to the app. This is similar to JS library’s Authenticator component that will take up the entire screen and can be used to toggle between authenticated and unauthenticated sections of the app based on user actions (ie. sign in successfully will transition to the authenticated section of the app).
  2. A set of UI components to help manage the users of my app such as a Sign-out button.
  3. UI components should have similar customization options as the existing JS Authenticator so that the interface can be customized to the look and feel to the rest of the app’s design and across apps for multi-platform use cases.
  4. The onboarding flow is configurable to an expected authentication use case to onboard users. For example, sign-in user interface will have exactly the required inputs and will transition to a "confirm sign in" view if multi-factor authentication is expected.
  5. Support social provider sign-in through Cognito user pool, instead of Cognito federated sign-in. The UI components should accompany the plugin functionality of AWSCognitoAuthPlugin through Amplify.Auth APIs, and since the API does not provide a federated sign-in feature, the authenticator UI component will also not support it either.
  6. The UI components should subjectively look good for different screen sizes, such as placement of components on different sized iPhones to larger screens such as iPads.

Proposed solution

The proposal is to provide set of UI components using Jetpack Compose. The first layer are simple UI components. The following are work in progress examples and subject to change based on feedback.

Simple components

SignUpButton example:

SignUp(username = username, password = password, result = { }, error = { }, styles = styles)

AWSCognitoSignInWithFacebookButton provides a styled Facebook login button that will launch the Cognito HostedUI directly to the facebook login page.

AWSCognitoSignInWithFacebookButton(result = { }, error = { })

Developers can directly interface with the Amplify.Auth APIs or use these simple components to build more complex workflows around them.

Authenticator component

The Authenticator component provides an out-of-the-box authentication flow built using the simple components described above. For example, sensible defaults such as a ForgotPasswordLink on the SignIn view, an set of phone number input fields to pass information to the SignUpButton, and other features that can be disabled/enabled based on the auth use case.

Alternatives

References

Questions for the community:

jamesonwilliams commented 4 years ago

Thanks @lawmicha for the RFC! A few initial thoughts:

  1. At first glance, it is straight-forward exercise to add a Button to an Android application. How will the proposed buttons be differentiated from the platform widgets, and the stylizations they already provide?

  2. I'd guess that consistent look-and-feel across iOS, JavaScript and Android is an explicit goal. Are there UI mockups you could add, to help illustrate the various components being proposed?

  3. In one example, you have a username and password bound to a button object. I'd expect a button to drive an action, to pull data from other form fields, as opposed to owning the data itself. How would a UI button come to know these authentication values, and ought it to, regardless?

jeryini commented 4 years ago

My take on authentication:

gpanshu commented 2 years ago

Closing due to low traction and upvotes.

github-actions[bot] commented 2 years ago

⚠️COMMENT VISIBILITY WARNING⚠️

Comments on closed issues are hard for our team to see. If you need more assistance, please either tag a team member or open a new issue that references this one. If you wish to keep having a conversation with other community members under this issue feel free to do so.