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

Jump to bottom
Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

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

wants to merge 1 commit into from

Conversation

osama-rizk
Copy link
Contributor

@osama-rizk osama-rizk commented Jul 22, 2025 •
edited
Loading

Description of changes:

When using Authenticator component directly in Next.js App Router's layout.tsx, a build error occurs:
Attempted import error: 'useForm' is not exported from 'react-hook-form' This is because Next.js App Router renders components on the server by default (Server-Side Rendering) Authenticator component requires browser-only APIs and client-side functionality Incompatibility between server-side rendering and client-side dependencies causes the import error. While "use client" is written in the doc example but it is not compatible with meta data that is usually part of Layout.tsx. The Solution is to Create a separate client component wrapper around the Authenticator:
Create app/AuthenticatorWrapper.tsx:

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

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

Use in app/layout.tsx:

import AuthenticatorWrapper from "./AuthenticatorWrapper";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <AuthenticatorWrapper>{children}</AuthenticatorWrapper>
      </body>
    </html>
  );
}

Related GitHub issue #8219, if available:

Instructions

If this PR should not be merged upon approval for any reason, please submit as a DRAFT

Which product(s) are affected by this PR (if applicable)?

  • amplify-cli
  • amplify-ui
  • amplify-studio
  • amplify-hosting
  • amplify-libraries

Which platform(s) are affected by this PR (if applicable)?

  • JS
  • Swift
  • Android
  • Flutter
  • React Native

Please add the product(s)/platform(s) affected to the PR title

Checks

  • Does this PR conform to the styleguide?

  • Does this PR include filetypes other than markdown or images? Please add or update unit tests accordingly.

  • Are any files being deleted with this PR? If so, have the needed redirects been created?

  • Are all links in MDX files using the MDX link syntax rather than HTML link syntax?

    ref: MDX: [link](https://docs.amplify.aws/)
    HTML: <a href="https://docs.amplify.aws/">link</a>

When this PR is ready to merge, please check the box below

  • Ready to merge

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@hdworld11 hdworld11 Awaiting requested review from hdworld11 hdworld11 will be requested when the pull request is marked ready for review hdworld11 is a code owner

@ShadowCat567 ShadowCat567 Awaiting requested review from ShadowCat567 ShadowCat567 will be requested when the pull request is marked ready for review ShadowCat567 is a code owner

@harsh62 harsh62 Awaiting requested review from harsh62 harsh62 will be requested when the pull request is marked ready for review harsh62 is a code owner

At least 2 approving reviews are required to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@osama-rizk