How to make such authorization in react?

Question

React

I want to do authorization using react-google-auth ( https://www.npmjs.com/package/react-google-auth)
To answer my question, you don't need to know how this package works, now I'll show my code that I have now:

import React from 'react';
import ReactGoogleAuth from 'react-google-auth';
import Menu from '../menu'

//ЭТО ВЫВОДИТЬСЯ КОГДА ПОЛЬЗОВАТЕЛЬ УЖЕ ЗАРЕГАЛСЯ 
function Example(props) {

    return <div>
        <Menu />
        <h1>App goes here</h1>

        <button className='btn-orange' onClick={props.onSignOutClick}>Sign out</button>
    </div>;
}
// Это просто блок loading
function Loader(props) {
    return <div>Loading...</div>;
}
//     ЭТО ВЫВОДИТЬСЯ ДО АВТОРИЗАЦИИ , НА СТРАНИЦЕ ТОЛЬКО КНОПКА  SIGN IN
function SignIn(props) {
    if (props.initializing) {
        return <div className="Text Text-emphasis">Initializing...</div>;
    }
    if (props.error) {
        console.log('Error', props.error);
        return <div className="Text Text-strong">Error!</div>;
    }
    return <div>
        <button className="Button Button-primary" onClick={props.onSignInClick}>Sign in</button>
        {props.signingIn && <div>Signing in...</div>}
    </div>;
}
/
export default ReactGoogleAuth({
    clientId: "828692616521-a30cidgltv5cfhg8fbi344i9sqquj138.apps.googleusercontent.com",
    discoveryDocs: ["https://sheets.googleapis.com/$discovery/rest?version=v4"],
    loader: Loader,
    scope: "https://www.googleapis.com/auth/spreadsheets",
    signIn: SignIn
})(Example);

So I think it’s clear how to do it, not just a component was displayed there, but a whole hierarchy, such as here

<Provider store={store}>
        <Router history={history} >
                <Route path='/' component={Lending} />
                <Route path='/trade/:id' component={Coin} />
                <Route path='/fund' component={Price} />
                <Route path='/fund/invest-I' component={Calc} /> 
                <Route path='/fund/invest-II' component={Calc_1} /> 
                <Route path='/fund/invest-III' component={Calc_3} /> 
                <Route path='/profile-balance' component={Balance} /> 
                <Route path='/news' component={Store} />
                <Route path='/login' component={Login} />
                <Route path='/SignUp' component={SignUp} />
                <Route path='/ex' component={Example}/>
        </Router>

That is, I mean, right now I have all these components, I want all of them to be returned in the example function, and not like with the example above only, I plan after authorization that the authorization button would simply disappear in some components, in the example above it is possible to do something like this and in the component to check for the presence of expml= true , this is ok, but how can I implement it when I have a bunch of components in the provider? Your suggestions, maybe someone else knows how to register for react for those who can't code on node js)? <Menu exmple='true/>

Answer 1

but how can I implement it when I have a bunch of components in the provider?

There are many ways. React Context API , for example