Question: Using Authenticator with App Router

[zvictor]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Authenticator

How is your app built?

Next.js

What browsers are you seeing the problem on?

Chrome, Firefox

Please describe your bug.

Note: Similar issues have been reported before, but I believe there are important nuances on this one.

While using the <Authenticator> component (as a wrapper of my App) to setup Amplify in the new Nextjs app router, I could notice that logged in users would sometimes be mistakenly redirected to /sign-in but been shown a 404 page instead of the signInUp form.

I did some debugging and could notice that useAuthenticator is returning idle as route.

amplify-ui/packages/react/src/components/Authenticator/Router/Router.tsx

Line 61 in c021e49

const { route } = useAuthenticator(({ route }) => [route]);

@ErikCH commented on a similar issue:

On refresh the route will temporarily be in a setup or idle state before it transitions to an authenticated state. If you check route as soon as the page loads, and redirect somewhere while it's in the idle or setup state, that could be an issue.

...

In this scenario if someone goes to an authenticated route, and it's an idle or setup state then we redirect back to /login. Which will then by that time see the user is authenticated and will re-route back to the authenticated page.

What's the expected behaviour?

1. Logged in users should not be redirected to /sign-in
2. Logged in users should not see a 404 page when visiting /sign-in

Help us reproduce the bug!

1. Start a new next.js project
2. Set middleware.ts as defined at the Server-Side Rendering guide
3. Add Authenticator to /app/providers.tsx, as shown below:

'use client'

import { Amplify } from 'aws-amplify'
import { Authenticator } from '@aws-amplify/ui-react'
import * as amplifyConfig from '@/modules/auth/config'
import { ThemeProvider as NextThemesProvider } from 'next-themes'
import '@aws-amplify/ui-react/styles.css'

Amplify.configure(amplifyConfig, { ssr: true })

export function Providers({ children }: { children: React.ReactNode }) {
  return (
      <NextThemesProvider attribute="class" defaultTheme="system">
        <Authenticator variation="modal">{children}</Authenticator>
      </NextThemesProvider>
  )
}

Once that is done you should notice the problem reported as long as you try navigating and reloading the pages while logged in.

Code Snippet

  "dependencies": {
    "@aws-amplify/adapter-nextjs": "1.0.10",
    "@aws-amplify/auth": "6.0.10",
    "@aws-amplify/ui-react": "6.1.0",
    "aws-amplify": "6.0.10",
    "next": "14.0.4",
    "next-themes": "0.2.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
  }

Related to

• Authenticator component returns idle in authenticated state #1332
• Discussion: Use cases for useAuthenticator Hook #1497
• [FR: Authenticator] Support App Router in NextJS 13 #3727

[reesscot]

Hi @zvictor,
I'm sorry you're having trouble with the Authenticator. Can you please provide more details on how you are doing the redirect to your /sign-in page? The Authenticator is a Client Component and doesn't have any control over routing in Next.js App Router. I'm unclear what you're trying to accomplish using the useAuthenticator hook, but that will not work in a server component. The best way to handle routing is to use middleware to do the /sign-in redirect on the server side. You may want to take a look at this guide:
https://docs.amplify.aws/gen2/start/quickstart/nextjs-app-router/

[zvictor]

Oh, you are right! I didn't remember setting up middleware.ts in my app and I was really struggling to understand why there was a redirection happening. I thought there was some magic happening inside Authenticator, but couldn't find it in the source code 🤦

Anyway, the content of my middleware.ts is the same recommended by the Server-Side Rendering guide, verbatim.

---

the bug description has been updated to include this info

[reesscot]

@zvictor Can you clarify how you are trying to use useAuthenticator in your situation? It's not recommended to wrap your application in Authenticator when using the Next.js App Router, it would be better to render it on your /sign-in page instead and use middleware to protect your routes. We have a guide that will be coming out soon showing this pattern: aws-amplify/docs#6776

[reesscot]

@zvictor Following up here to say that our Next.js App Router (Server Components) guide has been published.

Did you have any further questions?

[reesscot]

Closing this out as we haven't heard back. Please open a new issue if you are still having trouble with App Router.