Как сделать такую авторизацию на react?

Question

frolldoll @frolldoll

React
Redux

Как сделать такую авторизацию на react?

Я хочу сделать авторизацию с помощь react-google-auth (https://www.npmjs.com/package/react-google-auth)
Что бы ответить на мой вопрос не нужно знать как работает этот пакет , сейчас покажу свой код что у меня есть сейчас :

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

Так вот думаю понятно , как сделать там выводился не просто компонент а целая иерархия как например сдесь

<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>

То есть я имею ввиду у меня щас есть все эти компоненты , я хочу что бы в функции example возвращались все они а не как с примером выше только , я планирую после авторизации что бы просто в некоторых компонентах проподала кнопка авторизации , в примере выше это можно сделать как то так <Menu exmple='true/> а в компоненте делать проверку на наличие expml= true , это ок , но как вообще можно реализовать когда у меня куча компонентов в провайдаре ?
Ваши предложения , может кто знает еще способы регистрации для реакт для тех кто не умеет кодить на node js) ?