The output is below
Getting Started Firebase Authentation:
🔥🔥🔥 Full Process is here 🔥🔥🔥:
🔥 Steps: 1
- visit console.firebase.com.
-
Create a new project example:
simple-firebase-authentaion Click --> Go to docs
Click --> Build-->Authentication
Click --> Web--> Get Started
🔥 Steps: 02
This is only the first time
- If you haven't already, install the Firebase JS SDK and initialize Firebase.
Step 1: Create a Firebase project and register your app
This part is already done
https://firebase.google.com/docs/web/setup?authuser=0#create-firebase-project-and-app
➕ Create a Firebase Project
➕ Register your app:
https://firebase.google.com/docs/web/setup?authuser=0#register-app
Register web app -->firebase project home --> Click Web -->give name and register
Step 2: Install the SDK and initialize Firebase
npm install firebase
And we find the firebase version in package.json file under the dependency section
```js
"dependencies": {
...
"firebase": "^9.16.0",
...
},
## Then, initialize Firebase and begin using the SDKs for the products you'd like to use.
```js
// 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 = {
apiKey: "AIzaSyAVpxUgSErILZPX6NHCx6MOk_crJnz89FQ",
authDomain: "simple-firebase-authenta-1099f.firebaseapp.com",
projectId: "simple-firebase-authenta-1099f",
storageBucket: "simple-firebase-authenta-1099f.appspot.com",
messagingSenderId: "231717497457",
appId: "1:231717497457:web:ac41abbf092cd9958a49d0"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
🔥 Steps:03
- Now making a folder name src/firebase/firebase.init.js
now paste the config SDKs into the firebase.init.js this firebase config is different to yours
// 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 = {
apiKey: "AIzaSyAVpxUgSErILZPX6NHCx6MOk_crJnz89FQ",
authDomain: "simple-firebase-authenta-1099f.firebaseapp.com",
projectId: "simple-firebase-authenta-1099f",
storageBucket: "simple-firebase-authenta-1099f.appspot.com",
messagingSenderId: "231717497457",
appId: "1:231717497457:web:ac41abbf092cd9958a49d0"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
export default app;
🔥🔥🔥🔥🔥🔥 For Google Sign in 🔥🔥🔥🔥🔥🔥🔥
Click --> Build-->Authentication-->Get Started
Click --> Build-->Authentication-->Google
Enable google sign-in method by doing 👇
Click --> Build-->Authentication-->User-->Set up sign-in method-->Google and Click the enable-icon enable it and give the email to project support email bappa@saha.com and save it.
👉 Follow steps 1 and 5 for the documentaion of firebase after click Web-->Google
1.Create an instance of the Google provider object
import { GoogleAuthProvider } from "firebase/auth";
const provider = new GoogleAuthProvider();
5.To sign in with a pop-up window, call signInWithPopup
import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
const auth = getAuth();
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.customData.email;
// The AuthCredential type that was used.
const credential = GoogleAuthProvider.credentialFromError(error);
// ...
});
Now we need a google auth provider so now make this auth provider . We do this
task to App.js file for now .
import './App.css';
import { getAuth, GoogleAuthProvider, signInWithPopup,signOut} from "firebase/auth";
import app from './firebase/firebase.init';
import { useState } from 'react';
const auth =getAuth(app);
function App() {
const [user, setUser]=useState({});
const provider = new GoogleAuthProvider()
const handleGoogleSingIn =()=>{
signInWithPopup(auth,provider)
.then(result =>{
const user =result.user;
console.log(user)
setUser(user)
})
.catch(error =>{
console.error('Error is: ',error);
})
};
const handleSignOut =()=>{
signOut(auth).then(() => {
setUser({});
// Sign-out successful.
}).catch((error) => {
setUser({});
// An error happened.
});
}
return (
<div className="App">
<button style={{fontSize:'30px',height:'100px', width:'300px',marginTop:'500px'}} onClick={handleGoogleSingIn}>🟢Google Sign In </button>
<button onClick={handleSignOut} style={{marginTop:'50px',width:'200px', padding:'10px',fontSize:'20px'}} >Sign Out ❌</button>
<div>
<p>🧝User Name:👉 <b>{user.displayName}</b></p>
<span>Email 👉 <b>{user.email}</b></span>
<p>uid 👉 <b>{user.uid}</b></p>
<img style={{height:'100px'}} src={user?.photoURL} alt="image"/>
</div>
</div>
);
}
export default App;
Summary of the whole system:
🇧🇩 Initital Setup
1. visit: console.firebase.google.com
2. create a new firebase project
3. Visit doc ( go to docs): Build > Authentication > web > Getting started
4. Register web app > firebase project home > click Web > give name and register
5. Install firebase for your project: npm install firebase
6. Get firebase config and put it in firebase.init.js
7. export app from **firebase.init.js**
🇧🇩 SETUP THE PROVIDER
8. create auth using getAuth from firebase by using app from firebase.init.js
9. create a google auth provider. do not forget to use new GoogleAuthProvider();
10. go to firebase > Build > Authentication > Sign In method
11. Enable google sign in method
12. Create a button for google sign in method with a click handler
13. inside the event handler, call singInWithPopup with auth, provider
14. after singInWithPopup .then result , error
🇧🇩 DISPLAY DATA
ADD A NEW SIGN IN METHOD
1. enable the sign in method
2. Create github, twitter, fb, etc. app create
Here is the overall solution of google sign in and sign out process.
Thanks for reading my blog ...
Top comments (0)