DEV Community

Cover image for Google popup sign in with react and firebase
Mr.Morsalin
Mr.Morsalin

Posted on

4 1

Google popup sign in with react and firebase

set up firebase config:

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();
Enter fullscreen mode Exit fullscreen mode

then ::

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

now::

cd client 
cd src
mkdir componets/login.js
Enter fullscreen mode Exit fullscreen mode

App.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
Enter fullscreen mode Exit fullscreen mode

login.js::

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
Enter fullscreen mode Exit fullscreen mode

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more