From f04eafaa76fc2d1181f1c7b3bbbbd781389f6bf5 Mon Sep 17 00:00:00 2001
From: Jay2113 <jay.ambrish.raval@gmail.com>
Date: Wed, 9 Oct 2024 03:01:59 -0400
Subject: [PATCH 1/2] remove Authenticator ref from src/App.tsx

---
 .../[platform]/start/quickstart/index.mdx     | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/pages/[platform]/start/quickstart/index.mdx b/src/pages/[platform]/start/quickstart/index.mdx
index 43813e53684..d779036c277 100644
--- a/src/pages/[platform]/start/quickstart/index.mdx
+++ b/src/pages/[platform]/start/quickstart/index.mdx
@@ -567,24 +567,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 **src/App.tsx** file and render the `user` property from the `useAuthenticator` hook.
 
 ```tsx title="src/App.tsx"
 // ... imports
 
 function App() {
+  // highlight-next-line
+  const user = useAuthenticator().user;
+
   // ...
+
   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>
+      {/* ... rest of the UI */}
+    </main>
   )
 }
 ```

From 760c51d13a791ff79a4f7a9b94efdfe1ae50c3e4 Mon Sep 17 00:00:00 2001
From: Jay2113 <jay.ambrish.raval@gmail.com>
Date: Wed, 9 Oct 2024 14:52:59 -0400
Subject: [PATCH 2/2] update code style

---
 src/pages/[platform]/start/quickstart/index.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/[platform]/start/quickstart/index.mdx b/src/pages/[platform]/start/quickstart/index.mdx
index d779036c277..757302d6aa1 100644
--- a/src/pages/[platform]/start/quickstart/index.mdx
+++ b/src/pages/[platform]/start/quickstart/index.mdx
@@ -574,7 +574,7 @@ In the application client code, let's also render the username to distinguish di
 
 function App() {
   // highlight-next-line
-  const user = useAuthenticator().user;
+  const { user, signOut } = useAuthenticator();
 
   // ...
 
@@ -582,7 +582,7 @@ function App() {
     <main>
       // highlight-next-line
       <h1>{user?.signInDetails?.loginId}'s todos</h1>
-      {/* ... rest of the UI */}
+      {/* ... */}
     </main>
   )
 }