Build Tic-Tac-Toe Strategy Board Game in React.js

import React, { Component } from 'react'
import {initializeApp} from 'firebase/app'
import {getAuth,signInWithPopup,FacebookAuthProvider} from 'firebase/auth'
const firebaseConfig = {
  apiKey: "AIzaSyCq_NoSPfOmBMzg95-xAtJDGdeu786RjeU",
  authDomain: "gasbooking-780bc.firebaseapp.com",
  databaseURL: "https://gasbooking-780bc.firebaseio.com",
  projectId: "gasbooking-780bc",
  storageBucket: "gasbooking-780bc.appspot.com",
  messagingSenderId: "330414310435",
  appId: "1:330414310435:web:cbe8e168419e9cb2cf5d96"
};

const app = initializeApp(firebaseConfig)
class App extends Component {
  state = {
    user: null
  }
  login = () => {
    const provider = new FacebookAuthProvider();

    const auth = getAuth(app);
    signInWithPopup(provider)
      .then((result) => {
        // The signed-in user info.
        const user = result.user;
        console.log(user)
    
        // This gives you a Facebook Access Token. You can use it to access the Facebook API.
        const credential = FacebookAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        console.log(accessToken)
    
        // ...
      })
      .catch((error) => {
        // Handle Errors here.
        const errorCode = error.code;
        const errorMessage = error.message;
        // The email of the user's account used.
        const email = error.customData.email;
        // The AuthCredential type that was used.
        const credential = FacebookAuthProvider.credentialFromError(error);
    
        // ...
      });
  }
  logout = () => {
    getAuth().signOut().then(() => {
      this.setState({ user: null })
    })
  }
  render() {
    const { user } = this.state
    return (
      <div className='App'>
        <p>{user ? `Hi, ${user.displayName}!` : 'Hi!'}</p>
        <button onClick={this.login}>
          Login with Facebook
        </button>
        <button onClick={this.logout}>
          Logout
        </button>
      </div>
    );
  }
}

export default App

body {
  font: 14px "Century Gothic", Futura, sans-serif;
  margin: 20px;
}

ol,
ul {
  padding-left: 30px;
}

.board-row:after {
  clear: both;
  content: "";
  display: table;
}

.status {
  margin-bottom: 10px;
}

.square {
  background: #fff;
  border: 1px solid #999;
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 34px;
}

.square:focus {
  outline: none;
}

.kbd-navigation .square:focus {
  background: #ddd;
}

.game {
  display: flex;
  flex-direction: row;
}

.game-info {
  margin-left: 20px;
}