Update React authenticator example to latest UI components and React 18

samples/react/auth/authenticator/.gitignore

@@ -22,18 +22,23 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-#amplify
+#amplify-do-not-edit-begin
 amplify/\#current-cloud-backend
 amplify/.config/local-*
+amplify/logs
 amplify/mock-data
 amplify/backend/amplify-meta.json
-amplify/backend/awscloudformation
+amplify/backend/.temp
 build/
 dist/
 node_modules/
 aws-exports.js
 awsconfiguration.json
 amplifyconfiguration.json
+amplifyconfiguration.dart
 amplify-build-config.json
 amplify-gradle-config.json
-amplifyxc.config
+amplifytools.xcconfig
+.secret-*
+**.sample
+#amplify-do-not-edit-end

samples/react/auth/authenticator/README.md

@@ -1,15 +1,13 @@
 # Authentication using an Amplify React Authenticator Component
 
-[Amplify UI Components](https://docs.amplify.aws/ui/q/framework/react) is an open-source toolkit that makes it easier for developers to add common use cases to their applications. The toolkit comes out of the box with a UI interface that is connected to Amplify’s backend services.
+[Amplify UI Components](https://ui.docs.amplify.aws/) is an open-source toolkit that makes it easier for developers to add common use cases to their applications. The toolkit comes out of the box with a UI interface that is connected to Amplify’s backend services.
 
 ## What Are We Building?
 
-In this example, we will use the [Authenticator UI Component](https://docs.amplify.aws/ui/auth/authenticator/q/framework/react) to allow users to signup and signin.
+In this example, we will use the [Authenticator UI Component](https://ui.docs.amplify.aws/react/connected-components/authenticator) to allow users to signup and signin.
 
 We have bootstrapped this application using [Create React App](https://github.com/facebook/create-react-app) and will focus on the logic that adds authentication.
 
-<img src="https://amplify-demo-assets.s3.amazonaws.com/screenshot.png" alt="screenshot" height="400px"/>
-
 ## Let's Get Started!
 
 ## Setup
@@ -43,23 +41,33 @@ Now that you've built the app, let's take a look under the hood and explore how
 
 Let's dive into the frontend components. In this app, the important logic is in `App.js`.
 
-Using `AuthState` we can check if a user is authenticated and signed in: `AuthState.SignedIn`. If this is true, we can route to a user dashboard component or simply display their name.
+Using `useAuthenticator` we can check the value of `authStatus`. If the value of `authStatus` is `authenticated`, we can route to a user dashboard component or, in this case, simply display their name.
 
 ```
-<div>Hello, {user.username}</div>
-<img src={logo} className="App-logo" alt="logo" />
-<AmplifySignOut />
+const App = () => {
+  const { user, authStatus, signOut } = useAuthenticator();
+
+  return (
+    <>
+      {authStatus === "authenticated" ? (
+        <div className="App">
+          <header className="App-header">
+            <div>Hello, {user.username}</div>
+            <img src={logo} className="App-logo" alt="logo" />
+            <button onClick={signOut}>Sign Out</button>
+          </header>
+        </div>
+      ) : (
+        <Authenticator />
+      )}
+    </>
+  );
+};
 ```
 
-Notice, we also provide a way for users to signout, is the [signout component](https://docs.amplify.aws/ui/auth/authenticator/q/framework/react#sign-out).
-
-If a user isn’t signed in, let’s display the `AmplifyAuthenticator`:
+Notice, we also provide a way for users to sign out via the `signOut` function which is also made available to us by the `useAuthenticator` hook.
 
-```
-<AmplifyContainer>
-  <AmplifyAuthenticator />
-</AmplifyContainer>
-```
+If a user isn’t signed in, we will render the `Authenticator` component instead.
 
 This works out of the box and displays a standard SignIn/SignOut interface for users.
 

samples/react/auth/authenticator/amplify/backend/auth/authenticatordf03bc0b/parameters.json → samples/react/auth/authenticator/amplify/backend/auth/authenticator34011893/cli-inputs.json

@@ -1,14 +1,16 @@
 {
-    "identityPoolName": "authenticatordf03bc0b_identitypool_df03bc0b",
+  "version": "1",
+  "cognitoConfig": {
+    "identityPoolName": "authenticator34011893_identitypool_34011893",
     "allowUnauthenticatedIdentities": false,
-    "resourceNameTruncated": "authendf03bc0b",
-    "userPoolName": "authenticatordf03bc0b_userpool_df03bc0b",
+    "resourceNameTruncated": "authen34011893",
+    "userPoolName": "authenticator34011893_userpool_34011893",
     "autoVerifiedAttributes": [
-        "email"
+      "email"
     ],
     "mfaConfiguration": "OFF",
     "mfaTypes": [
-        "SMS Text Message"
+      "SMS Text Message"
     ],
     "smsAuthenticationMessage": "Your authentication code is {####}",
     "smsVerificationMessage": "Your verification code is {####}",
@@ -18,33 +20,26 @@
     "passwordPolicyMinLength": 8,
     "passwordPolicyCharacters": [],
     "requiredAttributes": [
-        "email"
+      "email"
     ],
-    "userpoolClientGenerateSecret": true,
+    "aliasAttributes": [],
+    "userpoolClientGenerateSecret": false,
     "userpoolClientRefreshTokenValidity": 30,
     "userpoolClientWriteAttributes": [
-        "email"
+      "email"
     ],
     "userpoolClientReadAttributes": [
-        "email"
+      "email"
     ],
-    "userpoolClientLambdaRole": "authendf03bc0b_userpoolclient_lambda_role",
+    "userpoolClientLambdaRole": "authen34011893_userpoolclient_lambda_role",
     "userpoolClientSetAttributes": false,
-    "resourceName": "authenticatordf03bc0b",
+    "sharedId": "34011893",
+    "resourceName": "authenticator34011893",
     "authSelections": "identityPoolAndUserPool",
-    "authRoleArn": {
-        "Fn::GetAtt": [
-            "AuthRole",
-            "Arn"
-        ]
-    },
-    "unauthRoleArn": {
-        "Fn::GetAtt": [
-            "UnauthRole",
-            "Arn"
-        ]
-    },
     "useDefault": "default",
     "userPoolGroupList": [],
-    "dependsOn": []
+    "serviceName": "Cognito",
+    "usernameCaseSensitive": false,
+    "useEnabledMfas": true
+  }
 }