Easy Email Authentication with Huawei Auth Service | Jetpack Compose
Hi everyone👋 In this article we will first design the sign in and sign up pages with Jetpack Compose, the recommended modern UI toolkit for Android. After that, we will integrate the Auth Service into our project and perform Email verification in an easy way. Let’s get started!
💜 Sign In and Sign Up Page Designs in 3 Steps with Jetpack Compose
Let’s briefly talk about the advantages of Jetpack Compose:
- 🤏Less code: Avoids all error classes and makes the code simple and easy to maintain.
- 🔮Intuitive: Just define your UI, Compose will take care of the rest for you. The UI you define is updated automatically according to the status of the application.
- 🐱🏍Accelerated development: Compatible with your existing codes. So you can easily adapt it whenever and wherever you want. Speeds up your development with live previews and full Android Studio support.
- 💪Powerful: Provides direct access to Android platform APIs. Make your application modern, especially Material Design, Dark theme, animation and many more.
Now let’s start making our Sign In and Sign Up page designs that you see below using Jetpack Compose!
📌Pill Information
- Arrangement: Used to control the distance of children on the main axis. You will find a verticalArrangement parameter in the Column and a horizontalArrangement parameter in the Row.
- Alignment: Used to control the distance of children on the cross axis. You will find a horizontalAlignment parameter in the Column and a verticalAlignment parameter in the Row.
- KeyboardOptions: Configures the options on the software keyboard. It basically has four options, such as capitalization, autoCorrect, keyboard Type, and displaying certain icons on the keyboard (imeAction)(such as the search icon).
- VisualTransformation: The VisualTransformation command is used to change the visual output of text in the input field.
- FocusRequester: Sends a request to programmatically change the focus for certain components.
- FocusManager: Allows you to force focus on one-time searches. For example, you might have a simple text field column in a form that you want to navigate when the user presses the “next” button on their keyboard. FocusManager will go through your focus hierarchy for you and find the next thing to focus on in the direction you want.
- Modifier: Allows you to manually control the sizing and position of the element.
- Column vs Row: Column layout, as its name suggests, adds each added element vertically to a column-shaped pattern. Row makes this addition horizontally, on the contrary.
1️⃣ Custom Component: TextInput & Model Class: InputType
First of all, since we will use the OutlinedTextField view component in the same way by changing only a few properties on different pages, we are making it a customizable element by making it more generic.
We keep the characteristics of our OutlinedTextField element to be customized with the InputType model class.
2️⃣ Sign In
We use the Column property, which is equivalent to the LinearLayout property that we are familiar with from Kotlin, on our login page. In the design, each view component will be sorted vertically by us.After the given header values, we get the email and password values from the user with the TextInputs we created above. And we finish our design with the necessary buttons.
3️⃣ Sign Up
The design of our registration page is similar to the design of our login page.
🎯 Auth Service Integration
First of all, you need to enable the Email verification mode of the Huawei Authentication Service in the App Gallery Connect.
You can follow the preliminary preparations for our project in detail from my previous article, where I mentioned the integration of Huawei Auth Service and the Activity Result Contracts that we will use instead of the deprecated startActivityForResult() function.
- Module: After the preliminary preparations, we define some necessary instances in our module class when using the Auth Service in our project. Thus, we minimize the dependence within the system.
- Repository: We define all the necessary functions for sign in and sign up in the repository class. The main purpose of using Repository Pattern here is to withdraw data transactions and queries to a centralized structure by avoiding repetitions.
🕵️♀️🎈Using Functions at the View Layer:
I will explain the use of the related functions via the login() function. Let’s see how we will call and use all the processes that we have isolated in the view layer?
- UI State
UI State is a feature that the application can process to provide users with the information they need. We specify three conditions for our login page; these will be login status, loading and error status.
- ViewModel
View only informs the ViewModel of its requests and observes the returned result here via the UI State object that we created.
- Login UI
The @Composable annotation informs the Compose compiler that this function aims to convert data into the user interface.
Here we started creating the UI of our Login page with the @Composable October annotation. When the Sign In button is clicked in the UI, we call our login() function via ViewModel. Finally, we follow up the situations related to the UI State structure we have established and perform the necessary operations.
You can find the latest version of the Login page below:
Output
Conclusion
In this article, first of all, we have completed our sign in and sign up page design with Jetpack Compose. Later, I tried to explain the steps of Email verification in the MVVM architecture of the Auth Service.
For the onboarding page, navigation operations and more in this project, where we have seen the use of Jetpack Compose at a basic level, you can access the Github repository from references part.
I hope it was a useful article. Pleasant work for everyone 😊
