NextJS 13.4 aws amplify authenticator的问题

deyfvvtc 于 2023-06-22 发布在其他

关注(0)|答案(2)|浏览(136)

我想从CRA转到nextjs，但我在集成AWS Amplify身份验证时遇到了麻烦。放大登录表单确实显示，但当尝试登录时，它给了我以下错误：

错误

[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);

尝试重新安装NextJS
amplify pull

next.js

来源：https://stackoverflow.com/questions/76432539/nextjs-13-4-problems-with-aws-amplify-authenticator

2条答案

按热度按时间

t8e9dugd1#

请尝试在page.tsx而不是layout.tsx中使用导出文件配置Amplify。

*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>
  )
}

赞(0）回复(0）举报 2023-06-22

q3qa4bjr2#

我发现https://github.com/NeiruBugz/next-cognito-auth/blob/main/app/auth/provider.tsx是为Next.js App Router项目提供Amplify Auth机制的工作方式。因此，您只需将一个客户端组件作为Provider，在其中配置Amplify一次，并使用此Provider Package 任何子组件。另外，您可以返回null，配置Amplify并将此组件放置在RootLayout中，如<AmplifyProvider />
一个小小的通知：我使用Amplify作为我自己UI的Auth提供程序

赞(0）回复(0）举报 2023-06-22

我来回答

NextJS 13.4 aws amplify authenticator的问题

2条答案

相关问题

热门标签

最新问答