Creating Login and Sign-Up Widgets

We’ll now go ahead and create a user interface to interact with the Firebase backend that we initialized in our app. The first service we’re going to deal with is Firebase Authentication. This app helps us users create accounts and log in to our project through various methods like email and password without the need to set up the infrastructure.

To use Firebase Authentication, we’re going to first build our UI, which is composed of three pages discussed below:

Login page

The login page is a crucial part of any application that requires user authentication. Its main goal is to guarantee that only registered users can access the app’s features and content. A user is prompted to enter their credentials, typically an email and password combination, in order to verify their identity. The login page typically has a number of components to improve user experience and offer an aesthetically pleasing interface.

Let’s discuss these components below.

App logo

Displaying the app’s logo on the login page enhances branding and the page’s aesthetic appeal. It fosters a sense of familiarity and aids users in recognizing the application they’re logging into.

Add the app logo as follows:

Here, the Container widget contains a child widget, which is an Image.asset widget with the path of the logo image.

Text fields for email and password

Users can securely enter their email address and password in these input fields. It’s essential to implement suitable security measures, like encryption, to safeguard user data.

We proceed to add the text field for the email:

Here, hintText contains the text displayed inside the text field, and textInputType constrains the user to input text in the email format, for example, “email@educative.io.”

Now, let’s add the text field for the password as follows:

Here, isPass is a boolean-type variable set to true to obscure the password entered.

Login button

By pressing this button, the user’s credentials are validated during the authentication process. After clicking, the app verifies the entered data and, if everything is accurate, allows the user access.

Next, we set up the login button as follows:

Here, the login button is an ElevatedButton with text displayed that says “Log In.” The one with a onPressed function GetAuth.instace.loginUser(emailController.text.trim()) that we are going to set up later.

Instructional text

The page can include text that offers instructions or explanations on how to log in successfully to help users through the login process. Users can use this text to better understand any prerequisites or specific instructions related to logging in.

The instructional text above redirects new users to the signup page using a RichText widget with TapGestureRecognizer to navigate to the page.

Google button

These buttons allow the user to sign in with their Google account credentials in our app.

Here, the Google button is implemented differently by wrapping a CircleAvatar displaying the Google logo with a GestureDetector to and an on-tap function that initiates the Google sign-up method.

With that, we’re done with the different elements of the login page, and we can now focus our attention on the sign-up page.

Sign-up page

The sign-up page complements the login page by allowing new users to register and create an account. It maintains the same overall theme and design as the login page to ensure consistency throughout the app.

The sign-up page includes similar elements as the login page but with a few differences, which are:

Different instructions

Rather than instructing users to log in, the sign-up page’s instructions direct them to create a new account. It might contain guidelines for selecting a secure password, providing truthful personal data, or accepting terms and conditions.

Login redirect

When a user clicks the sign-up button but already has an account, they’re requested to navigate to the login page. By doing this, current users can access their accounts without setting up another account.

The code widget below shows the instructional text to redirect to the login page:

The main difference in the instructional text between the sign-up and login page is the GetX to routing Get.toNamed('/login') and the displayed text itself.

Welcome page

Users are either directed to the welcome page or the profile page after successfully logging in. Each user’s unique landing page, which offers pertinent information about their account, is on this page.

The following components are frequently found on the welcome page:

• Text and icon: To greet the user, a friendly message is displayed along with a face icon or profile picture. This results in a welcoming and distinctive experience.

• User information: The user’s name, email, and any other pertinent information are displayed in this section. It aids users to verify that they’re logging into the right account and strengthens the feeling of personalization.

In our case, as we can see in the image above, we implement the following:

The logo

As we did on the login page, the logo will be implemented using a Container with a child widget with the path of the logo image in the following manner:

User information

The user information is displayed using the Text() widget.

Logout button

The logout button is implemented in a similar fashion as before, making use of the ElevatadButton with text displayed that says “Log Out,” as seen in the code widget below:

It’s important to note that email is the only data we can retrieve from the user as it’s the only data provided by the user. Although the Authentication service in Firebase also gives a user a unique UIDThis is a unique identification number or code used to identify or reference a user in the backend and can also be considered an email alternative., it’s not wise to display it on the welcome page.

Putting it all together

Now, let’s put the three pages, i.e., login, sign-up, and welcome, into our application. Click the “Run” button below to view the app.

Note: Google Sign-In is disabled since we haven’t created a function to handle the action.

By implementing well-designed login, sign-up, and welcome pages, an application can offer a simple and secure user authentication process while maintaining a consistent and aesthetically pleasing UI.