Create You First Firebase Project in React and implement Google Sign-In Method

  • Install Node.js on your machine.
  • Then install a basic React App on your machine and run it in your Code Editor. (Here I am using Visual Studio Code)
  • Go to Firebase Official Website. And create an account.
  • Then somewhere you will see a button namely “Get Started”. Find it and click it. This will take you to the Firebase Console tab. Or you can simply click on the “console” tab menu to do that.
  • Then click on the “Add Project” button to create a new project.
  • Then give the name of your project. Here I am giving a fancy name like “Raw Authentication”.
  • After that, the google authentication process will come. You can enable or disable this google authentication button. I am closing it because it is not a final project. Then continue.
  • After completing the full process click on continue.
 npm install firebase
import { initializeApp } from ‘firebase/app’;
import { firebaseConfig } from ‘./firebase.config’;const app = initializeApp(firebaseConfig);
return (<div className=”App”><button>Sign In</button></div>);
<button onClick={handleSignIn}>Sign In</button>
import { getAuth, signInWithPopup, GoogleAuthProvider } from “firebase/auth”;const auth = getAuth();const provider = new GoogleAuthProvider();
const handleSignIn = () => {signInWithPopup(auth, provider).then((result) => {// This gives you a Google Access Token. You can use it to access the Google API.const credential = GoogleAuthProvider.credentialFromResult(result);const token = credential.accessToken;// The signed-in user info.const user = result.user;// …}).catch((error) => {// Handle Errors here.const errorCode = error.code;const errorMessage = error.message;// The email of the user’s account used.const email = error.email;// The AuthCredential type that was used.const credential = GoogleAuthProvider.credentialFromError(error);// …});};
const [user, setUser] = useState({isSignedIn: false,name: ‘’,email: ‘’,photo: ‘’,});
return (<div className=”App”>{user.isSignedIn &&<div><img src={user.photo} alt={user.name} /><br /><h2 style={{fontWeight: ‘bold’}}>Welcome, {user.name}</h2></div>}<button onClick={handleSignIn}>Sign In</button></div>
const handleSignIn = () => {signInWithPopup(auth, provider).then((result) => {const {email, photoURL,displayName} = result.user;const newUser = {isSignedIn: true,name: displayName,email: email,photo: photoURL,}setUser(newUser);console.log(user);})};
import ‘./App.css’;// Importing firebase servicesimport { initializeApp } from ‘firebase/app’;import { getAuth, signInWithPopup, GoogleAuthProvider,signOut } from “firebase/auth”;import { firebaseConfig } from ‘./firebase.config’;import { useState } from ‘react/cjs/react.development’;const provider = new GoogleAuthProvider();const app = initializeApp(firebaseConfig);const auth = getAuth();function App() {// Passing object in stateconst [user, setUser] = useState({isSignedIn: false,name: ‘’,email: ‘’,photo: ‘’,});const handleSignIn = () => {signInWithPopup(auth, provider).then((result) => {const {email, photoURL,displayName} = result.user;const newUser = {isSignedIn: true,name: displayName,email: email,photo: photoURL,}setUser(newUser);console.log(user);})};const handleSignOut =() =>{signOut(auth).then(() => {const signOutUser = {isSignedIn: false,name: ‘’,email: ‘’,photo: ‘’,};setUser(signOutUser);}).catch((error) => {// An error happened.});}return (<div className=”App”><img src={user.photo} alt={user.name} /><br />{/* Ternary operator */}{user.name ?<div><h2 style={{fontWeight: ‘bold’}}>Welcome, {user.name}</h2><button onClick={handleSignOut}>Sign In</button></div>:<div><h2>No user signed yet !!!</h2><button onClick={handleSignIn}>Sign In</button></div>}</div>);}export default App;

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store