Experiment – 8

Aim: Design an Assignment to retrieve, verify, and store user credentials using Firebase
Authentication
Description:

What is Google Firebase?

Google Firebase is a set of cloud-based development tools that helps mobile and web app
developers build, deploy and scale their apps.

What are the Google Firebase features?

Firebase provides a variety of features, including the following:

1. Authentication: Firebase provides a secure and easy way for users to sign into their
app. Developers can use Firebase Authentication to support email and password login,
Google Sign-In, Facebook Login and more.
2. Realtime Database: The Firebase Realtime Database is a cloud-hosted NoSQL
database that lets organizations store and sync data in real time across all their users'
devices. This makes it easy to build apps that are always up to date, even when users
are offline.
3. Cloud Messaging: Firebase Cloud Messaging (FCM) is a service that lets businesses
send messages to their users' devices, even if they're not using the app. Developers
can use FCM to send push notifications, update app content, and more.
4. Crashlytics: Firebase Crashlytics is a service that helps organizations track and fix
crashes in their app. Crashlytics provides detailed reports on crashes, so they can
quickly identify the root cause and fix the problem.
5. Performance Monitoring: Firebase Performance Monitoring provides insights into
the performance of their app. Organizations can use Performance Monitoring to track
metrics like CPU usage, memory usage and network traffic.
6. Test Lab: Firebase Test Lab is a cloud-based service that lets developers test their
app on a variety of devices and configurations. This helps them ensure the app works
well on a variety of devices and in different network conditions.

Aim: Design an Assignment to retrieve, verify, and store user credentials using Firebase
Authentication
Description:

What is Google Firebase?

Google Firebase is a set of cloud-based development tools that helps mobile and web app
developers build, deploy and scale their apps.

What are the Google Firebase features?

Firebase provides a variety of features, including the following:

1. Authentication: Firebase provides a secure and easy way for users to sign into their
app. Developers can use Firebase Authentication to support email and password login,
Google Sign-In, Facebook Login and more.
2. Realtime Database: The Firebase Realtime Database is a cloud-hosted NoSQL
database that lets organizations store and sync data in real time across all their users'
devices. This makes it easy to build apps that are always up to date, even when users
are offline.
3. Cloud Messaging: Firebase Cloud Messaging (FCM) is a service that lets businesses
send messages to their users' devices, even if they're not using the app. Developers
can use FCM to send push notifications, update app content, and more.
4. Crashlytics: Firebase Crashlytics is a service that helps organizations track and fix
crashes in their app. Crashlytics provides detailed reports on crashes, so they can
quickly identify the root cause and fix the problem.
5. Performance Monitoring: Firebase Performance Monitoring provides insights into
the performance of their app. Organizations can use Performance Monitoring to track
metrics like CPU usage, memory usage and network traffic.
6. Test Lab: Firebase Test Lab is a cloud-based service that lets developers test their
app on a variety of devices and configurations. This helps them ensure the app works
well on a variety of devices and in different network conditions.
In this Practical, we are going to study to store retrieve and verify the user credentials.
Follow the steps below:
First of all open the firebase portal by click on link https://firebase.google.com/
Click on “Go to Console” and then click on “Add Project”
Enter the Project name of your choice in the field in our case it is “priceless”
Now add the firebase functionality of Authentication to the project by clicking on
“Authentication”

Click on “Sign In Method” then enable the “Email / Password” method-provider. Note
don’t enable the google analytics.
Same way add the functionality of firebase “Realtime Database” and goto “Rules tab and
set value for “read” and “write” as “true”.

Now go to the application, click on Project Overview settings

Under section “SDK setup and configuration”, click on “CDN” and copy the script and
add to your project.
Now develop the Signup page as “register.html” with following code.

<html>
<head>
<title>Firebase Authentication Web Application </title>
</head>

<body>

<h1> Signup</h1>
<table>
<tr>
<td>Username </td>
<td><input type="text" id="username" name="username"
placeholder="username" /> </td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" id="email" name="email" placeholder="E-mail" /> </td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" id="password" name="password"
placeholder="password" /></td>
</tr>
<tr >
<td colspan="3" align="center"><input type="submit" id="signup" name="signup"
Value = "signup" /></td>
</tr>
</table>
</body>

