Convert useAuthenticator hook & services to public APIs #532

ericclemmons · 2021-10-19T15:14:46Z

Description of changes:

This PR paves the way for custom components & public APIs using React's useAuthenticator hook: #552

<AuthenticatorProvider {...initialState, components, loginMechanisms, services } />
useAuthenticator no longer returns [state, send] and instead returns only public APIs.
Replace state.matches(...) with route (signIn | verifyUser | ...). This doesn't include pending states, which will be indicated via an isPending facade.
Still providing _send and _state but /** @deprecated */ so we can track & remove these private values.
Add isPending facade. We want to avoid any usage of state.matches(...) in components!
Rename signIn and signUp facades to transitionToSignIn or toSignIn or gotoSignIn or something for @wlee221
Get React tests passing with the current refactor
Get all tests working

Future Changes

Add example for how to customize Sign Up #552
Fix Angular linting errors #549
Replace all usage of state.matches in components
I'm not a fan of submitForm and updateForm vs. explicitly saying updateSignUpForm or submitSignUpForm.
Update the docs example to actually work.
Replace all usage of send(...) in components
Because loginMechanisms is pretty much reverted (https://docs.amplify.aws/cli/migration/cli-auth-signup-changes/), usernameAliases = [email | phone_number] is consistent with:

https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateUserPool.html#API_CreateUserPool_RequestSyntax
socialProviders = ['amazon', 'facebook', 'google'] would differentiate the two.

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

docs/src/pages/ui/components/authenticator/index.page.mdx

ErikCH · 2021-10-20T16:15:23Z

packages/react/src/components/Authenticator/Provider/index.tsx

+const useAuthenticatorValue = ({
+  components: customComponents,


Will this now run on import, instead of when the Authenticator component is initialized?

Good question – this is still created at run-time when someone provides:

<AuthenticatorProvider {...components, services} />

It's not invoked as a side-effect here.

ericclemmons · 2021-10-20T21:41:56Z

I'm going to get tests passing on this refactor and then do a PR documenting & supporting this use-case.

That way, that PR can be done to support multiple frameworks.

packages/angular/projects/ui-angular/package.json

ericclemmons · 2021-10-21T16:22:15Z

@ErikCH One of the changes I need to make for Vue is so that there are both <form @input @submit.prevent> handlers so that we only call updateForm({ name, value }) & submitForm, respectively:

amplify-ui/packages/vue/src/components/confirm-sign-up.vue

Lines 122 to 133 in 40eef17

    
           const submit = (e: Event): void => { 
        
             const formData = new FormData(<HTMLFormElement>e.target); 
        
             send({ 
        
               type: 'SUBMIT', 
        
               //@ts-ignore 
        
               data: { 
        
                 //@ts-ignore 
        
                 ...Object.fromEntries(formData), 
        
                 username, 
        
               }, 
        
             }); 
        
           };

packages/ui/src/helpers/auth.ts

ErikCH · 2021-10-21T18:59:42Z

packages/vue/src/components/confirm-sign-in.vue

@@ -3,6 +3,7 @@
    <base-wrapper v-bind="$attrs">
      <base-form
        data-amplify-authenticator-confirmsignin
+        @input="onInput"


This looks fine

ErikCH · 2021-10-21T19:07:07Z

packages/react/src/components/Authenticator/Provider/index.tsx

+
+export type ProviderProps = AuthenticatorMachineOptions & {
+  components?: typeof defaultComponents;
+  services?: undefined;


What is this going to be?

Something like:

services: { signUp({ username, password }) { return Auth.signUp({ username, password }, myCustomOptions); }, validateSignUp(data) { // run custom validation } }

This will be used in #552 to solve #246

ErikCH

The Vue changes looks good. Looks like this will take some further updates on the Vue side to start using this new updateForm and submitForm

wlee221

Looks good, no blockers!

wlee221 · 2021-10-21T19:09:16Z

.github/workflows/tests.yml

@@ -38,6 +38,9 @@ jobs:
      - name: Install packages
        run: yarn --frozen-lockfile

+      - name: Lint packages
+        run: yarn workspace ${{ matrix.package }} lint


Then should this be done after yarn [framework]-example build on line 102?

wlee221 · 2021-10-21T19:55:56Z

packages/react/src/components/Authenticator/ConfirmSignIn/ConfirmSignIn.tsx


-  const { challengeName, remoteError } = actorState.context as SignInContext;


NON_BLOCKING: How do you envision exposing validationErrors? I thought validate* as fire and forget functions from customer-end that doesn't return back to the customer:

const services = { validateSignUp }; return withAuthenticator(app, { services});

wlee221 · 2021-10-21T19:56:43Z

packages/react/src/components/Authenticator/ConfirmSignUp/ConfirmSignUp.tsx

+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = event.target;
+    updateForm({ name, value });


I love this!

wlee221 · 2021-10-21T20:03:58Z

packages/react/src/components/Authenticator/Provider/index.tsx

+  ]);
+
+  const isPending =
+    state.hasTag('pending') || getActorState(state)?.hasTag('pending');


wlee221 · 2021-10-21T20:22:49Z

packages/ui/src/machines/authenticator/actors/signIn.ts

-        const { confirmation_code: code } = event.data;
+        const { confirmation_code: code } = context.formValues;


Right, but I'd be careful about this though because we were inconsistent about sending CHANGE events.

I see that you've bridged that gap on React/Vue -- I'll follow it up from Angular as well.

amplify-ui/packages/react/src/components/Authenticator/ConfirmSignIn/ConfirmSignIn.tsx

Lines 41 to 44 in 1ae6bac

<Form

data-amplify-authenticator-confirmsignin=""

method="post"

onSubmit={(event) => {

ericclemmons · 2021-10-21T20:33:00Z

@wlee221 To answer this:

NON_BLOCKING: How do you envision exposing validationErrors? I thought validate* as fire and forget functions from customer-end that doesn't return back to the customer:

It would be available via:

const { error, validationErrors /* or formErrors? */ } = useAuthenticator();

The service is still fire-and-forget, but on submit validation still has to pass and there validationErrors will be {} or { username: 'Invalid length' } or something.

minor ui updates

ericclemmons self-assigned this Oct 19, 2021

ericclemmons added Authenticator An issue or a feature-request for an Authenticator UI Component feature-request Request a new feature labels Oct 19, 2021

ericclemmons added this to the Authenticator General Availability milestone Oct 19, 2021

ericclemmons force-pushed the useAuthenticator-refactor branch 2 times, most recently from 8e61ae5 to 2d7d0b3 Compare October 19, 2021 20:31

wlee221 self-requested a review October 19, 2021 21:00

wlee221 reviewed Oct 19, 2021

View reviewed changes

docs/src/pages/ui/components/authenticator/index.page.mdx Outdated Show resolved Hide resolved

ErikCH reviewed Oct 20, 2021

View reviewed changes

ericclemmons marked this pull request as ready for review October 20, 2021 21:32

ericclemmons force-pushed the useAuthenticator-refactor branch from 42a18ec to 05f410c Compare October 20, 2021 21:41

ericclemmons commented Oct 20, 2021

View reviewed changes

packages/angular/projects/ui-angular/package.json Outdated Show resolved Hide resolved

wlee221 mentioned this pull request Oct 20, 2021

refactor(angular): Separate out Authenticator to its own path and module #543

Merged

3 tasks

ericclemmons had a problem deploying to ci October 21, 2021 15:36 Error

ericclemmons had a problem deploying to ci October 21, 2021 15:36 Failure

ericclemmons had a problem deploying to ci October 21, 2021 15:36 Error

ericclemmons mentioned this pull request Oct 21, 2021

Fix SSR warning with <AmplifyProvider> & <IdProvider> #475

Closed

ericclemmons commented Oct 21, 2021

View reviewed changes

packages/ui/src/helpers/auth.ts Show resolved Hide resolved

ericclemmons temporarily deployed to ci October 21, 2021 17:21 Inactive

ericclemmons changed the title ~~Refactor useAuthenticator to support custom Sign Up fields~~ Convert useAuthenticator hook & services to public APIs Oct 21, 2021

ericclemmons mentioned this pull request Oct 21, 2021

Add example for how to customize Sign Up #552

Merged

5 tasks

ericclemmons added 5 commits October 21, 2021 12:50

Add react-generate-context

cf6ec61

Split Authenticator into index+Authenticator+withAuthenticator+Router

7a6e5f2

Move /hooks beside their Context/Provider

612d300

Export PhoneNumberField

11a4f53

Facade returns route and handlers

dcc4704

ericclemmons requested a review from wlee221 October 21, 2021 18:24

aws-amplify deleted a comment from lgtm-com bot Oct 21, 2021

ErikCH reviewed Oct 21, 2021

View reviewed changes

ErikCH approved these changes Oct 21, 2021

View reviewed changes

ericclemmons mentioned this pull request Oct 21, 2021

Add Auth to React context using Provider pattern #551

Closed

aws-amplify deleted a comment from lgtm-com bot Oct 21, 2021

wlee221 approved these changes Oct 21, 2021

View reviewed changes

ericclemmons merged commit 71f5a39 into main Oct 21, 2021

ericclemmons deleted the useAuthenticator-refactor branch October 21, 2021 20:48

This was referenced Oct 21, 2021

angular: fix lint issues #558

Merged

Send INPUT events from all angular authenticator subcomponents #565

Closed

refactor(angular): ensure auth components use onInput handler #566

Merged

wlee221 mentioned this pull request Nov 10, 2021

docs: Document facades we provide #664

Closed

3 tasks

thaddmt pushed a commit that referenced this pull request Apr 7, 2023

Merge pull request #532 from aws-amplify/updates-ui-countdown

767a503

minor ui updates

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Convert useAuthenticator hook & services to public APIs #532

Convert useAuthenticator hook & services to public APIs #532

ericclemmons commented Oct 19, 2021 •

edited

Loading

ErikCH Oct 20, 2021

ericclemmons Oct 21, 2021

ericclemmons commented Oct 20, 2021

ericclemmons commented Oct 21, 2021 •

edited

Loading

ErikCH Oct 21, 2021

ErikCH Oct 21, 2021

ericclemmons Oct 21, 2021

ericclemmons Oct 21, 2021

ErikCH left a comment

wlee221 left a comment

wlee221 Oct 21, 2021

wlee221 Oct 21, 2021

wlee221 Oct 21, 2021

wlee221 Oct 21, 2021

wlee221 Oct 21, 2021

ericclemmons commented Oct 21, 2021

		const useAuthenticatorValue = ({
		components: customComponents,


		const { challengeName, remoteError } = actorState.context as SignInContext;

		const { confirmation_code: code } = event.data;
		const { confirmation_code: code } = context.formValues;

	<Form
	data-amplify-authenticator-confirmsignin=""
	method="post"
	onSubmit={(event) => {

Convert useAuthenticator hook & services to public APIs #532

Convert useAuthenticator hook & services to public APIs #532

Conversation

ericclemmons commented Oct 19, 2021 • edited Loading

Future Changes

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ericclemmons commented Oct 20, 2021

ericclemmons commented Oct 21, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ErikCH left a comment

Choose a reason for hiding this comment

wlee221 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ericclemmons commented Oct 21, 2021

ericclemmons commented Oct 19, 2021 •

edited

Loading

ericclemmons commented Oct 21, 2021 •

edited

Loading