SAPUI5 Applications with Firebase Anonymous Authentication

[vvdries]

Hello anonymous user!

Welcome back to my second UI5 Firebase blog.

In this blog we will continue working on our previous created SAP-Firebase Connect App.

This previous created app showed us how to get real time shipments into our application and how to react on real-time updates such as added, modified and deleted shipments.

If you didn't follow this blog, you can find it right here:

SAPUI5 FIREBASE BLOG SERIES:

Create SAPUI5 Applications with Google Firebase

SAPUI5 Applications with Firebase Anonymous Authentication (this blog)

SAPUI5 Applications with Firebase Cloud Messaging

Make SAPUI5 Firebase Applications Fiori Launchpad Ready

We will be working towards Cloud Messaging, to get real-time notifications for our App.

But before we can receive our notifications we will add some extra security to our app.

We only want logged in users to receive notifications.

But since we are already logged in via the SAP Cloud Platform, we do not want to ask our user to log in again.

This is where the Firebase Anonymous Authentication comes in handy!

A small note from the anonymous documentation and what it is:

You can use Firebase Authentication to create and use temporary anonymous accounts to authenticate with Firebase. These temporary anonymous accounts can be used to allow users who haven't yet signed up to your app to work with data protected by security rules. If an anonymous user decides to sign up to your app, you can link their sign-in credentials to the anonymous account so that they can continue to work with their protected data in future sessions.

To protect your project from abuse, Firebase limits the number of new email/password and anonymous sign-ups that your application can have from the same IP address in a short period of time. You can request and schedule temporary changes to this quota from the Firebase console.

From Firebase authentication.

 

 

So let's get started!

 

Enable Anonymous Authentication in the Firebase Console

Turn on the Anonymous authentication:



 

Set the Firestore Security Rules to only Authenticated users

Set the Security rules in the rules tab of the Firestore. We only want our signed in users to be able to read the data. So read and write is only possible when the request.auth.uid != null.



Rules:

// Allow read/write access on all documents to any user signed in to the application

service cloud.firestore {

  match /databases/{database}/documents {

    match /{document=**} {

      allow read, write: if request.auth.uid != null;

    }

  }

}

If we would run the application now, we would not see any shipments. Because we are not logged in and only logged in users can see the shipments.

 

Add the Authentication JS SDK to your App

This can be done in the index.html file.

We already imported the Firestore JS SDK to our App.

So add the following Authentication SDK now:

<!-- Add the Firebase Authentication JS SDK -->

<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-auth.js"></script>

 

Set the Authentication Reference into your Firebase Model

This needs to be added in our Firebase.js file.

In here we already created the Firestore Reference.

You initializeFirebase function should look like this:

initializeFirebase: function () {

	// Initialize Firebase with the Firebase-config

	firebase.initializeApp(firebaseConfig);

			

	// Create a Firestore reference

	const firestore = firebase.firestore();

			

	// Create a Authentication reference

	const fireAuth = firebase.auth()

			

	// Firebase services object

	const oFirebase = {

		firestore: firestore,

		fireAuth: fireAuth

	};

			

	// Create a Firebase model out of the oFirebase service object which contains all required Firebase services

	var fbModel = new JSONModel(oFirebase);

			

	// Return the Firebase Model

	return fbModel;

}

 

Sign in the user Anonymously

To sign in we add the following anonymous authentication function into our Component.js file.

We want to be sure the user is logged in on application level and we do not want to login at every single controller page.

So add the sign in method under the initializeFirebase function:

// set the firebase model by calling the initializeFirebase function in the Firebase.js file

this.setModel(Firebase.initializeFirebase(), "firebase");



// AUTHENTICATION

			

// Create a Fireauth reference

const fireAuth = this.getModel("firebase").getProperty("/fireAuth");



// Login the user anonymously

fireAuth.signInAnonymously().catch(function (error) {

	// Handle Errors here.

	var errorCode = error.code;

	var errorMessage = error.message;

});

If we would run the app at this moment we would see that by calling the signInAnonymously function, we are logged in and we will see a anonymous user is created in the Firebase console:



At this point the shipments would be loaded again into our application.

 

Create an onAuthStateChanged observer

By creating this observer we can check whether the user is logged in or not. So the signInAnonymously function will not be called every time. But only when necessary.

Again into our Component.js file.

This onAuthStateChanged function looks like this:

firebase.auth().onAuthStateChanged(function(user) {

  if (user) {

    // User is signed in.

    var isAnonymous = user.isAnonymous;

    var uid = user.uid;

    console.log("User: ", user);

  } else {

    // User is signed out.

  }

});

You can access the logged in user property when logged in.

 

Check for first use

When a user will login the first time, he will try to get the shipments while we are still logging in from the Component.js file. Remember we added the login and observer there to login at application level and not in each controller. But in the controller we are not logged in the very first time we open the app.

So let's add the observer here too and only call our shipments when we are logged in. When the onAuthStateChanged observer in the controller notices that the user is logged in (from the Compnent.js file) the getRealTimeShipments function will be called.

// Create a Authentication reference

const fireAuth = this.getView().getModel("firebase").getProperty("/fireAuth");



fireAuth.onAuthStateChanged(function (user) {

	if (user) {

		// Get realtime shipments

		this.getRealTimeShipments(collRefShipments);

	}

}.bind(this));

 

Recap time, what did we learn? 

In this blog we added Anonymous authentication to our UI5 App and Firebase console.

So here are some key takeaways:

1. When users are already logged in we do not want to ask them to authenticate again.


2. We can use Firebase Anonymous Authentication for this.


3. Only authenticated users can now call the data from the Firestore database, by adding the appropriate Firestore security rules.

 

NOTE!!!: 

Every user that has access to your UI5 application will be automatically logged in via the anonymous login function. By this mean, they will be able to read all the data. Keep in mind to close the the Firestore database with the appropriate security rules if you don't want this. But they need to be able to login with their SAP Cloud Platform user, so normally this would be desired behavior.

So now we finished the the Authentication part, we are ready for the Cloud Messaging part! 

Thanks for reading my blog about “SAPUI5 Applications with Firebase Anonymous Authentication“.

I hope you found it interesting!

See you in the Cloud Messaging/Notification blog!

Kind regards,

Anonymous