Skip to content

fix(next-app-router) starter tutorial authenticator build issue #8392

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 1 commit into from
Jul 24, 2025
Merged

fix(next-app-router) starter tutorial authenticator build issue #8392

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
26 changes: 21 additions & 5 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,17 +219,33 @@ 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. In your **app/layout.tsx** file, import the Authenticator UI component and wrap the children or pages components.
The fastest way to get your login experience up and running is to use our Authenticator UI component. To properly integrate it with Next.js App Router, we'll create a client component wrapper and use it in the layout.

First, create an AuthenticatorWrapper.tsx file in your app directory:

```tsx title="app/layout.tsx"
```tsx title="app/AuthenticatorWrapper.tsx"
"use client"

import { Authenticator } from "@aws-amplify/ui-react";

export default function AuthenticatorWrapper({
children,
}: {
children: React.ReactNode;
}) {
return <Authenticator>{children}</Authenticator>;
}
```

Next, update your app/layout.tsx file to import and use the AuthenticatorWrapper component:

```tsx title="app/layout.tsx"

import React from "react";
import { Amplify } from "aws-amplify";
import "./app.css";
// highlight-start
import { Authenticator } from "@aws-amplify/ui-react";
import AuthenticatorWrapper from "./AuthenticatorWrapper";
import "@aws-amplify/ui-react/styles.css";
// highlight-end
import outputs from "@/amplify_outputs.json";
Expand All @@ -245,9 +261,9 @@ export default function RootLayout({
// highlight-start
<html lang="en">
<body>
<Authenticator>
<AuthenticatorWrapper>
{children}
</Authenticator>
</AuthenticatorWrapper>
</body>
</html>
// highlight-end
Expand Down