NextJS Amplify auth cognito not authenticated on server aws - amazon-web-services

Question

I'm using cognito for authentication of my app.
In local enviroment everthing it's ok whether launch yarn dev or yarn build and yarn start.
In the amplify server deploy the SSR authentication not working: return always "not authenticated".
This is mine package.json:
{
"name": "xxxxxxxxxxxx",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start -p ${PORT:=3000}",
"lint": "next lint"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^6.1.2",
"#fortawesome/free-regular-svg-icons": "^6.1.2",
"#fortawesome/free-solid-svg-icons": "^6.1.2",
"#fortawesome/react-fontawesome": "^0.1.18",
"#improbable-eng/grpc-web": "^0.14.0",
"#improbable-eng/grpc-web-node-http-transport": "^0.14.0",
"#nivo/bar": "^0.74.0",
"#nivo/core": "^0.74.0",
"#nivo/geo": "^0.74.0",
"#nivo/pie": "^0.74.0",
"#nivo/scatterplot": "^0.74.0",
"#nivo/treemap": "^0.74.0",
"apexcharts": "^3.35.3",
"aws-amplify": "^4.3.34",
"axios": "^0.24.0",
"bootstrap": "^5.2.0",
"cors": "^2.8.5",
"emotion": "^11.0.0",
"eslint-config-next": "^12.2.4",
"google-protobuf": "^3.17.2",
"human-readable-numbers": "^0.9.5",
"jspdf": "^2.5.0",
"next": "12.0.0",
"next-i18next": "^12.0.0",
"rc-slider": "10.0.1",
"react": "^17.0.2",
"react-apexcharts": "^1.4.0",
"react-bootstrap": "^2.4.0",
"react-dom": "^17.0.2",
"react-read-more-read-less": "^1.0.7",
"react-sparklines": "^1.7.0",
"react-toastify": "^9.0.8",
"react-tradingview-widget": "^1.3.2",
"sass": "1.32.13",
"sharp": "^0.29.3",
"swr": "^0.5.6",
"xmlhttprequest": "^1.8.0"
},
"devDependencies": {
"eslint": "7.32.0"
}
}
This is _app.js (pages/_app.js):
import getConfig from "next/config";
import { appWithTranslation } from "next-i18next";
import "../public/app.scss";
import { Amplify } from "aws-amplify";
import awsExports from "../src/aws-exports";
import React from "react";
import AuthContext from "../components/context/AuthContext";
import { Header } from "../components/dashboard/Header";
import { Footer } from "../components/dashboard/Footer";
import { SSRProvider } from "react-bootstrap";
Amplify.configure({ ...awsExports, ssr: true });
export const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
function App({ Component, pageProps }) {
return (
<SSRProvider>
<AuthContext>
<Header />
<Component {...pageProps} />
<Footer />
</AuthContext>
</SSRProvider>
)
}
export default appWithTranslation(App);
The test page (pages/test.js):
import { withSSRContext } from "aws-amplify";
export default function Test({user}) {
return <h5>{user}</h5>
}
export async function getServerSideProps({req}) {
const { Auth } = withSSRContext({ req });
try {
const user = await Auth.currentAuthenticatedUser();
return {
props: {
msg: user.username
},
};
} catch (err) {
console.log(err)
return {
props: {
msg: err
}
}
}
}
That's the error: "The user is not authenticated"
But if I use useEffect in function to retrieve user all is working good.

Answer 1

Oh wow! It's weird. Disabling Restrict access to app resolve the problem (https://docs.aws.amazon.com/amplify/latest/userguide/access-control.html).
Anyone that can answer scientifically?