Обработка сохраняемости аутентификации в React (с помощью Redux и Firebase)

# #reactjs #firebase #authentication #redux #firebase-authentication

Вопрос:

В моем проекте React я реализовал аутентификацию с помощью Firebase. Рабочий процесс выглядит следующим образом — UID, полученный при входе в систему с помощью Google OAuth, используется для запроса пользователей в firestore, и, соответственно, пользователь выбирается. Этот пользователь затем обновляется до состояния redux с помощью соответствующих функций обработчика. Это реализация процесса входа в систему. Функция setUser выполняет задачу обновления состояния redux

 googleAuth = async () => {
    firebase.auth().signInWithPopup(provider).then(async (res) => {
        const uid = res.user.uid;
        const userRef = firestore.collection('users').where('uid', '==', uid);
        const userSnap = await userRef.get();
        if(!userSnap.empty) {
            const user = userSnap.docs[0].data();
            this.props.setUser(user);
        }
        this.props.history.push('/');
    }).catch(err => {
        alert(err.message);
    })
}
 

Наличие поля «Текущий пользователь» в пользовательском состоянии redux в результате вышеупомянутой функции setUser является основой для открытия защищенных маршрутов и отображения соответствующих сведений, связанных с пользователем, в моем проекте. Этот текущий пользователь сохраняется в состоянии с использованием Redux Persist, поэтому, пока я не выхожу, в локальном хранилище хранится объект «Текущий пользователь», что означает, что я вошел в систему.

Однако эта реализация вызывает проблему: если я обновлю локальное хранилище с помощью консоли и установлю текущего пользователя, фактически не войдя в систему с использованием учетных данных Google, приложение распознает меня как вошедшего в систему, и я смогу просматривать все защищенные маршруты. Таким образом, если кто-то копирует данные другого пользователя из локального хранилища своего устройства, он/она может легко получить доступ к своей учетной записи и изменить/удалить важную информацию.

Как правильно реализовать аутентификацию в React, если предположить, что я хочу, чтобы состояние входа сохранялось до тех пор, пока пользователь не выйдет вручную