**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. ![Screen Shot 2021-05-25 at 3.30.12 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2hlt69lwqw03jo13c7ai.png) cd into your newly made folder and type the command *npx create-react-app .* This will create the react app inside the current folder. ![Screen Shot 2021-05-25 at 3.32.05 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dmcbkudj0bi9bd05iete.png) 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.![Screen Shot 2021-05-25 at 4.30.19 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/96qxfy4emltdy5met5jz.png) 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](https://firebase.google.com/) After signing into Firebase click **Go to console** ![Screen Shot 2021-05-25 at 3.36.30 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xljptp0qrus2cj1c8rju.png) From the consoles main page you're going to want to add a new project ![Screen Shot 2021-05-25 at 3.36.41 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g9kq5ad23c4jqukohkos.png) Give your project a name ![Screen Shot 2021-05-25 at 4.40.23 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uzcjv6xe4dmysdn6betk.png) ** 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. ![Screen Shot 2021-05-25 at 3.40.01 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o3hw4ik1qr6210pc1qtz.png) Give your App a nickname and click Register App ![Screen Shot 2021-05-25 at 4.46.49 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x5yowlj5sua6u38qupaw.png) After the App is registered it will give you multiple scripts , we only need what's inside the second script. ![Screen Shot 2021-05-25 at 3.40.48 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/osyzn6fa4ak8svodzfhr.png) 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. ![Screen Shot 2021-05-25 at 3.42.20 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/er1ovyisyg9j7xfrp6fw.png) Select Enable and enter your email address then hit Save. ![Screen Shot 2021-05-25 at 3.42.40 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ocsl3m0o5rneds3gtqk.png) ## 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. ![Screen Shot 2021-05-25 at 4.53.40 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p0lh03rf7sijv378trwd.png) 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! ![Screen Shot 2021-05-25 at 3.52.07 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r4ipi58ojkt5lvbxj12p.png) **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() ![Screen Shot 2021-05-25 at 4.08.16 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ogpopgste9idek4qxi5l.png) Then we'll create our sign in function. * const signIn = () => { auth .signInWithPopup(provider) .then((payload) => { setUser(payload.user.displayName) }) .catch((err) => console.log(err)) } ![Screen Shot 2021-05-25 at 4.10.02 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2snm0ze324l6tnshihmz.png) **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)) } ![Screen Shot 2021-05-25 at 4.10.15 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gvinaitj33k8t5w5s3qk.png) 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 ![Screen Shot 2021-05-25 at 4.10.32 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2b126jnhyg8uap6mwg57.png) 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>} ![Screen Shot 2021-05-25 at 4.10.40 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w5vmykl89n06dk73af7b.png) And with that we're done! ![Screen Shot 2021-05-25 at 4.11.09 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lrj3pl08k3u9ct6wf8qb.png) Save your files and npm start/yarn start in your terminal and you should see ![Screen Shot 2021-05-25 at 4.11.23 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1wtus2d7s7keodj350ja.png) Click the sign in button and your App component will update and show the user's name. ![Screen Shot 2021-05-25 at 4.11.29 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x87g5urz0r2hzkv0oy8s.png) #Congratulations you did it!!

decibullz

Add sign in with google to react app using firebase

Join Our Newsletter. No Spam, Only the good stuff.