Add sign in with google to react app using firebase

Cody Snell — Tue, 25 May 2021 22:35:15 +0000

Firebase is a great way to set up authentication on your react applications, and with just a few steps it can be implemented very easy

Steps:

Create react app
Yarn add / npm install firebase
Create firebase project
Enable sign in with google in firebase console
Initialize firebase settings in react
Initialize state
Create sign in/out functions
Be a Pro

As with any project we're going to start in our terminal. Create a folder with any name you want, for this lesson I used firebase-practice.

cd into your newly made folder and type the command
npx create-react-app .
This will create the react app inside the current folder.

Now let's open it in VSCode.

You should have the basic React app setup.
Lets clean up that App.js file.
Delete everything inside the return except for the App div.

Open your built in terminal (control + `)

Now were going to add the firebase package.
For this you can use

npm install firebase
yarn add firebase

At this point we need firebase set up online so let's head there.

Firebase

After signing into Firebase click Go to console

From the consoles main page you're going to want to add a new project

Give your project a name

** Turn off analytics (this is optional)**

After your project is created you'll be redirected to the project's main page. Here we're going to add a web app. It is the </> symbol.

Give your App a nickname and click Register App

After the App is registered it will give you multiple scripts , we only need what's inside the second script.

Copy what yours gives you as every project is different and you'll need your specific keys for this to work.

Last step here is to enable signing in with google for your app. Go back to the projects main page and select Authentication> Sign-in Method and then edit the option for google.

Select Enable and enter your email address then hit Save.

Congrats we're done in the firebase console!

Head back on over to your VSCode and react app.

Create a new file under the src folder named firebase.js

Inside firebase.js

on Line 1 import firebase from 'firebase'
on Line 3 paste your firebase configuration you just copied.

Now Were going to set up a few variables inside firebase.js

first initialize firebase

const firebaseApp=firebase.initializeApp(firebaseConfig)

Set database,auth, and provider

const db = firebaseApp.firestore()
const auth = firebase.auth()
const provider = new firebase.auth.GoogleAuthProvider()

With that were done setting up variables, time to export!

export { auth, provider }
export default db

firebase.js is now complete, don't forget to save!

Back to App.js

Lets start in App.js with the imports were going to need

import { useState } from 'react'
import { auth, provider } from './firebase'

Under Function App(){ and above return( is where we're going to be working

First things first let's initialize state with useState().

const [user,setUser] = useState()

Then we'll create our sign in function.

const signIn = () => { auth .signInWithPopup(provider) .then((payload) => { setUser(payload.user.displayName) }) .catch((err) => console.log(err)) }

Here you can chain a .then((payload) =>{console.log(payload)) so you can view the object you get back from firebase when signing in. This is how we would know to use payload.user.displayName

Now for our sign out function.

const signOut = () => { auth.signOut().then(setUser(null)) }

That's it for our functions, we're on the home stretch!!

Inside of our

we're going to make two buttons. You guessed in, one for sign in, and one for sign out.

< button onClick={signIn}>Sign in
< button onClick={signOut}>Sign out

Under those buttons were going to use a ternary operator based on state that displays the user if you're signed in or "No user" if you're not.

{user ? < div> {user}< /div> : < div> No user< /div>}

And with that we're done!

Save your files and npm start/yarn start in your terminal and you should see

Click the sign in button and your App component will update and show the user's name.

Congratulations you did it!!

DEV Community: Cody Snell

Add sign in with google to react app using firebase

Congrats we're done in the firebase console!

Congratulations you did it!!