Как использовать стратегии Passport JS OAuth с React?

Question

Существует довольно много источников, объясняющих, как интегрировать Passport JS для аутентификации пользователя для вашего приложения (с использованием как локальной стратегии, так и стратегии OAuth). Некоторые из них объясняются применительно к типу приложения ReactJS + REST API.

В настоящее время у меня есть некоторый шаблонный код, который в значительной степени работает, однако не так, как я хочу. Мой клиент будет window.location = 'http://localhost:5000/api/auth/${href}' (где 'href', например, 'facebook') всякий раз, когда пользователь нажимает кнопку, принадлежащую поставщику OAuth.

Проблема в том, что это приведет к тому, что приложение React потеряет его состояние (чего я не хочу). Простое получение конечной точки вместо этого в моем случае также не работает, поскольку оно не перенаправляет пользователя на FB для входа.

Answer 1

Не могу дать вам точного ответа, потому что нет кода для работы, но могу сказать, что это то, что я сделал в одном из моих личных проектов с помощью паспорта-google.

1. I Я использовал логин Google в стиле пользовательского интерфейса

вот образец

const GoogleLoginButton = () => {
    const classes = useStyles({});

    return (
        <a href={process.env.REACT_APP_BASE_URL + "/api/v1/users/auth/google"} className={classes.button}>
            <div className={classes.wrapper}>
                <svg className={classes.icon} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 533.5 544.3">
                    <path fill="#4285f4" d="M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z" />
                    <path fill="#34a853" d="M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z" />
                    <path fill="#fbbc04" d="M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z" />
                    <path fill="#ea4335" d="M272.1 107.7c38.8-.6 76.3 14 104.4 40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z" />
                </svg>
            </div>
            <p className={classes.text}>Login with Google</p>
        </a>
    );
};

Создайте службу узла, которая проверяет наличие текущего пользователя. Что-то вроде req.user покажет, кто вошел в систему.

добавить слушателя для текущего пользователя, вызвать его в componentDidMount/useEffect. У меня он вызвал мой компонент навигационной панели, поэтому он вызывает каждую загрузку страницы и действует как слушатель.

используйте redux для передачи isAuthenticated props вашим компонентам.

Используйте localStore для сохранения данных. Я использую саги, так что я сделал что-то вроде этого

 export function* getAutoLoginStatus(action) {
  try {
     const login = yield call(api.user.currentUser);
     const token = login.token;

     if (login.user.googleId !== null) {
         localStorage.setItem("googleId", login.user.googleId);
     }
     setAuthToken(token);
     sessionData.setUserLoggedIn(token);
     yield put(actionTypes.getUserSuccess(login));
  } catch (error) {
     localStorage.clear();
     yield put(actionTypes.getUserFailure(error.response.data.message));
  }
 }

Главное, чтобы использовать redux и сохранить данные, а при выходе из системы удалить данные localStorage. Это лучший способ объяснить.