英文:
NextJS 13.4 problems with aws amplify authenticator
问题
I want to go from CRA to Next.js but I am having troubles integrating AWS Amplify authentication.
The Amplify login form does show up but when trying to sign in, it gives me the following error:
Error
[ERROR] 40:38.8 AuthError -
Error: Amplify has not been configured correctly.
The configuration object is missing required auth properties.
This error is typically caused by one of the following scenarios:
1. Did you run `amplify push` after adding auth via `amplify add auth`?
See https://aws-amplify.github.io/docs/js/authentication#amplify-project-setup for more information
2. This could also be caused by multiple conflicting versions of amplify packages, see (https://docs.amplify.aws/lib/troubleshooting/upgrading/q/platform/js) for help upgrading Amplify packages.
src/app/layout.tsx
import './globals.css';
import { Inter } from 'next/font/google';
import '@aws-amplify/ui-react/styles.css';
import { Amplify } from "aws-amplify";
import awsExports from "../aws-exports";
Amplify.configure({ ...awsExports, ssr: true });
const inter = Inter({ subsets: ['latin'] })
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
)
}
src/app/page.tsx
import { withAuthenticator } from "@aws-amplify/ui-react";
function Home() {
return (
<div>
<h1>Home</h1>
</div>
)
}
export default withAuthenticator(Home);
- Tried a fresh install of Next.js
amplify pull
<details>
<summary>英文:</summary>
I want to go from CRA to nextjs but I am having troubles integrating AWS Amplify authentication.
The amplify login form does show up but when trying to sign in it gives me the following error:
**Error**
[ERROR] 40:38.8 AuthError -
Error: Amplify has not been configured correctly.
The configuration object is missing required auth properties.
This error is typically caused by one of the following scenarios:
1. Did you run `amplify push` after adding auth via `amplify add auth`?
See https://aws-amplify.github.io/docs/js/authentication#amplify-project-setup for more information
2. This could also be caused by multiple conflicting versions of amplify packages, see (https://docs.amplify.aws/lib/troubleshooting/upgrading/q/platform/js) for help upgrading Amplify packages.
**src/app/layout.tsx**
import './globals.css'
import { Inter } from 'next/font/google'
import '@aws-amplify/ui-react/styles.css';
import { Amplify } from "aws-amplify";
import awsExports from "../aws-exports";
Amplify.configure({ ...awsExports, ssr: true });
const inter = Inter({ subsets: ['latin'] })
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
)
}
**src/app/page.tsx**
"use client"
import { withAuthenticator } from "@aws-amplify/ui-react";
function Home() {
return (
<div>
<h1>Home</h1>
</div>
)
}
export default withAuthenticator(Home);
- Tried a fresh install of NextJS
- `amplify pull`
</details>
# 答案1
**得分**: 1
请尝试在`page.tsx`中使用您的导出文件配置Amplify，而不是在`layout.tsx`中。
**src/app/page.tsx**
```jsx
'use client';
import { Amplify } from 'aws-amplify';
import { withAuthenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
import awsExports from '../aws-exports';
Amplify.configure(awsExports);
function Home() {
return (
<div>
<h1>Home</h1>
</div>
)
}
export default withAuthenticator(Home);
src/app/layout.tsx
import './globals.css';
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] })
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
)
}
英文:
Please try configuring Amplify with your exports file in page.tsx instead of layout.tsx.
src/app/page.tsx
'use client';
import { Amplify } from 'aws-amplify';
import { withAuthenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
import awsExports from '../aws-exports';
Amplify.configure(awsExports);
function Home() {
return (
<div>
<h1>Home</h1>
</div>
)
}
export default withAuthenticator(Home);
src/app/layout.tsx
import './globals.css'
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
)
}
答案2
得分: 1
我找到了 https://github.com/NeiruBugz/next-cognito-auth/blob/main/app/auth/provider.tsx，这是为Next.js App Router项目提供Amplify身份验证机制的有效方法。所以，你只需要将客户端组件作为提供者，配置Amplify一次，然后用这个提供者包装任何子组件。此外，你可以只返回 null，配置Amplify，然后将这个组件放在RootLayout中，像这样：<AmplifyProvider />。
一个小提示：我只是把Amplify作为我的自定义UI的身份验证提供程序。
英文:
I found https://github.com/NeiruBugz/next-cognito-auth/blob/main/app/auth/provider.tsx this as the working way to provide Amplify Auth mechanism for Next.js App Router project. So, you just have a client component as a Provider, where you configure Amplify once and wrap any child with this Provider. Also, you can just return null, configure Amplify and put this component in RootLayout like <AmplifyProvider />
A little notice: I'm using Amplify just as an Auth provider with my own UI
答案3
得分: 0
很高兴回答这个问题。在应用程序路由器中，它介绍了服务器组件和客户端组件。服务器组件和客户端组件之间有明确的网络边界。服务器组件中的 JS 代码只在服务器上执行和保存。
Amplify Authenticator 作为客户端组件运作。为了使其正常工作，您需要确保在客户端正确配置它，使用 Amplify.configure。通过在文件顶部添加 'use client' 指令，您告诉路由器该文件中的代码应在客户端上执行。
英文:
Glad to answer this question. In the App Router, it introduces Server Components and Client Components. There is a clear network boundary between Server Components and Client Components. JS code in Server Components only gets executed and kept on the server.
Amplify Authenticator works as a Client Component. In order to get it working properly. You need to ensure configure it properly with Amplify.configure on the client side. By adding 'use client' directive to the top of a file, you let the router know the code within the file is supposed to be executed on the client.
答案4
得分: 0
Amplify 是一个客户端库。在 Nextjs 13 中，对于所有客户端库，你需要创建一个提供程序并将其包装在布局文件中。
在这种情况下，
src/lib/providers.tsx
"使用客户端";
import { Amplify } from "aws-amplify";
import awsconfig from "../aws-exports";
import "@aws-amplify/ui-react/styles.css";
Amplify.configure({ ...awsconfig, ssr: true });
export default function AmplifyProvider({ children }: React.PropsWithChildren) {
return <>{children}</>;
}
layout.tsx
import AmplifyProvider from "@/lib/providers";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<AmplifyProvider>
<body className={inter.className}>{children}</body>
</AmplifyProvider>
</html>
);
}
英文:
Amplify is a client-side library. For all client-side libraries in Nextjs 13, you need to create a provider and wrap it in layout file.
In this case,
src/lib/providers.tsx
"use client";
import { Amplify } from "aws-amplify";
import awsconfig from "../aws-exports";
import "@aws-amplify/ui-react/styles.css";
Amplify.configure({ ...awsconfig, ssr: true });
export default function AmplifyProvider({ children }: React.PropsWithChildren) {
return <>{children}</>;
}
layout.tsx
import AmplifyProvider from "@/lib/providers";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<AmplifyProvider>
<body className={inter.className}>{children}</body>
</AmplifyProvider>
</html>
);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论