update next pages quickstart to revise todo state and authenticator placement (#8026)

* update next pages quickstart to revise todo state and authenticator placement

* update code style

Author: Jay2113

src/pages/[platform]/start/quickstart/nextjs-pages-router/index.mdx

@@ -221,39 +221,28 @@ 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 **pages/_app.tsx** file, import the Authenticator UI component and wrap your `<App>` component.
 
-```bash showLineNumbers={false}
-npm add @aws-amplify/ui-react
-```
-
-Next, import the Authenticator UI component and wrap your `<main>` element.
-
-
-```tsx title="pages/index.tsx"
+```tsx title="pages/_app.tsx"
+import type { AppProps } from "next/app";
 // highlight-start
 import { Authenticator } from '@aws-amplify/ui-react'
 import '@aws-amplify/ui-react/styles.css'
 // highlight-end
-// ... other imports
+import "@/styles/app.css";
+import { Amplify } from "aws-amplify";
+import outputs from "@/amplify_outputs.json";
 
-function App() {
-  // ...
-  return (
+Amplify.configure(outputs);
+
+export default function App({ Component, pageProps }: AppProps) {
+  return(
     // highlight-start
     <Authenticator>
-      {({ signOut, user }) => (
-    // highlight-end
-        <main>
-          {/*...*/}
-          // highlight-next-line
-          <button onClick={signOut}>Sign out</button>
-        </main>
-    // highlight-start
-      )}
+      <Component {...pageProps} />;
     </Authenticator>
     // highlight-end
-  )
+  ) 
 }
 ```
 <Accordion title="See the complete amplify/auth/resources.ts">
@@ -305,6 +294,35 @@ export const auth = defineAuth({
 
 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 **pages/index.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="pages/index.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" />
@@ -378,24 +396,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 **src/App.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 **pages/index.tsx** file and render the `user` property from the `useAuthenticator` hook.
 
 ```tsx title="pages/index.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>
   )
 }
 ```