Я использую 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 для этого варианта использования?
спасибо