Skip to main content

How to create a login and signup page

As suggested by some of you last week, we will be building a simple Social media app as well as some simple games as we go. When Building a social media app one of the key steps is to anticipate who your users will be and then creating a system to harness any key information. This can be easily done during the sign up or sign in process. In this lesson we will cover how to create a login Screen. We had touched on this some time back but for the benefit of those who joined us a bit later we will cover it in more detail. 

In a nutshell, this is what we will learn

 • How to show and hide widgets • How to use the firebase auth component to create a user

 • How to create a simple algorithm that checks if a user has filled in the login form correctly. 


Prerequisite

Create a firebase account for your app

Before getting started you will need to create an Account on Google's Firebase platform. Simply visit https://firebase.com and use your gmail account to sign up for one. This is free to use for small apps: 

Firebase will:

• store and manage your user emails and passwords. These will be encrypted.

• handle sending of any reset password emails

• handle your app's database i.e. storing user profiles, messages and any other data that you will be collecting. More importantly, it will power the chat functionality of your app.

• We will also use firebase storage to store any user generated content and this includes documents, audio, images and video files.

If you are not sure how to set up firebase, check out this tutorial on:

Tutorial: How to create and set up a Firebase project  

Please note that you do not have to use Firebase if you do not want to... you can do it all by yourself but as a newbie, they might be in a better position to keep your user data secure.

Also note that you will need to set up an Authentication method in Firebase. For now we will only use email login

Building my Sign up page


I have dragged and customized my blocks to create the look and feel of my screen. I have changed my widget style, colours and padding according to my needs. 
Since I do not know what type of devices my users will be using, I have chosen not to give my widgets a fixed width. I have used the *weight* property to make it responsive to screen size. Giving a widget a weight of 1, means it will take up all the available space on that screen or in that layout.

To avoid having multiple screens I have chosen to have my login, sign up button and register button on the same page(activity). The *register* section will be hidden until the user clicks the *sign up button*
This is how my landing page will look.


Business builder app login layout

Creating Components for our login/signup page


I have also created the following components:

1. Intent-

I have created an intent to move from the login page once a user signs up or to move to the forgot password screen.

2. Firebase Auth-

this will help us create new users or to authenticate the users that we already have. I have given it the name "auth" but you can give yours any name. This component will also assign a unique user ID to each user.

3. Shared Preferences

I will store the username and country on the user's device. This will help me greet them by name.

So my components section will look like in the image below

components

LOGIN/SIGN IN logic

When a user clicks the login or sign in button the app will first check if the email and the password fields are empty. If neither of the two fields is empty then it will sign in the user using the email and password. If the password is incorrect then Google will send an error message.
Please note that these fields are case sensitive so if a user types in the correct email but then clicks the space bar afterwards, it recognizes the space as an additional character and will not log them in.
I have placed the logic for logging in *onButtonClick* and it will look like in the image below.

Signup blocks

SIGN UP button logic


In onCreate I have chosen to hide the user registration section. So when a user clicks the sign up button it will hide the other stuff such as our login fields and then set visible the fields for our user to register. If you would like to create a separate activity for your users to register you can place an intent leading to the registration page here.

In my case I have used the *SetVisible* block to hide and show the information I want.

*How the SetVisible block works*
*Visible-* an object will become visible
*Invisible-* this will make an object invisible but it will still take up space.
*Gone-* this will hide an object and also the space that it takes up. The information will still be available though.

My logic will look like in the image below.


Logic to hide and show widgets

REGISTER/CREATE AN ACCOUNT logic

Once the Signup button has been clicked and the Registration section becomes visible I want the user to choose a username, to specify their country and to submit their email. I also want to help them confirm that they have entered the right password. 
I will start by first checking if they have filled in all the required fields. If they have not, I will toast(show a message) saying "lease fill in all the required fields."
If all the fields have been filled in, I will then check if the passwords match. If they do not match, I will toast a message saying "The passwords do not match"
If the user has met all the required conditions I will then create a user with the email and password that they will have entered.
For now I will not be saving the "username" and "country" to firebase but to shared preferences.

Register logic

On CreateUser/Sign Up Complete

Once the user has completed the sign up process, you might take them to a "Welcome" page or an "onboarding" page to tell them how your app works and help them get started. The Firebase Auth Component comes with it's own custom events which you can add to your app. These are for when a user has successfully signed in or when they successfully create an account with you. 
You can add these events from the events section, under components or from the components section itself. My blocks will look like in the images below.

onCreateUserComplete

onSignInComplete Logic

When a returning user successfully signs into your app, you will probably want to treat them differently from a new user. The firebase auth component comes with an event for onSignInUserComplete. This determines when a user successfully provides the correct credentials or when they fail. So let's add this event and place our logic for a successful sign in. The blocks will look as illustrated in the image below. When a user signs in, it will take them to the MainActivity and if the credentials are wrong, it will toast an error message.

onSignInUserComplete
At this point you can run your app and try out your app. After successfully signing in, remember to check for the corresponding entry in your firebase console.




Comments

Popular posts from this blog

Hip hop and RnB songs to apologize to your partner

Love is a beautiful thing, but it often goes wrong. This often leads to pain, suffering and sorrow.  Being imperfect beings, hearts tend to get broken all the time regardless how hard we may try to avoid it.  The heartbreak is often inadvertent but at times we find ourselves in the wrong. An oversight, a word unsaid or even a lapse in our judgement can cause our loved ones harm. This doesn't always have to be the end though. Oftentimes, relationships can be mended by simply uttering three simple words: "I AM SORRY". This article is a collection of some of my favourite 'I'm sorry' songs. I hope you'll enjoy these apology songs, but more importantly, I hope you will get a few quotables and some wisdom nuggets from them.  The best apology however, is to change behaviour (got that from a Jay Z interview) so as you apologize, please remember that it was your actions that hurt them. The best apology is one which involves you not repeating those same mistakes aga

How to easily create background notifications in Sketchware(original)

One of the keys to building a successful app is to find mechanisms that will keep your users engaged. You can do this by using background notifications. This tutorial will show you how to do that in Sketchware. We will cover: 1. How to create notifications in Sketchware 2. How to show these notifications even when the app is closed. We will start by creating a new project. If you do not know how to create a new project please check out this article here. Once we have created our project, let us create a more block to place our code. Navigate to the events menu and then to the moreblock section as shown in the image above. Create a moreBlock. I have created a moreblock with the name "BackgroundActivity" with a boolean variable named "run." See the image below for how to add the boolean variable. Place the following block in the moreBlock Background activity code: moveTaskToBack(_run); That will move our task to the background.  Please note, that at this point we have

Php date: How to get the first and last day of the week

In this tutorial, I'll show you how to get the first and last day of the week in php. By default, in PHP the week runs from Monday to Sunday. However we'll cover two methods to get the first and last day for both those who consider Sunday or Monday as their first day of the week. We will be using 2 functions to achieve this: date() strtotime() We will use a combination of these two functions and store the result in a variable.  How to get the first day of the week If you want to get Sunday, use this method: $firstday = date('l Y-m-d', strtotime("sunday -1 week")); echo $firstday; If you want to get the date for Monday, this current week, use this method: $monday = date('l Y-m-d', strtotime("monday -1 week ")); echo $monday; How to get the last day of the week The following code will give you Saturday as the last day of the current week. $lastday = date('l Y-m-d', strtotime("saturday 0 week")); echo $last