Login / Logout Flow: Android Jetpack Compose and CompositionLocal

UpdatedNovember 12, 2021

•3 min read•View as Markdown

Login / Logout Flow: Android Jetpack Compose and CompositionLocal

Paul Allies

Part of seriesAndroid

Comments

Join the discussion

No comments yet. Be the first to comment.

Android

Part 1 of 8

Up next

Getting Started with TDD: Kotlin and Jetpack Compose

The TDD (Test Driven Development) approach is important when it comes to testing small portions of business logic code in isolation. In this blog, I'll cover how I would use TDD to build a clean architecture To-do Jetpack Compose Android application ...

More from this blog

Login / Logout Flow: SwiftUI and EnvironmentObject

EnvironmentObject is useful when you want to create a dependency in a higher component of the layout tree and use it on a lower component without having to pass it down the tree through every child component. We will now use EnvironmentObject to moni...

Nov 8, 20213 min read3.4K

Login / Logout Flow: SwiftUI and EnvironmentObject

Getting Started with TDD: SwiftUI

Oct 27, 20215 min read872

Getting Started with TDD: Kotlin and Jetpack Compose

Oct 27, 20214 min read484

Room(SQLite) and Kotlin

The Room persistence library provides an abstraction layer over SQLite. To use Room in your app, add the following dependencies to your app’s build.gradle file: dependencies { .... kapt "org.xerial:sqlite-jdbc:3.34.0" // Room def roo...

Oct 25, 20214 min read162

Nanosoft Code Foundation

18 posts

import androidx.compose.runtime.compositionLocalOf import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.setValue import androidx.lifecycle.ViewModel import kotlinx.coroutines.delay class UserStateViewModel : ViewModel() { var isLoggedIn by mutableStateOf(false) var isBusy by mutableStateOf(false) suspend fun signIn(email: String, password: String) { isBusy = true delay(2000) isLoggedIn = true isBusy = false } suspend fun signOut() { isBusy = true delay(2000) isLoggedIn = false isBusy = false } } val UserState = compositionLocalOf<UserStateViewModel> { error("User State Context Not Found!") }

class MainActivity : ComponentActivity() { private val userState by viewModels<UserStateViewModel>() override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { CompositionLocalProvider(UserState provides userState) { ApplicationSwitcher() } } } }

@Composable fun LoginScreen() { var email by remember { mutableStateOf("") } var password by remember { mutableStateOf("") } val coroutineScope = rememberCoroutineScope() val vm = UserState.current Column( Modifier .fillMaxSize() .padding(32.dp), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally ) { if (vm.isBusy) { CircularProgressIndicator() } else { Text("Login Screen", fontSize = 32.sp) Spacer(modifier = Modifier.height(16.dp)) Email(email, onChange = { email = it }) Spacer(modifier = Modifier.height(16.dp)) Password(password, onChange = { password = it }) Spacer(modifier = Modifier.height(16.dp)) LoginButton(onClick = { coroutineScope.launch { vm.signIn(email, password) } }) } } }

@Composable fun HomeScreen(navController: NavHostController) { val vm = UserState.current val coroutineScope = rememberCoroutineScope() Scaffold( topBar = { TopAppBar( title = { Text("Home") }, actions = { IconButton(onClick = { coroutineScope.launch { vm.signOut() } }) { Icon(Icons.Filled.ExitToApp, null) } } ) }, ) { Column( Modifier .fillMaxSize() .padding(16.dp), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally ) { if (vm.isBusy) { CircularProgressIndicator() } else { Text("Home") } } } }

Login / Logout Flow: Android Jetpack Compose and CompositionLocal

Comments

Android

Getting Started with TDD: Kotlin and Jetpack Compose

More from this blog

Login / Logout Flow: SwiftUI and EnvironmentObject

Getting Started with TDD: SwiftUI

Getting Started with TDD: Kotlin and Jetpack Compose

Room(SQLite) and Kotlin

User State View Model

Application Switcher

Home Screen with Logout Button

Command Palette

Comments

Android

Getting Started with TDD: Kotlin and Jetpack Compose

More from this blog

User State View Model

Application Switcher

Login Screen

Home Screen with Logout Button