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 index c1be1953949..9b2f7a006dd 100644 --- 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 `
` 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 - - {({ signOut, user }) => ( + + + + {children} + + + // highlight-end -
- {/*...*/} - // highlight-next-line - -
- )} - // highlight-next-line - - ) + ); } ``` 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(); + +export default function App() { + + // highlight-start + const { signOut } = useAuthenticator(); + // highlight-end + + // ... + + return ( +
+ {/* ... */} + // highlight-next-line + +
+ ); +} +``` + Try out your application in your localhost environment again. You should be presented with a login experience now.