NextJS 13.4 problems with aws amplify authenticator

Asked 8/6, 2023 at 13:47 Answered 27/6, 2023 at 19:0

reactjs amazon-web-services next.js amazon-cognito aws-amplify

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

Tiddly answered 8/6, 2023 at 13:47 Comment(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>
  )
}

Suffragette answered 9/6, 2023 at 16:33 Comment(1)

This is what I seem to be doing. I am confused by the "use client" and how that relates to security. Does this expose the aws-exports to the client? Just trying out this app directory approach in place of the pages dir when it comes to nextJS 13. – Clearstory 21/6, 2023 at 3:14

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

Sorrells answered 16/6, 2023 at 9:20 Comment(0)

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.

Guilty answered 23/6, 2023 at 16:17 Comment(0)

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

Terminate answered 27/6, 2023 at 19:0 Comment(0)

Recommended topics

Hot tags