User needs to be authenticated to call this API

JoseeWouters commented 9 months ago

Before creating a new issue, please confirm:

[X] I have searched for duplicate or closed issues and discussions.
[X] I have tried disabling all browser extensions or using a different browser
[X] I have tried deleting the node_modules folder and reinstalling my dependencies
[X] 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?

No response

Which region are you seeing the problem in?

No response

Please describe your bug.

I have a NextJS 14 app and I want to create a mobile app with Capacitor, so I need a static/client side app. In my browser I can login just fine, but when I open it in the Xcode simulator i get the following error: "User needs to be authenticated to call this API". I don't understand the problem.

I use the <Authenticator /> in a component like advised here: https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#using-third-party-packages-and-providers and I then import this in app/layout.tsx.

I created a <ConfigureAmplifyClientSide /> component like advised here: https://docs.amplify.aws/nextjs/build-a-backend/server-side-rendering/nextjs/#configure-amplify-library-for-client-side-usage (and then the part meant for the App Router application).

What's the expected behaviour?

To be able to login

Help us reproduce the bug!

When opening this in Xcode Simulator or on an iPhone, the problem occurs

Code Snippet

// Put your code below this line.

Console log output

There are no console messages

Additional information and screenshots

No response

ioanabrooks commented 9 months ago

Hi @JoseeWouters, please provide more details. Have you configured the backend, set up authentication and called Amplify.configure as indicated here and here?

JoseeWouters commented 9 months ago

Yes, the backend works, I've done all those steps. in the browser everything works perfectly. The problem occurs in the Xcode simulator and on the iPhone. For this I export the static build as instructed by Next.js and run this according to the instructions of Capacitor.

rastoelias commented 9 months ago

I'm encountering a similar issue with the withAuthenticator HOC in a Next.js 14 app integrated with AWS Amplify gen 2. However, my experience is slightly different:

The error occurs exclusively in Safari. Chrome, Firefox, and Opera do not exhibit this issue.
The error message appears when attempting to sign in or create an account.
Interestingly, when creating an account, after submitting the confirmation code, I receive the error message, but the user is still created and confirmed successfully in AWS Cognito.

This leads me to believe that the issue might be related to how Safari handles sessions, cookies, or specific security policies that differ from other browsers. Here's a brief overview of my setup and the error:

Setup:

Next.js 14 with App Router.
AWS Amplify gen 2.
Using withAuthenticator for authentication.

JoseeWouters commented 9 months ago

That's an interesting theory, Xcode simulator is also Safari.

I remade my app in Vue, because that worked before without any problems. It was still on V5, I migrated to V6 and tried this in Xcode and Safari, works out of the box.

So I now think it's indeed related to Safari, but in combination with Next.js.

storcswap commented 9 months ago

I had the same problems. Came to this thread and can confirm it is specific to Safari. I tried debugging myself.

Can anyone confirm it's just for sandbox? I don't want to get further to find out it doesn't work for prod either.

calebpollman commented 9 months ago

@rastoelias @storcswap Based on your comments here it sounds like a different issue than the issue @JoseeWouters is encountering as the projects are using Amplify Gen2 (rather than migrating from Amplify JS v5 to v6). Suggest opening a new issue in the Amplify Backend repo

calebpollman commented 9 months ago

@JoseeWouters Apologies for the churn here. Transferring this issue over to the Amplify JS team for further triage since it reads as an issue with usage of NextJS App Router and Capacitor, not the Authenticator itself

espenbye commented 9 months ago

I am experiencing the same issues. When running npm run dev and opening the application in Safari on http://localhost:3000 I get the "User needs to be authenticated to call this API" error.

However, if I place it behind a domain - everything works as normal (also when deployed to AWS).

ssh -R mydummydomain:80:localhost:3000 serveo.net

Next.js 14 & Pages dir.

danshev commented 9 months ago

Exact same experience: error when running locally (npm run dev), fine "up" on AWS.

cwomack commented 9 months ago

For anyone on this issue, want to let you all know that we are investigating this and will provide updates as soon as we can.

munhzol commented 9 months ago

import { Amplify } from "aws-amplify"; import config from "@/amplifyconfiguration.json"; // Amplify.configure(config);

Amplify.configure(config, { ssr: true, // required when using Amplify with Next.js });

Meags27 commented 9 months ago

Confirming I have the same issue. I am using Playwright to test chromium, firefox and webkit and webkit throws "UserUnAuthenticatedException: User needs to be authenticated to call this API." when trying to call autoSignIn(); after signing up, but the other two work fine.

dhallX commented 8 months ago

have the same issue 100%. i have tested and built my app in web, android and iOS from capacitor. the bug gets triggered when the signIn() from the auth module is called. android and web are working. IOS is the only one that does NOT. one main difference we see is that in the network tab four calls are happening to Cognito when it works, and only two calls happens in iOS.

MicrosoftTeams-image (2) MicrosoftTeams-image (7)

HuiSF commented 8 months ago

Hi all,

The error User needs to be authenticated to call this API was triggered by an internal call to getCurrentUser() for dispatching the Auth Hub event signedIn.

Why is this happening even after the sign-in succeeded on Safari?

When you configure Amplify for SSR use cases with Amplify.configure(config, { ssr: true }), Amplify initializes a CookieStorage under the hood to store the end user auth tokens in the cookie store instead of localStorage. And it sets the cookie attribute secure: true by default for maximum security.

When you run your Next.js app on Safari with a localhost that doesn't have https enabled, the cookies set with secure: true will be ignored by Safari. Therefore, after a successful sign-in, the auth tokens were not stored in the cookie store, and the subsequent getCurrentUser() fails with the error you saw.

This is a known limit or difference compared to Chrome and Firefox, where the latter allow secure cookies to be set from a http host. From my observation, after deploying Next.js to a https domain, the app runs normally on Safari.

As a workaround you may consider to run the dev server with https protocol with a self signed certificate for testing with Safari. (reference)

aws-amplify / amplify-js