でGoogleの記号を使用してAuthbaseの認証

私はGoogleのサインを使用してFirebase Authentificationに取り組んでいました、そして、オンラインの記事の多くはサインについて説明していましたが、ログアウトを説明している多くの記事がありませんでした.
私はそれをここで共有したいので、それを把握するのにしばらくかかった.
これがディレクトリ構造です.
まず最初に、あなたはこのページでGoogleとサインします.

ログインが成功したら、ログアウトボタンがヘッダーに表示されます.
それで、ユーザーがサインされるとき、私はこのログアウトボタンを見せたかったです.これがサインです.js

import React, { useState } from 'react';
import 'firebase/auth'
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import Header from './BasicComponents/Header';
import Footer from './BasicComponents/Footer';
import Button from '@material-ui/core/Button';
import { useFirebase } from "react-redux-firebase";
import { useDispatch, useSelector } from 'react-redux';
import { push } from 'connected-react-router'

const useStyles = makeStyles((theme) => ({
    root: {
        flexGrow: 1,
    },
    paper: {
        textAlign: 'center',
        backgroundColor: '#C0C0C0',
        opacity: 0.7,
        borderRadius: 50,
        height: 500,
        paddingTop: 20,
    },
    grid: {
        position: 'block',
        margin: '0 auto',
        marginTop: 50,
        marginBottom: 50,
    },
    input:{
        width: '70%',
        height: 50,
        fontSize: 15,
        padding: '.3em',
        borderRadius: 10,
        border: '1px solid #aaa',
    },
    input1:{
        width: '70%',
        height: 50,
        fontSize: 15,
        padding: '.1em',
        marginRight: 5,
        borderRadius: 10,
        border: '1px solid #aaa',
    },
    p1:{
        textAlign: 'left',
        paddingLeft: 80,
        fontColor: 'black',
    },
    button1:{
        backgroundColor: 'pink',
        color: 'black',
        width: '35%',
        borderRadius:40,
        marginTop: 10,
    },
    button2:{
        backgroundColor: '#9400D3',
        color: 'black',
        width: '35%',
        borderRadius:40,
    },
}));


export default function SignIn() {
    const classes = useStyles();
    const auth = useSelector(state => state.auth); //global stateを呼び出すため,Dev toolをみて決めてる
    const dispatch = useDispatch();
    const firebase = useFirebase();

    const signInWithGoogle = () => {
        firebase
            .login({
                provider: "google",
                type: "popup",
            })
            .then(() => {
                dispatch({ type: "USE_PROFILE" });
                dispatch(push('/top'));
            });
    };


    return (
        <div className={classes.root}>
            <Header/>
            <Grid >
                <Grid item xs={5} className={classes.grid}>
                    <Paper className={classes.paper}>
                        <form>
                            <h1>Welcome back!</h1>
                            <p>Please sign in below to continue</p>
                            <p className={classes.p1}>Email address</p>
                            <input
                                type="text"
                                name="Email"
                                className={classes.input1}
                            /><br></br>
                            <p className={classes.p1}>Password</p>
                            <input
                                type="password"
                                name="password"
                                className={classes.input}
                            /><br></br>
                            <Button classes={{root: classes.button1,}} type="submit">
                                Sign in
                            </Button>
                            <p>or</p>
                            <Button classes={{root: classes.button2,}}
                                    onClick={(event) => {
                                        event.preventDefault();
                                        signInWithGoogle();
                                    }} >
                                Sign in with Gmail
                            </Button><br></br>
                            <p >Forgot Password?</p>
                        </form>
                    </Paper>
                </Grid>
            </Grid>
            <Footer/>
        </div>

    );
}

そして私のインデックスです.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'
import { Provider } from 'react-redux';
import {configureStore} from './configureStore';
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
import { useHistory } from "react-router-dom";
import { createFirestoreInstance } from "redux-firestore";
import { BrowserRouter } from "react-router-dom";
import { useDispatch, useSelector } from 'react-redux';
import { ReactReduxFirebaseProvider } from "react-redux-firebase";
import { createStore, compose } from "redux";
import { rootReducer } from "./rootReducer";

  const firebaseConfig = {
    apiKey: "AIzaSyAOSBfTj_VQ4byWAAOWDhAsklmZtk2W_iE",
    authDomain: "stresstackle-599d9.firebaseapp.com",
    projectId: "stresstackle-599d9",
    storageBucket: "stresstackle-599d9.appspot.com",
    messagingSenderId: "930013144401",
    appId: "1:930013144401:web:79b25db79f4118359fdf70",
    measurementId: "G-J26Y6MYWV3"
  };

