How to Create a Login Activity

Implement an Auth System in Your Next Android App!

Most applications today have an authorization system in forms of Facebook login, Google login, plain old email login, and more. In fact, Sketchware uses Google Login in the application as well. Having an authorization system is a great way to keep users organized. Today, we’ll learn how to create a basic username/password login system on Sketchware.
First, here is a little sneak peek of what we’re going to create:
Login Page, Signup Page, and Welcome Page respectively

What you’ll need

  1. Sketchware — a mobile IDE on your smartphone
  2. Passion to learn! :-)

What you’ll learn

  1. How to create a simple login system
  2. Understand writing and retrieving data from File component
The login application we create is going to be multi-paged. These are some of the activities you will need:
  1. Login Page (Main Activity)
  2. Signup Page
  3. Logged-in Page

Main Activity

When we start the application, we will want to greet the user with a login page. On this screen, user will be able to perform two actions: logging in and signing up. This is how I designed my login page:
Since the user will have to go through a sign-up process, let’s tackle the sign-up logic first. On the Signup button clicked event, we simply navigate the user to the signupActivity.
Logic for signup_button onClick event

Sign-up Activity

Clicking on the Sign-up button leads us to the SignupActivity, which looks something like this. This page has one purpose — signing up the user with the provided information.
Many users ask, “How do we save the user information locally so that the information stays even after the app has been closed?” The answer is File. Using File component, we can save the data locally, and retrieve it next time the app starts.
Start by adding a new File component in SignupActivity.java:
Basic flow goes like this:
1. User inputs username/password and clicks on the signup button
2. Validate the user input. If valid, signup, else show an error message.
3. Alert the user and finish the activity if the sign-up is complete.
The reason why I am saving the key as a username is because I want to create a 1-to-1 relationship between the username and password. We usually call this relationship “map”.
Cool! Let’s tackle the login logic now.

Back to Main Activity

Before we do anything, let’s organize the logic.
1. When the user enters the username/password, validate the length.
2. If they’re both greater than 0, we want to retrieve the information from the data we previously saved.
3. Since the data is saved in <Username, Password> map, we validate if the given username matches the password.
4. If valid, log the user in, else show an error message.
Another thing worth noting is that we also need to add a File Component inside the MainActivity.java. When you do that, MAKE SURE the file name is the same as the one you’ve previously declared. I called it “userInformation”, so I am going to enter “userInformation” again.
Here is the logic for the login_button clicked event:

LoggedinActivity

Last but not least, this is the screen that shows up when the login is complete. Pretty simple right? Even though I didn’t apply this concept, you could possibly pass the username through the Intent if you’d like and welcome the user with the message “Welcome username!”. Just a thought :-)

Conclusion

Today, we learned about how we can create a login system in Android Applications using Sketchware. Basic concept and flow goes like this:
1. User signs up to the application, and we only allow the signup to happen if the user input are validated. We store the information locally by using File system and keeping the username-password relationship 1-to-1.
2. User logins to the page with the information. We validate the user input and logs in the user if the username/password are matching.
Once you complete the login system, here are some possible features I want to challenge you to add:
1. Secure the password input. This means, when the user inputs the password, the password will be replaced with interpunct: “·”
2. Create a checkbox with “Remember me” button. If the checkbox is checked, remember the user and login the user automatically next time the user starts the app.
I shared this Login Example under Sketchware as “Login Example”. Feel free to rip it apart and learn from it.
That’s it! If you have any questions, please join our active Sketchware community on Slack! Happy coding! :-)
If you enjoyed this article, please press the 💚 below so others can find this article too!



source by  https://medium.com/sketchware/how-to-create-a-login-activity-65e35708f370