On load of application authentication should be done.so i want to add OAuth to my react application.

CodePudding user response：

I use this pattern

At the first, Define Loading component

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

    return children;
}

Define OAuth component

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>
    );
};

Use it

import OAuth from "...";

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

CodePudding user response：

One approach to consider is to load your application from a web server that authenticates the user, i.e. rather than authenticating the user as part of your application, you'd outsource that task to the web server or a reverse proxy in front of it.