Пользовательское состояние Google Auth не вызывает условного рендеринга компонента после аутентификации - PullRequest
0 голосов
/ 23 апреля 2020

Я использую AWS усиление для аутентификации пользователя в моем приложении ReactJS. Когда пользователь не идентифицирован, компонент Login отображается, а когда он проходит аутентификацию, отображается компонент Home.

Но у меня есть некоторые проблемы, связанные с этим, когда я аутентифицируюсь с помощью Google, я перенаправлен на ' / 'но компонент Login снова отображается, и в реагирует devtools состояние и компоненты отсутствуют, если я вручную переосмываю sh, они появляются.

Функция аутентификации:

<Button onClick={() => {Auth.federatedSignIn({ provider: "Google" })}}></Button>

Контекст авторизации:

import React, { useState, useContext, createContext, useEffect, useMemo } from "react";
import { Auth, Hub } from "aws-amplify";

export const UserContext = createContext(null);

export const UserProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    Auth.currentAuthenticatedUser()
      .then((user) => setUser(user))
      .catch(() => setUser(null));
    // eslint-disable-next-line
  }, []);

  const values = useMemo(() => ({ user, login, logout }), [user]);

  return <UserContext.Provider value={values}>{children}</UserContext.Provider>;
};

export const useUser = () => {
  const context = useContext(UserContext);

  if (context === undefined) {
    throw new Error("`useUser` hook must be used within a `UserProvider` component");
  }
  return context;
};

Приложение. js

import React from "react";
import "./App.css";
import Amplify from "aws-amplify";
import awsconfig from "./aws-exports";
import { Button } from "aws-amplify-react";
import LoginForm from "./components/Auth/LoginForm";
import { useUser } from "./context/authContext";
import Home from "./components/Home";
import { Auth, Hub } from "aws-amplify";

Amplify.configure(awsconfig);

function App() {
  const { user } = useUser();

  return <div className="App">{user ? <Home /> : <LoginForm />}</div>;
}

// export default App;
export default App;

Что-то не так с моим authContext? Или я должен использовать response-router-dom для этого варианта использования?

спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...