NextJS Amplify auth cognito 未在服務器 aws 上進行身份驗證

Question

我正在使用 cognito 對我的應用程序進行身份驗證。 在本地環境中，無論啟動yarn dev還是yarn build和yarn start都可以。

在放大服務器中部署 SSR 身份驗證不起作用：始終返回“未通過身份驗證”。

這是我的 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"
  }
}

這是 _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);

測試頁面（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
            }
        }
    }
}

那是錯誤：“用戶未通過身份驗證”但是如果我在 function 中使用 useEffect 來檢索用戶，一切正常。

Answer 1

哇哦。 有點奇怪。 禁用限制對應用程序的訪問可解決問題 (docs.aws.amazon.com/amplify/latest/userguide/...)。

誰能科學地回答？