Wouldn’t it be cool if you could restrict the access to your Java application by simply running a command? You are in for a treat as the lab App Dev-Adding User Authentication to your Application-Java teaches you exactly that. Let’s dive deep into this lab and see how you can take the most out of this lab.
All you need to complete this lab is a standard internet browser and of course your precious time. :) If you are wondering whether you have to build a Java app in order to do this lab, don’t worry. You will get a ready Java application at your disposal to experiment with and learn. You will even get to use the Firebase Console.
So let’s get started with this lab
Prepare the Application
After the initial set up, you need to get the sample application, in this case a quiz app, in order to add user authentication to it. You will clone the repository, ensure that the environment variables are configured and then finally run the application.
Sounds complicated? It’s not! You just have to run the commands, then wait patiently as it takes some time to create the environment and run the application. Waiting might be the hardest part of the lab.. Similarly in order to get your app running you will have to wait to perform the further steps.
You will see the above the screen for quite some time. You might think the lab is frozen but I assure you it is not. :)
After you run the application according to the instructions and preview it on the port, you will see a screen like this:
This is your Java application.
Examine the Quiz application code
It is time to take a look at the code of this application. For this purpose we have the cloud shell editor. You need to follow the instructions carefully in order to navigate into the right file. Here is one of the most important instructions of this lab which you wouldn’t want to miss:
Navigate to the /training-data-analyst/courses/developingapps/java/firebase/start
We will come back to editing files in the cloud shell editor later in this lab. Now is the time to get a hands on experience with the Firebase Console!
Work with Firebase
Firebase is an application which is useful for various functions like data analysis, maintaining database monitoring and so on. Here is more information on Firebase. In this step we will see how to create and add the project using Firebase console.
The subsection Create a Firebase is self explanatory and you will be able to successfully create and add your project into the Firebase console by following the instructions. You might find the subsection Configure Firebase Authentication a bit tricky.
When you are adding the domain under Authorized Domain all you have to do is go to your running Java Quiz application; copy the link in the address bar and paste it in the respective field. Your output should look like this:
Once you click on the add button you will receive a message like the one in the image below:
Once you see this message you are all set for integration of the App!
Integrate a Client-Side Web Application with Firebase
Now you’re ready for the final section of the lab. It’s more challenging than what you’ve done already, but never fear, we are here to help. You will edit the code in order to add user authentication to your app. But make sure you are editing the right file or you won’t see the results.
In order to edit the code file, you need to first acquire the code. You can easily do that by following the lab instructions. Your code will look like this:
The lab instructions tell you to use the copy code button but here’s a small tip: Copy it manually and omit the first line while copying the code. This will help to avoid confusion later, as this file already has a code in place and the first line “The core Firebase JS SDK is always required and must be listed first” is not required.
When you are navigating to the index.html folder you will see two files, you have to select the first one which is highlighted in the image below.
After making the necessary changes in the file, you will have to restart the application. Once you restart the application and click on Take Test you will see the option for Registration with email id and password. Your output will look like this:
You will not be able to take the quiz without giving the email id and the password.
Congratulations! You have completed this lab successfully. If you want to learn how to authenticate your application for your Python application, here’s the App Dev: Adding User Authentication to your Application-Python lab for you. The Cloud Development Quest has many more labs to offer which will help you to use Java and Python with Google Cloud.
We hope you have fun with this Quest!