var firebaseConfig = {
    apiKey: "super secret keys.....asgvegxgevergfvr",
    authDomain: "tallans-imageupload-tutorial.firebaseapp.com",
    databaseURL: "https://tallans-imageupload-tutorial.firebaseio.com",
    projectId: "tallans-imageupload-tutorial",
    storageBucket: "tallans-imageupload-tutorial.appspot.com",
    messagingSenderId: "super secret keys.....asgvegxgevergfvr",
    appId: "super secret app id....adsfa;lsdkjf",
    measurementId: "super secret as;dlkfjal;dskjf"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();

make npx-create-react-app client
and ::
npm i or yarn add firebase 
and react-router-dom

cd client 
cd src
mkdir componets/login.js

import React from 'react'
import './App.css'
import Login from './components/Login'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
import Logout from './components/Logout'
import Welcome from './components/Welcome'
const App = () => {
  return (
    <div>

      <Router>
        <Switch>
          <Route exact path="/" component={Login} />
          <Route exact path="/home" component={Logout} />
          <Route exact path="/welcome" component={Welcome} />

        </Switch>
      </Router>

    </div>
  )
}

export default App

import React from 'react'
import firebase from '../services/firebase'
import {useHistory} from 'react-router-dom'
import './Login.css'
const Login = () => {
const history = useHistory();
    const signInWithGoogle = () => {
        const provider = new firebase.auth.GoogleAuthProvider();
        firebase.auth().signInWithPopup(provider)
            .then((success) => {

                let user = success.user;

                const obj = {
                    username : user.displayName,
                    email:user.email,
                    uid:user.uid,
                    img:user.photoURL
                }
                console.log(obj)
                localStorage.setItem('codecaamp',JSON.stringify(obj))
                history.push('/welcome')
            })
            .catch(err => err.message)
    }

    return (
        <div className="login-buttons">
            <div  className="ikmg"><img width="200px" src="https://res.cloudinary.com/codecaamp/image/upload/v1610815107/Purple_Modern_Technology_Gaming_Logo_gqpbv2.png" alt="codecaamp"/></div>
            <h2 style={{fontFamily:"monospace",fontSize:"40px"}}>Welcome to Codecaamp</h2>
            <h3>Continue With</h3>
            <button className="login-provider-button" onClick={signInWithGoogle}>
                <img src="https://img.icons8.com/ios-filled/50/000000/google-logo.png" alt="google icon" />
                <span> Continue with Google</span>
            </button>
        </div>
    )
}

export default Login