update next app router quickstart to revise todo state and authenticator placement (#8025)

Jay2113 · web-flow · commit 5d1584c3f972 · 2024-10-09T15:44:02.000-07:00
* update app router template to revise todo state and authenticator placement

* update code style
diff --git a/src/pages/[platform]/start/quickstart/nextjs-app-router-client-components/index.mdx b/src/pages/[platform]/start/quickstart/nextjs-app-router-client-components/index.mdx
@@ -219,43 +219,73 @@ This should start a local dev server at http://localhost:3000.
 
 The starter application already has a pre-configured auth backend defined in the **amplify/auth/resource.ts** file. We've configured it to support email and password login but you can extend it to support a variety of login mechanisms, including Google, Amazon, Sign In With Apple, and Facebook.
 
-The fastest way to get your login experience up and running is to use our Authenticator UI component. First, install the Amplify UI component library:
+The fastest way to get your login experience up and running is to use our Authenticator UI component. In your **app/layout.tsx** file, import the Authenticator UI component and wrap the children or pages components.
 
-```bash showLineNumbers={false}
-npm add @aws-amplify/ui-react
-```
-
-Next, import the Authenticator UI component and wrap your `<main>` element.
 
+```tsx title="app/layout.tsx"
+"use client"
 
-```tsx title="app/page.tsx"
+import React from "react";
+import { Amplify } from "aws-amplify";
+import "./app.css";
 // highlight-start
-import { Authenticator } from '@aws-amplify/ui-react'
-import '@aws-amplify/ui-react/styles.css'
+import { Authenticator } from "@aws-amplify/ui-react";
+import "@aws-amplify/ui-react/styles.css";
 // highlight-end
-// ... other imports
+import outputs from "@/amplify_outputs.json";
 
-function App() {
-  // ...
+Amplify.configure(outputs);
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   return (
     // highlight-start
-    <Authenticator>
-      {({ signOut, user }) => (
+    <html lang="en">
+      <body>      
+        <Authenticator>
+          {children}
+        </Authenticator>
+      </body>
+    </html>
     // highlight-end
-        <main>
-          {/*...*/}
-          // highlight-next-line
-          <button onClick={signOut}>Sign out</button>
-        </main>
-      )}
-    // highlight-next-line
-    </Authenticator>
-  )
+  );
 }
 ```
 
 The Authenticator component auto-detects your auth backend settings and renders the correct UI state based on the auth backend's authentication flow.
 
+In your **app/page.tsx** file, add a button to enable users to sign out of the application. Import the [`useAuthenticator`](https://ui.docs.amplify.aws/react/connected-components/authenticator/advanced#access-auth-state) hook from the Amplify UI library to hook into the state of the Authenticator.
+
+```tsx title="app/page.tsx"
+import type { Schema } from "@/amplify/data/resource";
+// highlight-next-line
+import { useAuthenticator } from "@aws-amplify/ui-react";
+import { useState, useEffect } from "react";
+import { generateClient } from "aws-amplify/data";
+
+const client = generateClient<Schema>();
+
+export default function HomePage() {
+
+  // highlight-start
+  const { signOut } = useAuthenticator();
+  // highlight-end
+
+  // ...
+
+  return (
+    <main>
+      {/* ... */}
+      // highlight-next-line
+      <button onClick={signOut}>Sign out</button>
+    </main>
+  );
+}
+```
+
 Try out your application in your localhost environment again. You should be presented with a login experience now.
 
 <Video src="/images/gen2/getting-started/react/demo-auth.mp4" description="Video - Authentication Demo" />
@@ -329,24 +359,23 @@ export const data = defineData({
 });
 ```
 
-In the application client code, let's also render the username to distinguish different users once they're logged in. Go to your **app/page.tsx** file and render the `user` property.
+In the application client code, let's also render the username to distinguish different users once they're logged in. Go to your **app/page.tsx** file and render the `user` property from the `useAuthenticator` hook.
 
 ```tsx title="app/page.tsx"
 // ... imports
 
-function App() {
+function HomePage() {
+  // highlight-next-line
+  const { user, signOut } = useAuthenticator();
+  
   // ...
+  
   return (
-    <Authenticator>
+    <main>
       // highlight-next-line
-      {({ signOut, user }) => (
-        <main>
-          // highlight-next-line
-          <h1>{user?.signInDetails?.loginId}'s todos</h1>
-          {/* ... rest of the UI */}
-        </main>
-      )}
-    </Authenticator>
+      <h1>{user?.signInDetails?.loginId}'s todos</h1>
+      {/* ... */}
+    </main>
   )
 }
 ```
