Creating a Google Sign-In with Firebase (Firebase Authentication)
Tags: react, firebase, tutorial, beginners
Published: 2024-04-14 16:12:05

In this simple project, we apply Firebase authentication using Google provider. 

# Preview Site: 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aus44ublji9zdffkcid5.png)

#### After Sign in with Google account:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d6slq5aodl4d2up43smz.png)

Let's create a Firebase project. Then we will connect with out project. 

Step 1: Go to the Firebase project. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bjx4z0815v0g5ndbei5s.png)
Step 2: Give your project name. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hcwtlj2wwpz444nwds8g.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v1z55e7g3uapg37mt9u9.png)


Step 3: Go build > Authentication. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z50azpkxoy3i0fcwyivd.png)

Step 4: Enable Google Sign-in provider. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/frfa3xpy8u69jwxigzon.png)
For more information, you can check this Firebase authentication (https://firebase.google.com/docs/auth?authuser=0&hl=en). 
Step 5: Go to the project Setting. 
Select the web project. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eqi9ywvvbgymhqh3zelb.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ic6szvubuxicc1venqkv.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7nyvuyy3ow1le1kn5isu.png)



# Project Create and Setup:  

Run this cmd Commands: 
```
npm create vite@latest name-of-your-project -- --template react
cd <your new project directory>
npm install react-router-dom localforage match-sorter sort-by
npm install firebase
```

Now we will create a file name `firebase.init.js` in our project. In the given screenshot, the code we will copy and paste into a `firebase.init.js` file. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mhvceqwpggthvsaymunw.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mwy0vffk35wpubwj4l5w.png) 

## The `firebase.init.js` file: 
```
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  // firebase config. 
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

export default app;
```

Then add the last line export default app in `firebase.init.js` file.

Now follow the code and try to do it. 


## App.jsx
```js
import Login from "./Login"

function App() {
  return (
    <>
      <Login></Login>
    </>
  )
}

export default App
```

## Login.jsx
```js
import { GoogleAuthProvider, getAuth, signInWithPopup, signOut } from 'firebase/auth';
import { useState } from 'react';
import app from './firebase.init';
import './login.css';

const Login = () => {
    const [user, setUser] = useState(null);
    const auth = getAuth(app);
    const googleProvider = new GoogleAuthProvider();

    // Sign in to the google. 
    const GoogleSignIn = () => {
        signInWithPopup(auth, googleProvider)

            .then((result) => {
                const loggedInUser = result.user;
                console.log(loggedInUser);
                setUser(loggedInUser);
            })
            .catch(error => {
                console.log('error', error.message);
            })
    }

    // Signout. 
    const SignOut = () => {
        signOut(auth)
            .then(result => {
                console.log(result);
                setUser(null);
            })
            .catch(error => {
                console.log(error);
            })
    }

    return (
        <div>
            <h1>Google Signin with Firebase</h1>

            {/*   user ? logout : sign in.   */}
            {
                user ?
                <button onClick={SignOut}>Sign Out</button> :
                <>
                    <button onClick={GoogleSignIn}>Google Login</button>
                </>
            }

            {user && <div className='profile'>
                <h2>Profile</h2>
                <h4>User Name: {user.displayName}</h4>
                <p>Email: {user.email}</p>
                <img src={user.photoURL} alt="" />
            </div>
            }
        </div>
    );
};

export default Login;
```

# Thank You ⭐
# Now it's your turn...