Authentication Using Firebase in React App. 🤺🔥
Tags: react, firebase, auth, webdev
Published: 2022-05-15 02:45:40

In this article we will know how to authenticate users, in your web app. For this article I'm using google authentication.
Follow....

## Create a Firebase Project
It's simple, just login with your google account in [firebase](https://firebase.google.com/), create a new project.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/npw8ytahnefyrdlio9zy.png)
 
In that project go to Authentication's tab.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/re2t2o28sg2ww2ypckrb.png)

Click on Sign-in method
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7gzzmnokc1gqw7k2gnt1.png)
Go to Add New Provider, select Google.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/maiaxz85ko5yzxv179a8.png)

Now, you need to create a web app in your project
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x8kyrym5rze8ekzbflz2.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r4ep05t662lbwfts0rfg.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mczrhvyv9kh6u5q8fgvb.png)
Copy the configuration file.
Now, open your fav IDE and create a React Project.
In `src` folder create a file name fb.config.js / .ts
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/11t5hb7nvwoxeeepxonq.png)
also, don't forget to install firebase.
```bash
npm i firebase
```
we're using context to use state of user authentication in our app. create a authContext.tsx file.

```tsx
import { createContext, ReactComponentElement, ReactElement, useContext, useEffect, useState } from 'react'
import { User, GoogleAuthProvider, signInWithPopup, signOut, onAuthStateChanged } from "firebase/auth"
import { auth, app } from "./fb.config"

interface value {
    user: User | null,
    logInUser: () => void,
    logOutUser: () => void,
}

const AuthCont = createContext<User | null>(null)

export const useAuthContext = () => {
    return useContext(AuthCont)
}

export default function authContext({ children }: { children: ReactElement }) {
    const [user, setUser] = useState<null | User>(null)
    useEffect(() => {
        onAuthStateChanged(auth, (user) => {
            setUser(user)
        })
    }, [])

    const logInUser = () => {
        const provider = new GoogleAuthProvider()
        signInWithPopup(auth, provider)
            .then((res) => {
                setUser(res.user)
            })
            .catch((err) => {
                console.log(err)
            })
    }
    const logOutUser = () => {
        signOut(auth)
        setUser(null)
    }

    const value = {
        user,
        logInUser,
        logOutUser
    }
    return (
        <AuthCont.Provider value={user}>
            {children}
        </AuthCont.Provider>
    )
}
```

Now we just need to put this on top of our app.tsx, then we can use it in any child component.
Go to main.tsx file and put this code.

```tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
import AuthProvider from "./authContext"

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <AuthProvider>
      <App />
    </AuthProvider>
  </React.StrictMode>
)
```