const rrfConfig = {
  userProfile: "users",
  useFirestoreForProfile: true,
};

firebase.initializeApp(firebaseConfig);
firebase.firestore();

export const auth = firebase.auth();

const initialState = {};
const store = createStore(rootReducer, initialState);

const rrfProps = {
  firebase,
  config: rrfConfig,
  dispatch: store.dispatch,
  createFirestoreInstance,
};

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <ReactReduxFirebaseProvider {...rrfProps}>
          <App />
      </ReactReduxFirebaseProvider>
    </Provider>
  </React.StrictMode>,
    document.getElementById('root')
    );

とアプリ.js

import React, { Suspense } from 'react';
import { BrowserRouter as Router,Switch, Route} from 'react-router-dom';
import Top from './components/Top';
import Contact from './components/Contact';
import SignUp from './components/SignUp';
import SignIn from './components/SignIn';
import { ConnectedRouter } from 'connected-react-router';
import {history} from './configureStore';
import { Provider } from 'react-redux'
import {configureStore} from './configureStore';
const store = configureStore();

const App = () => {


    return (
        <React.Fragment>
            <Provider store={store}>
                <ConnectedRouter history={history}>
                    <Switch>
                        <Route exact path="/" component={Top}/>
                    </Switch>
                    <Switch>
                        <Route exact path="/contact" component={Contact}/>
                    </Switch>
                    <Switch>
                        <Route exact path="/signup" component={SignUp}/>
                    </Switch>
                    <Switch>
                        <Route exact path="/signin" component={SignIn}/>
                    </Switch>

                    <Switch>
                        <Route exact path="/top" component={Top}/>
                    </Switch>
                </ConnectedRouter>
            </Provider>
        </React.Fragment>
    )

}
export default App;

私はヘッダーを使います.JSファイルはログアウトボタンを表示します.

import React from 'react'
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import {push} from "connected-react-router";
import {useDispatch, useSelector} from "react-redux";
import { useState } from 'react';
import { useEffect } from 'react'
import firebase from "firebase/app";


const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
    appBar:{
      height: 90,
    },
    button:{
        fontSize:50,
        display: 'flex',
        justifyContent: 'space-between',
    },
}));

export default function Header({children}) {
  const classes = useStyles();
    const auth = useSelector(state => state.auth); //global stateを呼び出すため,Dev toolをみて決めてる
    const dispatch = useDispatch();
    const [user, setUser] = useState(null);

    useEffect(() => {
        return firebase.auth().onAuthStateChanged(user => {
            setUser(user);
        });
    }, []);


    const logout = () => {
        firebase
            .logout({
                provider: "google",
                type: "popup",
            })
            .then(() => {
                dispatch({ type: "USE_PROFILE" });
                dispatch(push('/signin'));
            });
    };

    return (
            <React.Fragment>
                <div className={classes.root}>
                    <AppBar position="static" color='white' className={classes.appBar}>
                        <Toolbar className={classes.button}>
                            <p>ST</p>
                            {user ? (
                                <button onClick={logout}>Google Logout</button>
                            ) : (
                               <div></div>
                            )}
                        </Toolbar>
                    </AppBar>
                </div>
            </React.Fragment>
        );
    }

したがって、ユーザが署名したとき、onauthStateChangedはNULLから変更されます.OnAuthStateChangedここでは、ユーザーのログインの状態が変更されているかどうかを確認します.

    const [user, setUser] = useState(null);

    useEffect(() => {
        return firebase.auth().onAuthStateChanged(user => {
            setUser(user);
        });
    }, []);

ユーザがサインした場合、

   const logout = () => {
        firebase
            .logout({
                provider: "google",
                type: "popup",
            })
            .then(() => {
                dispatch({ type: "USE_PROFILE" });
                dispatch(push('/signin'));
            });
    };

この関数は呼び出され、私のヘッダーはログアウトボタンを表示します.私が見つけた記事の多くは複雑なことをしていたので、それを理解するのに時間がかかった.そして、Firebaseの公式文書がログアウト機能にあまり役に立たないと感じました.
これが助ける望み!