<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-app.js";
 import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-
analytics.js";
import { getDatabase } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-
database.js";
import { getAuth, createUserWithEmailAndPassword } from
"https://www.gstatic.com/firebasejs/10.12.2/firebase-auth.js";

// 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

// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyDd3uDU0dUgcou2fDMRCtKY0ZJGOE4cNe0",
authDomain: "priceless-ff95b.firebaseapp.com",
databaseURL: "https://priceless-ff95b-default-rtdb.firebaseio.com",
projectId: "priceless-ff95b",
storageBucket: "priceless-ff95b.appspot.com",
messagingSenderId: "183307863625",
appId: "1:183307863625:web:170e6839df5320f7f9a198",
measurementId: "G-W0GCKG035F"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const database = getDatabase(app);
const auth = getAuth();

signup.addEventListener('click', (e) => {

var email = document.getElementById('email').value;

var username = document.getElementById('username').value;
var password = document.getElementById('password').value;

createUserWithEmailAndPassword(auth, email, password)

.then((userCredential) => {
// Signed up
const user = userCredential.user;
alert("User Created Successfully");
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
alert('errorMessage');
});
})
</script>

</html>

In firebase cloud we will have entry of user created with parameters as follows

Login Page as “Login.html”.

<html>
<head>
<title>Firebase Authentication Web Application </title>
</head>

<body>

<h1> Signin </h1>

 <table>
<tr>
<td>Email</td>
<td><input type="text" id="email" name="email" placeholder="E-mail" /> </td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" id="password" name="password"
placeholder="password" /></td>
</tr>
<tr >
<td colspan="2" align="center"><input type="submit" id="login" name="login"
Value = "login" /></td>
</tr>
<tr >
<td colspan="2" align="center"><input type="submit" id="logout" name="logout"
Value = "logout" /></td>
</tr>
</table>
</body>
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-
analytics.js";
import { getDatabase,set, ref, update } from
"https://www.gstatic.com/firebasejs/10.12.2/firebase-database.js";
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword,
signOut, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-
auth.js";

// 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

// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyDd3uDU0dUgcou2fDMRCtKY0ZJGOE4cNe0",
authDomain: "priceless-ff95b.firebaseapp.com",
databaseURL: "https://priceless-ff95b-default-rtdb.firebaseio.com",
projectId: "priceless-ff95b",
storageBucket: "priceless-ff95b.appspot.com",
messagingSenderId: "183307863625",
appId: "1:183307863625:web:170e6839df5320f7f9a198",
measurementId: "G-W0GCKG035F"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const database = getDatabase(app);
const auth = getAuth();

////////// login click event

login.addEventListener('click', (e) => {

var email = document.getElementById('email').value;

var password = document.getElementById('password').value;

signInWithEmailAndPassword(auth, email, password)

.then((userCredential) => {
// Signed in
const user = userCredential.user;
const dt = new Date();
update(ref(database, 'users/'+ user.uid), {
last_login: dt,
}) ;
alert("User Signed in Successfully");
// ...
})
 .catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
alert('errorMessage');
});
});

onAuthStateChanged(auth, (user) => {

if (user) {
// User is signed in, see docs for a list of available properties
// https://firebase.google.com/docs/reference/js/auth.user
const uid = user.uid;

// ...
} else {
// User is signed out

}
});

logout.addEventListener('click', (e) => {

signOut(auth).then(() => {
alert("sigout successfull");
}).catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
alert('errorMessage');
});
});

</script>
</html>
By click on “Login” we will have following output

In firebase we will find the last_login attribute under Realtime Database.

By click on “Logout” we will have following output

Conclusion:
As we have studied for one provider Method “Email/Password”, Similarly we can
implement for other Social Media authentication such as google, Facebook, Twitter etc.. also.
You can also refer the documentation for the same by click on the following link.
https://firebase.google.com/docs/auth/web/google-signin?hl=en&authuser=0