NextJS + Amplify V6 signIn command returns User needs to be authenticated to call this API even when its runned in client side with SSR enabled
#12866
Comments
|
hello @muratcali . Sorry to hear you are experiencing issues with the library. We will reproduce this issue and will follow up with any updates |
cwomack
added
Auth
|
hey @muratcali . I'm not able to reproduce the issue, the sign-in API is working on my end. The sign-in API shouldn't return the Could you clarify whether the API is returning or throwing an error ? |
|
Hello, @muratcali 👋. I couldn't reproduce this either when following the docs for using Auth and the Can you share a little more about what you're trying to do on the server side? With you setting |
|
Hey, I'm facing a similar issue using aws-amplify "^6.0.12" and nextjs "14.1.0" with app router, in client side everything works as expected, but then hitting my middleware or any backend route with a request shows that the authenticated user is not defined. Error in middleware/backend routes: I followed the updated documentation, this is my middleware.ts file: This is my login function: (being called in a client page with "use client" statement) And this is how I'm calling this handleSignIn function in my login page: And lastly, this is how I'm setting up AWS Amplify in both server and client sides: If you need more information feel free to ping me. |
|
Hey guys my bad 😅. I just find out that this line: Was the cause of the issue for me, I saw it here in the docs so I never thought that line will be causing issues in my app lol. Let me know if that's an expected behavior. But I believe it's not. Now everything works great! |
|
Thanks for your help and message. @israx the error im receiving is @cwomack Here are some code snippets from my serverside code: Middleware.tsx import { match } from "@formatjs/intl-localematcher";
import Negotiator from "negotiator";
import { site } from "./configuration";
import { NextRequest, NextResponse } from "next/server";
import { runWithAmplifyServerContext } from "@/utils/amplifyServerUtils";
import { fetchAuthSession } from "aws-amplify/auth/server";
//prettier-ignore
const { languages: { locales } } = site;
//prettier-ignore
const { languages: { defaultLocale } } = site;
function getLocale(request: NextRequest) {
let headers: any = {
"accept-language": request.headers.get("accept-language"),
};
const languages = new Negotiator({ headers }).languages();
return match(languages, locales, defaultLocale);
}
export async function middleware(request: NextRequest) {
const response = NextResponse.next();
const { pathname } = request.nextUrl;
const authenticated = await runWithAmplifyServerContext({
nextServerContext: { request, response },
operation: async (contextSpec) => {
try {
const session = await fetchAuthSession(contextSpec);
console.log(session);
return session.tokens !== undefined;
} catch (error) {
console.log(error);
return false;
}
},
});
const locale = getLocale(request);
const pathnameHasLocale = locales.some(
(locale) =>
pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
);
if (pathname.includes("/portal") && authenticated) {
const dashboardPath = pathnameHasLocale
? `${pathname}/dashboard`
: `/${locale}${pathname}/dashboard`;
if (pathname === `/${locale}/portal`) {
request.nextUrl.pathname = dashboardPath;
return Response.redirect(request.nextUrl);
}
if (pathnameHasLocale) return;
request.nextUrl.pathname = `/${locale}${pathname}`;
return Response.redirect(request.nextUrl);
}
if (pathname.includes("/portal") && !authenticated) {
request.nextUrl.pathname = `/${locale}/`;
return Response.redirect(request.nextUrl);
}
if (!pathname.includes("/portal")) {
if (pathnameHasLocale) return;
request.nextUrl.pathname = `/${locale}${pathname}`;
return Response.redirect(request.nextUrl);
}
}
export const config = {
matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
};AmplifyServerUtils.tsx import { createServerRunner } from "@aws-amplify/adapter-nextjs";
import config from "@/amplifyconfiguration.json";
export const { runWithAmplifyServerContext } = createServerRunner({
config,
});Thanks in advance. |
|
hello @muratcali . It seems that |
|
I am experiencing this error as well. In my scenario (which may differ from the OP's), the issue appears to be happening only when I'm using a custom hostname during development; the issue does not occur when using Here is a test repo with repro steps in the readme: https://github.com/ryanwalters/amplify-6 If I were to hazard a guess, Amplify is successfully writing the cookies but to the wrong domain. So when it tries to read those cookies to call Maybe there should be an option to pass an instance of Amplify.configure(config, {
ssr: true,
cookieStorage: new CookieStorage({
domain: 'mydomain.com',
...
}),
}); |
|
Hi @ryanwalters Currently, |
|
Hi @muratcali thanks for providing more details. Could you do the following for verifying a few things:
Thanks. |
|
@muratcali, just wanted to check in and see if you saw @HuiSF's comment and recommendations above. Can you also see if disabling the middleware changes anything to see if we can isolate it to that even further? Thanks |
cwomack
added
pending-response
and removed
investigating
|
Closing this issue as we have not heard back from you. If you are still experiencing this, please feel free to reply back and provide any information previously requested and we'd be happy to re-open the issue. Thank you! |
|
I have the same issue, auth tokens are not stored for the ms teams tab. So I get user needs to be authenticated to call this api error. |
By "ms teams tab", is this tab under a different domain (other than the domain you have your end users signed in)? @didemkkaslan |
Before opening, please confirm:
JavaScript Framework
Next.js
Amplify APIs
Authentication
Amplify Version
v6
Amplify Categories
No response
Backend
Amplify CLI
Environment information
Describe the bug
When I run the signIn command imported from
import { signIn, type SignInInput } from "aws-amplify/auth";in a file marked withuse clientit returns te following error:User needs to be authenticated to call this API. Ive also enables SSR inside Amplify.configure. I really can't figure out how to fix this problem for days now. Ive followed every step in the official docs. Thanks in advance.Expected behavior
The command needs to sign me in.
Reproduction steps
Code Snippet
Login.tsx:
useSignIn.ts:
layout.tsx:
amplifyConfigureOnClient.ts:
Log output
aws-exports.js
No response
Manual configuration
No response
Additional configuration
No response
Mobile Device
No response
Mobile Operating System
No response
Mobile Browser
No response
Mobile Browser Version
No response
Additional information and screenshots
No response
The text was updated successfully, but these errors were encountered: