Get Started with Jetpack Compose Authentication
Tags: programming, android, tutorial
Published: 2022-12-14 21:25:46

> Original post written by [Joey deVilla](https://auth0.com/blog/authors/joey-devilla/) for Auth0 Blog.

### Learn how to build a basic app using Android’s Jetpack Compose UI toolkit.

### <br>

With nearly 3 billion users, [almost 70% of the mobile OS market share](https://www.statista.com/statistics/272698/global-market-share-held-by-mobile-operating-systems-since-2009/), and [the majority share of all user-facing operating systems worldwide](https://gs.statcounter.com/os-market-share), Android is the number one operating system in use today. As an Android developer, you have access to the world’s largest customer base, and sooner or later, you’ll write an app that requires the user to log in and out. One of the goals of this tutorial is to show you how to use Auth0 to add authentication to an Android app. You’ll also become familiar with the Auth0 dashboard and learn how to use it to register applications and manage users.

Platforms evolve, and Android is no exception. However, when a platform the size of Android fundamentally changes how you do things, developers who embrace the change early gain a significant advantage. This change is happening now with [Jetpack Compose](https://developer.android.com/jetpack/compose). This tutorial’s secondary goal is to give you an “early adopter” advantage by building a simple login/logout user interface with Jetpack Compose.

> Look for the 🛠 emoji if you’d like to skim through the content while focusing on the build and execution steps.


## Jetpack Compose

<a href="https://developer.android.com/jetpack/compose"><img src="https://images.ctfassets.net/23aumh6u8s0i/4JQe27JmEip0X21uRGa0sr/ae23bfa547ed18a019c6fd92615f1eff/jetpack_compose_icon.png" align="right" alt="Jetpack Compose icon."></a>

Released in July 2021, **Jetpack Compose** (often shortened to **Compose**) is a UI toolkit that thoroughly updates the process of building Android apps. Instead of XML, you use declarative Kotlin code to specify how the UI should look and behave under different states. You don’t have to worry about how the UI moves between those states — Compose takes care of that for you. You'll find Compose familiar if you’re acquainted with declarative web frameworks like React, Angular, or Vue.

The Jetpack Compose approach is a significant departure from Android’s original XML UI toolkit, modeled after old desktop UI frameworks and dates back to 2008. You use a mechanism such as [`findViewById()`](https://wajahatkarim.com/2020/04/evolution-of-finding-views/) or [view binding](https://developer.android.com/topic/libraries/view-binding) to connect UI elements to code. This imperative approach is simple but requires you to define how the program moves between states and how the UI should look and behave in those states.

Jetpack Compose is built with Kotlin, takes advantage of the features and design philosophy of Kotlin language, and is designed for use in applications written in Kotlin. With Compose, you no longer have to context-switch to XML when designing your app’s UI; you now do everything in Kotlin.


## What You’ll Build

You’ll use Auth0 and Jetpack Compose to build a single-screen Android app that allows users to log in and out. I’ve purposely kept it as simple as possible to keep the focus on authentication.

When you launch the completed app, you’ll see a greeting and a _Log In_ button:

![The app’s “Welcome” screen.](https://images.ctfassets.net/23aumh6u8s0i/79V4LEtvxB3v6SmVpFTJiv/6b3e9a97e35320bb7b23921786b624c5/welcome_screen.png)

Pressing the _Log In_ button takes the user to the [Auth0 Universal Login screen](https://auth0.com/docs/login/universal-login). It appears in a web browser view embedded in your app. Here’s what it looks like in an emulator...

![The default Auth0 Universal Login web page, as viewed in an emulator.](https://images.ctfassets.net/23aumh6u8s0i/1wO8fe8gEACROirEUKh0r9/6fea0a9aca8635b929abc273b26b2574/universal_login_-_emulator.png)

...and here’s what it looks like on a device:

![The default Auth0 Universal Login web page, as viewed on a device.](https://images.ctfassets.net/23aumh6u8s0i/3J5tC0kNuWHQDiMYJiTV5n/cdb03cf0ab6c5745fa1f95dde83a5366/universal_login_-_device.png)

When you use Auth0 to add login/logout capability to your apps, you delegate authentication to an Auth0-hosted login page. You've probably seen this in Google web applications such as Gmail and YouTube. These services redirect you to log in using [accounts.google.com](https://accounts.google.com/). After logging in, Google returns you to the web application as a logged-in user.

> If you’re worried that using Auth0’s Universal Login means that your app’s login screen will be stuck with the default Auth0 “look and feel,” I have good news for you: [you can customize it to match your app or organization’s brand identity.](https://auth0.com/docs/universal-login/new-experience/universal-login-page-templates)

The Universal Login page saves you from having to code an authentication system. It gives your applications a self-contained login box with several features to provide a great user experience.

If the user enters an invalid email address/password combination, it displays an error message and gives them another chance to log in:

![Universal Login displaying the “wrong email or password” message.](https://images.ctfassets.net/23aumh6u8s0i/1XQjDhWtwitjqRe7kESxGo/81a14507b732cac2158e4e414dc9679b/universal_login_-_invalid_email.png)

There are two ways to exit the Universal Login screen. There’s the “unhappy path,” where the user presses the _Cancel_ button at the upper left corner of the screen, which dismisses the Universal Login screen and returns them to the opening screen.

The “happy path” out of the Universal Login appears when the user enters a valid email address/password combination. When this happens, Auth0 authenticates the user, the embedded web view and Universal Login will disappear, and control will return to the app, which will now look like this:

![The app in its “logged in” state, with a title that reads “You’re logged in!”.](https://images.ctfassets.net/23aumh6u8s0i/5gNAhdJeDuRARnH8wTIVc5/aceaf6a3b65365ee9957d1cc47b5ac84/logged_in_screen.png)

Here’s what changed after the user logged in:

* The title text at the top of the screen now says, “You’re logged in!”
* The name, email address, and photo associated with the user’s account appear onscreen.
* A _Log Out_ button appears below the user’s photo.

As you might expect, the user logs out by pressing the _Log Out_ button, which returns them to a slightly different version of the initial screen:

![The app after the user logs out, with a title that reads “You’re logged out.” and a “Log In” button.](https://images.ctfassets.net/23aumh6u8s0i/2aiT1PgALmT39dBRE0ioky/73e5374e0faddfa4a62b56f0a408aa51/logged_out_screen.png)


## What You’ll Need

You’ll need the following to build the app:

### 1. An Auth0 account

The app uses Auth0 to authenticate users, meaning you need an Auth0 account. You can <a href="https://auth0.com/signup" data-amp-replace="CLIENT_ID" data-amp-addparams="anonId=CLIENT_ID(cid-scope-cookie-fallback-name)">sign up for a free account</a>, which lets you add login/logout to 10 applications, with support for 7,000 users and unlimited logins — plenty for your prototyping, development, and testing needs.

### 2. An Android development setup

To develop applications for Android, make sure you have the following, in the order given below:

* Any computer running Linux, macOS, or Windows from 2013 or later with at least 8 GB RAM. When it comes to RAM, more is generally better.
* [**Java SE Developer Kit (JDK), version 11 or later.**](https://www.oracle.com/java/technologies/javase-jdk16-downloads.html) You can find out which version is on your computer by opening a command-line interface and entering `java --version`.
* [**Android Studio,**](https://developer.android.com/studio) version 2021.2.1 Patch 2 (also known as “Chipmunk”) or later. Jetpack Compose is a recent development, so you should use the most recent stable version of Android Studio.
* **At least one Android SDK (Software Development Kit) platform.** You can confirm that you have one (and install one if you don’t) in Android Studio. Open _Tools_ → _SDK Manager_. You’ll see a list of Android SDK platforms. Select the current SDK (**Android 12.0 (S)** at the time of writing), click the _Apply_ button, and click the _OK_ button in the confirmation dialog that appears. Wait for the SDK platform to install and click the _Finish_ button when installation is complete.
* **An Android device, real or virtual:**
	* **Using a real device:** Connect the device to your computer with a USB cable. Make sure that your device has Developer Options and USB debugging enabled.
	* **Using a virtual device:** Using Android Studio, you can build a virtual device (emulator) that runs on your computer. Here’s my recipe for a virtual device that simulates a current-model inexpensive Android phone:
		1. Open _Tools_ → _AVD Manager_ (AVD is short for “Android Virtual Device”). The _Your Virtual Devices_ window will appear. Click the _Create Virtual Device..._ button.
		2. The _Select Hardware_ window will appear. In the _Phone_ category, select _Pixel 3a_ and click the _Next_ button.
		3. The _System Image_ window will appear, and you’ll see a list of Android versions. Select _S_ (API 31, also known as Android 12.0). If you see a _Download_ link beside R, click it, wait for the OS to download, then click the _Finish_ button. Then click the _Next_ button.
		4. The _Android Virtual Device (AVD)_ window will appear. The _AVD Name_ field should contain _Pixel 3a API 31_, the two rows below it should have the titles _Pixel 3a_ (a reasonable “representative” phone, released three years ago at the time of writing) and _S_, and in the _Startup orientation_ section, _Portrait_ should be selected. Click the _Finish_ button.
		5. You will be back at the _Your Virtual Devices_ window. The list will now contain _Pixel 3a API 31_, and that device will be available to you when you run the app.

### 3. A little familiarity with Android/Kotlin development. 

If you’re new to Android development or the Kotlin programming language, you might find [*Android Basics in Kotlin*](https://developer.android.com/courses/android-basics-kotlin/course) to be a good introduction.


[Read more...](https://auth0.com/blog/android-authentication-jetpack-compose-part-1/?utm_source=devto&utm_medium=sc&utm_campaign=devto)