Next JS Приложение с Auth0 и Redux не может получить сеанс Auth при обновлении вручную

Question

Проблема: если я обновлю sh страницу, триггер getInitialProps вызовет сообщение об ошибке, описанное в нижней части страницы, которое указывает на проблему, возникающую вплоть до моей обертки-редуктора в /_app.js, который я считаю проблемой. Такое поведение происходит только на refre sh странице. Если я go со страницы, которая не имеет getInitialProps, а затем перейти на сторону клиента к странице с getInitialProps, он работает нормально. Если я затем вручную обновлю sh страницы, это вызовет ошибку.

Это мои настройки для приставки, и я попробовал ее с версией на основе классов с теми же результатами, так что это не проблема.

/ _ app. js

import { Provider } from "react-redux";
import withRedux from "next-redux-wrapper";
import { initStore } from "../store";

import "./styles.scss";

const MyApp = props => {
  const { Component, pageProps, store } = props;
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
};

MyApp.getInitialProps = async ({ Component, ctx }) => {
  const pageProps = Component.getInitialProps
    ? await Component.getInitialProps(ctx)
    : {};
  return { pageProps };
};

export default withRedux(initStore)(MyApp);

это индекс getInitialProps в индексе. js page /pages/index.js

OpenApplications.getInitialProps = async ({ store }) => {

  const stateDB = await getApplications();

  // populate state with all applications from DB
  await store.dispatch(populateApplicationsState(stateDB));

  return store;
};

это внутренняя настройка API с Auth /api/applications.js

import auth0 from "../../../../lib/auth/auth0";
// auth0.requireAuthentication ensures that only authenticated users access this internal API path
export default auth0.requireAuthentication(async (req, res) => {
  // get user profile from Auth0 on the server side
  const { user } = await auth0.getSession(req);

process the rest of the stuff...
})

это код, лежащий в основе начальной конфигурации Auth0 ... / auth / auth0. js

import { initAuth0 } from "@auth0/nextjs-auth0";
import config from "./config";

export default initAuth0({
  clientId: config.AUTH0_CLIENT_ID,
  clientSecret: config.AUTH0_CLIENT_SECRET,
  scope: config.AUTH0_SCOPE,
  domain: config.AUTH0_DOMAIN,
  redirectUri: config.REDIRECT_URI,
  postLogoutRedirectUri: config.POST_LOGOUT_REDIRECT_URI,
  session: {
    cookieSecret: config.SESSION_COOKIE_SECRET,
    cookieLifetime: config.SESSION_COOKIE_LIFETIME,
    cookieSameSite: "lax",
    storeIdToken: true,
    storeRefreshToken: true,
    storeAccessToken: true
  }
});

Это вкладка приложения в Chrome Dev Tools, и она показывает a0state и a0session. Когда я ссылаюсь sh, состояние исчезает, но повар ie остается. На незащищенной странице он возвращается после того, как я предполагаю, что при вызове для проверки правильности сеанса, но на защищенной странице возникает ошибка, описанная выше.

ошибка, если requireAuthtentication ВЫКЛ.

Ошибка, если requireAuthentication ВКЛ.

Так что я подозреваю, что всякий раз, когда начинается ручное обновление страницы sh, auth0 теряет состояние и не передает его в req API, так что он не проходит проверку подлинности, а также не проходит. получить сеанс от пользователя. Если я удаляю auth0.requireAuthentication, он все равно не работает, потому что я зависим от user, который исходит от auth0.getSession(req);, который, тем не менее, терпит неудачу и в любом случае вызывает ошибку, потому что user приходит undefined. Я думаю, что это происходит из-за того, что сеанс не проходит правильно из-за установки оболочки Redux, которая не передает необходимую информацию или запускает необходимый Auth для этой информации. На данный момент я немного растерялся, так как все эти инструменты являются новыми для меня, и я не уверен, где что-то идет не так и где это можно исправить, и поскольку взаимодействие трех разных библиотек становится еще сложнее. Помогите разобраться в этой супер назойливой ошибке:)

Я проверял везде и не мог найти решение или аналогичную настройку, чтобы получить сравнение и выяснить потенциальную ошибку, которую я допустил в моей настройке. Все очень похоже на примеры в документации для различных инструментов next-wrapper-redux / nextjs-auth0 / next