Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 9, 2024
Merged

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

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2c8eb4f
update app router template to revise todo state and authenticator pla…
Jay2113 Oct 9, 2024
639d91b
update code style
Jay2113 Oct 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 62 additions & 33 deletions ...pages/[platform]/start/quickstart/nextjs-app-router-client-components/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 App() {

// 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" />
Expand Down Expand Up @@ -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() {
// 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>
)
}
```
Expand Down