Мне нужно реализовать OAuth для моего приложения React. Любые предложения, пожалуйста

#reactjs #authentication #oauth

Вопрос:

При загрузке приложения должна быть выполнена аутентификация.поэтому я хочу добавить OAuth в свое приложение react.

Ответ №1:

Я использую этот шаблон

Во-первых, определите Loading компонент

 const Loading = ({ children, loading }) => {
    if (loading) return (
        <div className="loading" />
    );

    return children;
}
 

Определить OAuth компонент

 import { useState, useEffect } from "react";
import { useHistoty } from " react-router-dom";
import Loading from "...";

const OAuth = ({ children, redirectTo = "/login" }) => {
    const history = useHistory();
    const [authorizing, setAuthorizing] = useState(true);

    useEffect(() => {
        //do anything

        if (yes) setAuthorizing(false);
        else {
            history.replace({
                pathname: redirectTo
            )};
        }
    }, []);

    return (
        <Loading loading={authorizing}>
            {children}
        </Loading>
    );
};
 

Используй это

 import OAuth from "...";

const Component = () => {
    return (
        <OAuth>
            <div />
        </OAuth>
    );
};
``|
 

Ответ №2:

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