Question 187573 in Amazon Web Sevices Question posted in
The official Amazon Web Services documentation can be found here.

Amazon web services – NextJS 13.4 problems with aws amplify authenticator

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
Tags:

2

Answers


  1. 0

    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>
  )
}
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search