DEV Community

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

Google popup sign in with react and firebase

mrmorsalin1 profile image Mr.Morsalin ・2 min read

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

Discussion (0)

pic
Editor guide