fix(examples,e2e): Add examples and tests for #1580 #1578

wlee221 · 2022-03-24T10:40:20Z

Description of changes

This updates the useAuthenticator examples and their e2e test to match #1580.

Details

Our current useAuthenticator examples are really SPA and do not sufficiently test router use cases.

There are many useAuthenticator bugs, especially with refresh, so we plan to update examples and tests incrementally as we add more router support. For now, this PR adds additional route useAuthenticator/home.

This PR adds:

Test starts at /useAuthenticater route. This has the authenticator for user to sign in.
User signs in with Authenticator.
Once user signs in, they'll see a "Navigate to Home" button. (This can be something like "Manage your account" irl)
Clicking that button redirects user to /useAuthenticator/home`. This will have basic greetings with a sign out button.
Refreshing sustains auth contexts.

Future Goals
This example needs to be extended to better resemble customer use cases:

Have a separate /sign-in route
Automatically redirect users without buttons
Add current user check in /home and make it actually protected.

Issue #, if available

Related to #1332, #1497, accompanies #1580

Description of how you validated changes

Checklist

PR description included
yarn test passes
Tests are updated
Relevant documentation is changed or added (and PR referenced)

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

changeset-bot · 2022-03-24T10:40:23Z

⚠️ No Changeset found

Latest commit: 16aefaf

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

lgtm-com · 2022-03-24T10:45:29Z

This pull request introduces 3 alerts when merging 7aee0cf into eedae23 - view on LGTM.com

new alerts:

3 for Unused variable, import, function or class

lgtm-com · 2022-03-24T11:11:49Z

This pull request introduces 3 alerts when merging 81492e1 into eedae23 - view on LGTM.com

new alerts:

3 for Unused variable, import, function or class

…resh/examples

lgtm-com · 2022-03-24T11:22:55Z

This pull request introduces 3 alerts when merging a6e26ea into 7e00926 - view on LGTM.com

new alerts:

3 for Unused variable, import, function or class

lgtm-com · 2022-03-24T11:43:28Z

This pull request introduces 3 alerts when merging 5a090b8 into 7e00926 - view on LGTM.com

new alerts:

3 for Unused variable, import, function or class

lgtm-com · 2022-03-24T12:02:40Z

This pull request introduces 3 alerts when merging 3e3527f into 7e00926 - view on LGTM.com

new alerts:

3 for Unused variable, import, function or class

lgtm-com · 2022-03-24T12:08:01Z

This pull request introduces 3 alerts when merging 4ab0271 into 7e00926 - view on LGTM.com

new alerts:

3 for Unused variable, import, function or class

lgtm-com · 2022-03-24T12:25:59Z

This pull request introduces 3 alerts when merging 5a62d1d into 7e00926 - view on LGTM.com

new alerts:

3 for Unused variable, import, function or class

…resh/examples

lgtm-com · 2022-03-24T12:36:45Z

This pull request introduces 3 alerts when merging c9cf401 into fc71b28 - view on LGTM.com

new alerts:

3 for Unused variable, import, function or class

wlee221 · 2022-03-24T13:24:43Z

examples/vue/src/pages/ui/components/authenticator/useAuthenticator/home/index.vue

+  <!-- TODO: this authenticator shouldn't be needed -->
+  <authenticator></authenticator>


Vue still needed this hidden authenticator, because authenticator was needed to interpret and start the machine in the first place. This seemed like a much bigger refactor, so left this as-is.

+1 I can look at this in a different PR. Maybe we need to add an initialization via provide/inject somewhere. A user could also hide this with CSS when the user is not logged in, I suppose

lgtm-com · 2022-03-24T13:43:31Z

This pull request introduces 3 alerts when merging bae13aa into e777730 - view on LGTM.com

new alerts:

3 for Unused variable, import, function or class

wlee221 · 2022-03-24T13:44:36Z

...ges/e2e/cypress/integration/ui/components/authenticator/useAuthenticator/useAuthenticator.ts

+
+Then('I see a valid greetings message', () => {
+  cy.findByRole('document')
+    .contains(new RegExp('^Hello, .+!$', 'i'))


Checks if the message has "Hello, {username}" structure. Kept it generic to not expose the test username 😈

ErikCH · 2022-03-24T20:14:11Z

examples/angular/src/app/app-routing.module.ts

@@ -101,6 +102,10 @@ const routes: Routes = [
    path: 'ui/components/authenticator/useAuthenticator',
    component: UseAuthenticatorComponent,
  },
+  {


ErikCH · 2022-03-24T20:15:41Z

examples/next/pages/_app.page.tsx

+export default function MyApp(props) {
+  return (
+    <AmplifyProvider>
+      <Authenticator.Provider>


I was testing this in the other PR and I had to add this. Glad it's there now.

ErikCH

LGTM!

…resh/examples

lgtm-com · 2022-03-24T22:46:33Z

This pull request introduces 3 alerts when merging 16aefaf into 7857497 - view on LGTM.com

new alerts:

3 for Unused variable, import, function or class

…1580) * [Revert] use devTools * Check for current user first before init * Revert "[Revert] use devTools" This reverts commit df53b24. * react: send INIT event on 'setup' state * vue: send INIT event on 'setup' state * angular: send INIT event on 'setup' state * Remove unused var * Move comment * Create five-crabs-help.md * Update packages/ui/src/machines/authenticator/index.ts Co-authored-by: Caleb Pollman <cpollman@amazon.com> * Combine if statements * Unsubscribe on vue * Unsubscribe on angular * fix(examples,e2e): Add examples and tests for #1580 (#1578) * Angular Example * React example * Vue examples * Add missing ! * Update useAuthenticator test * Use slots on parent route * Configure Amplify on `/home` * Add react sign out button * Update wording on react example * Add sign out test * Add angular sign out buttons * Sign Out button in Vue * destructure signOut ref * Add hidden Authenticator on Vue * Fix copy paste typo * fix(e2e): AutoSignIn directly after signUp is done * Trigger CI Co-authored-by: Caleb Pollman <cpollman@amazon.com>

wlee221 added 5 commits March 24, 2022 02:51

Angular Example

6925d4e

React example

9f48b32

Vue examples

d4f0742

Add missing !

126314b

Update useAuthenticator test

7aee0cf

Use slots on parent route

81492e1

wlee221 changed the base branch from get-user-on-refresh/main to get-user-on-refresh/state-machine March 24, 2022 11:17

Merge branch 'get-user-on-refresh/state-machine' into get-user-on-ref…

a6e26ea

…resh/examples

Configure Amplify on /home

5a090b8

wlee221 added 3 commits March 24, 2022 04:50

Add react sign out button

d080bc2

Update wording on react example

abeeb47

Add sign out test

3e3527f

Add angular sign out buttons

4ab0271

wlee221 added 3 commits March 24, 2022 05:14

Sign Out button in Vue

b3e5a90

destructure signOut ref

bde17ec

Add hidden Authenticator on Vue

5a62d1d

Merge branch 'get-user-on-refresh/state-machine' into get-user-on-ref…

c9cf401

…resh/examples

wlee221 changed the title ~~Update examples and e2e test for useAuthenticator~~ fix(examples,e2e): Update examples and tests for #1580 Mar 24, 2022

wlee221 mentioned this pull request Mar 24, 2022

fix(authenticator): fetch current user on routed apps after refresh #1580

Merged

4 tasks

wlee221 commented Mar 24, 2022

View reviewed changes

Fix copy paste typo

bae13aa

wlee221 changed the title ~~fix(examples,e2e): Update examples and tests for #1580~~ fix(examples,e2e): Add examples and tests for #1580 Mar 24, 2022

wlee221 commented Mar 24, 2022

View reviewed changes

ErikCH reviewed Mar 24, 2022

View reviewed changes

ErikCH approved these changes Mar 24, 2022

View reviewed changes

wlee221 added 2 commits March 24, 2022 15:36

Merge branch 'get-user-on-refresh/state-machine' into get-user-on-ref…

18e55d5

…resh/examples

Merge branch 'get-user-on-refresh/state-machine' into get-user-on-ref…

16aefaf

…resh/examples

wlee221 merged commit 43119e4 into get-user-on-refresh/state-machine Mar 24, 2022

wlee221 deleted the get-user-on-refresh/examples branch March 24, 2022 23:33

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(examples,e2e): Add examples and tests for #1580 #1578

fix(examples,e2e): Add examples and tests for #1580 #1578

wlee221 commented Mar 24, 2022 •

edited

Loading

changeset-bot bot commented Mar 24, 2022 •

edited

Loading

lgtm-com bot commented Mar 24, 2022

lgtm-com bot commented Mar 24, 2022

lgtm-com bot commented Mar 24, 2022

lgtm-com bot commented Mar 24, 2022

lgtm-com bot commented Mar 24, 2022

lgtm-com bot commented Mar 24, 2022

lgtm-com bot commented Mar 24, 2022

lgtm-com bot commented Mar 24, 2022

wlee221 Mar 24, 2022

ErikCH Mar 24, 2022

lgtm-com bot commented Mar 24, 2022

wlee221 Mar 24, 2022

ErikCH Mar 24, 2022

ErikCH Mar 24, 2022

ErikCH left a comment

lgtm-com bot commented Mar 24, 2022

		<!-- TODO: this authenticator shouldn't be needed -->
		<authenticator></authenticator>

fix(examples,e2e): Add examples and tests for #1580 #1578

fix(examples,e2e): Add examples and tests for #1580 #1578

Conversation

wlee221 commented Mar 24, 2022 • edited Loading

Description of changes

Issue #, if available

Description of how you validated changes

Checklist

changeset-bot bot commented Mar 24, 2022 • edited Loading

⚠️ No Changeset found

lgtm-com bot commented Mar 24, 2022

lgtm-com bot commented Mar 24, 2022

lgtm-com bot commented Mar 24, 2022

lgtm-com bot commented Mar 24, 2022

lgtm-com bot commented Mar 24, 2022

lgtm-com bot commented Mar 24, 2022

lgtm-com bot commented Mar 24, 2022

lgtm-com bot commented Mar 24, 2022

wlee221 Mar 24, 2022

Choose a reason for hiding this comment

ErikCH Mar 24, 2022

Choose a reason for hiding this comment

lgtm-com bot commented Mar 24, 2022

wlee221 Mar 24, 2022

Choose a reason for hiding this comment

ErikCH Mar 24, 2022

Choose a reason for hiding this comment

ErikCH Mar 24, 2022

Choose a reason for hiding this comment

ErikCH left a comment

Choose a reason for hiding this comment

lgtm-com bot commented Mar 24, 2022

wlee221 commented Mar 24, 2022 •

edited

Loading

changeset-bot bot commented Mar 24, 2022 •

edited

Loading