Доступ к Google GAPI Auth Instance за пределами компонента, где он был инициирован

Question

У меня есть компонент GoogleAuth в React, который инициализирует GAPI для входа в систему через Google. Я получаю экземпляр AUTH, который могу использовать для входа и выхода.

Проблема в том, что у меня есть другая кнопка в отдельном компоненте NavBar, для которой я хочу использовать тот же экземпляр AUTH и разрешить пользователю выходить из системы. Я не уверен, смогу ли я добавить весь экземпляр Google AUTH в хранилище Redux и использовать его, или как я могу использовать доступ к функции signOut из другого Компонента, который был инициализирован экземпляром GAPI AUTH.

Компонент GoogleAuth, где инициализируется GAPI

import React from 'react';
import { connect } from 'react-redux';
//import { Redirect } from 'react-router-dom';
import { signIn, signOut } from '../actions';

class GoogleAuth extends React.Component {

    componentDidMount() {
        window.gapi.load('client:auth2', () => {
            window.gapi.client.init({
                clientId: 'mykey.apps.googleusercontent.com',
                scope: 'email'
            }).then(() => {
                this.auth = window.gapi.auth2.getAuthInstance();
                this.onAuthChange(this.auth.isSignedIn.get());
                this.auth.isSignedIn.listen(this.onAuthChange);
            });
        });
    }

    onAuthChange = (isSignedIn) => {
        if (isSignedIn) {
            this.props.signIn(this.auth.currentUser.get().getId());
        } else {
            this.props.signOut();
        }
    };

    onSignInClick = () => {
        this.auth.signIn();

    };

    onSignOutClick = () => {
        this.auth.signOut();
    };

    renderAuthButton() {
        if (this.props.isSignedIn === null) {
            return null;
        } else if (this.props.isSignedIn) {
            // return <Redirect to='/dashboard' />;
            return (
                <button onClick={this.onSignOutClick} className="ui red google button">
                    <i className="google icon" />
                    Sign Out
                </button>
            );
        } else {
            return (
                <button onClick={this.onSignInClick} className="ui green google button">
                    <i className="google icon" />
                    Sign In with Google
                </button>
            );
        }
    }

    render() {
        return <div>{this.renderAuthButton()}</div>
    }
}

const mapStateToProps = (state) => {
    return { isSignedIn: state.auth.isSignedIn, auth: state.auth };
};

export default connect(mapStateToProps, { signIn, signOut })(GoogleAuth);

Компонент NavBar, где я хочу снова использовать экземпляр AUTH и позволить пользователю выйти из системы

import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import {
    Menu,
    Button,
    Icon
} from 'semantic-ui-react';
import { signIn, signOut } from '../actions';

class NavBar extends React.Component {

    state = {}

    onSignOutClick = () => {
        this.props.signOut();
        this.props.auth.signOut();  //  THROWS ERROR SAYING NO FUNCTION EXISTS
    };

    handleItemClick = (e, { name }) => this.setState({ activeItem: name })

    renderMenu() {
        const { activeItem } = this.state
        if (this.props.isSignedIn === null ||
            this.props.isSignedIn === false) {
            return (
                <Menu
                    inverted
                    pointing
                    size='large'
                >
                    <Menu.Item>
                        <Icon name="briefcase" className="resumeIcon" />
                    </Menu.Item>
                    <Menu.Item
                        as={Link} to='/'
                        name='home'
                        active={activeItem === 'home'}
                        onClick={this.handleItemClick} />
                    <Menu.Menu position='right'>
                        <Menu.Item
                            as={Link} to='/login'
                        >
                            <Button color='grey'>Login</Button>
                        </Menu.Item>
                        <Menu.Item
                            as={Link} to='/login'
                        >
                            <Button color='blue'>Sign Up</Button>
                        </Menu.Item>

                    </Menu.Menu>
                </Menu>
            );
        } else if (this.props.isSignedIn) {
            return (
                <Menu
                    pointing
                    size='large'

                >
                    <Menu.Item>
                        <Icon name="briefcase" className="resumeIcon" />
                    </Menu.Item>
                    <Menu.Item
                        as={Link} to='/dashboard'
                        name='dashboard'
                        active={activeItem === 'dashboard'}
                        onClick={this.handleItemClick}
                    />
                    // I want this button to logout from Google using the AUTH instance function signOut()
                    <Menu.Menu position='right'>
                        <Menu.Item>
                            <Button color='red' onClick={this.onSignOutClick} className="ui red google button">Logout</Button>
                        </Menu.Item>
                    </Menu.Menu>
                </Menu>
            );
        }
    }

    render() {
        //const { activeItem } = this.state
        return (
            <div>{this.renderMenu()}</div>
        );
    }
}

const mapStateToProps = (state) => {
    return { isSignedIn: state.auth.isSignedIn, auth: state.auth };
}

export default connect(mapStateToProps, { signIn, signOut })(NavBar);