Login App in Jetpack Compose with Navigation
Build a login screen in Jetpack Compose and move to a dashboard after signing in. You will learn how Compose screens hold state and how Navigation Compose moves between them.
What you'll learn
- Build a login form with OutlinedTextField
- Hold input in state with remember
- Navigate between screens with NavHost
- Validate input before moving on
Before you start
- Android Studio (any recent version)
- Basic Kotlin: functions and variables
- An emulator or an Android phone
How it fits together
- 1LoginScreen
- 2loginError() checks the form
- 3navigate("dashboard/user")
- 4popUpTo removes login
- 5DashboardScreen → Log out
Build it step by step
1. Create the project
In Android Studio choose New Project → Empty Activity (the one with the Compose logo). Set Minimum SDK to API 24. The project comes with Compose, Material 3 and a theme ready to use.
2. Add Navigation Compose
In app/build.gradle.kts, inside dependencies { }, add:
implementation("androidx.navigation:navigation-compose:2.10.2")
implementation("androidx.compose.material:material-icons-extended")The icons line needs no version: the Compose BoM already in your project picks it. Press Sync Now.
3. Hold the form in state
In LoginScreen, keep username, password, showPassword and error with rememberSaveable { mutableStateOf(...) }. Each text field shows its value and updates it in onValueChange.
4. Build the fields
Use OutlinedTextField with a label and a leadingIcon (a person and a lock). singleLine = true keeps each on one line.
5. Hide and show the password
visualTransformation = PasswordVisualTransformation() shows dots. A trailingIcon eye button flips showPassword, switching to VisualTransformation.None so the user can check what they typed.
6. Use the keyboard's keys
ImeAction.Next on the username moves to the password. ImeAction.Done on the password, with keyboardActions = KeyboardActions(onDone = { logIn() }), logs in straight from the keyboard.
7. Check the form
loginError(username, password) returns a message, or null when all is well. Keeping the rules in a plain function makes them easy to read and change. Show the message with isError and supportingText under the password field. This demo checks a fixed account (user / 123456).
8. Go to the dashboard
On success, navController.navigate("dashboard/user") opens the dashboard and passes the username in the route. popUpTo("login") { inclusive = true } removes the login screen, so Back closes the app instead of returning to the form.
9. Log out
Log out navigates back to "login" and removes the dashboard from the back stack the same way.
10. Run it
Try an empty form, a wrong password, then user / 123456. Press Back on the dashboard.
Next steps
Real apps check accounts in a database or on a server. See Login and Register with SQLite or Firebase Authentication.
What's improved over the video
The latest Compose and Navigation, a show/hide password button, icons, keyboard actions, clear error messages under the field, a back stack that behaves like a real app, and state that survives rotation.
Files affected
Check what to add and what to replace before copying code.
- app/build.gradle.ktsAdd these lines
- app/src/main/java/com/example/composelogin/MainActivity.ktReplace file
- app/src/main/java/com/example/composelogin/DashboardScreen.ktAdd these lines
- app/src/main/java/com/example/composelogin/LoginScreen.ktAdd these lines
- app/src/main/java/com/example/composelogin/Theme.ktAdd these lines
Required setup
These are additions to an existing project—not replacement project files.
Add Navigation Compose and icons
Add these linesWhere: app/build.gradle.kts
The new Empty Activity project already includes Compose and its BoM. Add these two lines, then press Sync Now.
// app/build.gradle.kts, inside dependencies { ... }
implementation("androidx.navigation:navigation-compose:2.10.2")
implementation("androidx.compose.material:material-icons-extended")
Application code
Select a file to see its code and where it belongs.
This code uses package com.example.composelogin. Change that first line to your own package, the one at the top of your MainActivity.
app/src/main/java/com/example/composelogin/MainActivity.ktThe NavHost: login, then dashboard, with the back stack cleared each way.
package com.example.composelogin
import android.net.Uri
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.runtime.Composable
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
ComposeLoginTheme {
App()
}
}
}
}
/**
* Login and Dashboard. After logging in, the login screen is removed from the back stack,
* so Back on the dashboard closes the app instead of returning to the form.
*/
@Composable
fun App() {
val navController = rememberNavController()
NavHost(navController = navController, startDestination = "login") {
composable("login") {
LoginScreen(onLoggedIn = { username ->
navController.navigate("dashboard/" + Uri.encode(username)) {
popUpTo("login") { inclusive = true }
}
})
}
composable("dashboard/{username}") { entry ->
DashboardScreen(
username = entry.arguments?.getString("username").orEmpty(),
onLogOut = {
navController.navigate("login") {
popUpTo("dashboard/{username}") { inclusive = true }
}
},
)
}
}
}
Full source code
Keep building
All tutorials
5:43Animated Splash Screen in Android Studio with the SplashScreen API
2026-02-28 · YouTube
Watch on YouTube
15:28Buttons in Android Studio: Create, Style and Handle Clicks (Java)
2026-02-15 · YouTube
Watch on YouTube
21:02Jetpack Compose for Beginners: Your First Compose App
2024-12-15 · YouTube
Watch on YouTube