Skip to content

fix(auth): handle edge-to-edge insets in MFA challenge and auth screens #2413

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
demolaf wants to merge 3 commits into
base: version-10.0.0-beta04
Choose a base branch
from
Open

fix(auth): handle edge-to-edge insets in MFA challenge and auth screens #2413

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d382bd5
fix(auth): validate display name only when required in sign-up form (…
demolaf Jul 10, 2026
6690696
fix(auth): handle edge-to-edge insets in MFA challenge and auth screens
demolaf Jul 21, 2026
747dddc
fix(auth): address code review feedback on edge-to-edge insets PR
demolaf Jul 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 28 additions & 23 deletions app/src/main/java/com/firebaseui/android/demo/CustomMethodPickerDemoActivity.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.safeDrawingPadding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyRow
Expand Down Expand Up @@ -51,7 +52,6 @@ import com.firebase.ui.auth.configuration.theme.AuthUIAsset
import com.firebase.ui.auth.configuration.theme.AuthUITheme
import com.firebase.ui.auth.configuration.theme.ProviderStyleDefaults
import com.firebase.ui.auth.ui.components.AuthProviderButton
import com.firebase.ui.auth.ui.method_picker.MethodPickerTermsConfiguration
import com.firebase.ui.auth.ui.screens.FirebaseAuthScreen

class CustomMethodPickerDemoActivity : ComponentActivity() {
Expand Down Expand Up @@ -144,29 +144,11 @@ class CustomMethodPickerDemoActivity : ComponentActivity() {
SpotlightMethodPicker(
providers = providers,
onProviderSelected = onProviderSelected,
enabled = termsAccepted
enabled = termsAccepted,
termsAccepted = termsAccepted,
onTermsAcceptedChange = { termsAccepted = it }
)
},
customMethodPickerTermsConfiguration = MethodPickerTermsConfiguration(
content = {
Row(
modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp),
verticalAlignment = Alignment.CenterVertically
) {
Checkbox(
checked = termsAccepted,
onCheckedChange = { termsAccepted = it }
)
Text(
text = "I have read and accept the Terms of Service and Privacy Policy",
style = MaterialTheme.typography.bodySmall,
modifier = Modifier.padding(start = 8.dp)
)
}
},
accepted = termsAccepted,
disableProvidersUntilAccepted = true,
),
)
}
}
Expand All @@ -179,6 +161,8 @@ fun SpotlightMethodPicker(
providers: List<AuthProvider>,
onProviderSelected: (AuthProvider) -> Unit,
enabled: Boolean = true,
termsAccepted: Boolean = true,
onTermsAcceptedChange: (Boolean) -> Unit = {},
) {
val stringProvider = LocalAuthUIStringProvider.current

Expand All @@ -196,7 +180,9 @@ fun SpotlightMethodPicker(
val anonymous = groups["anonymous"]?.firstOrNull()

LazyColumn(
modifier = Modifier.fillMaxSize(),
modifier = Modifier
.fillMaxSize()
.safeDrawingPadding(),
contentPadding = PaddingValues(vertical = 48.dp),
verticalArrangement = Arrangement.spacedBy(12.dp),
horizontalAlignment = Alignment.CenterHorizontally,
Expand Down Expand Up @@ -289,6 +275,24 @@ fun SpotlightMethodPicker(
}
}
}

item {
Spacer(modifier = Modifier.height(16.dp))
Row(
modifier = Modifier.padding(horizontal = 16.dp),
verticalAlignment = Alignment.CenterVertically
) {
Checkbox(
checked = termsAccepted,
onCheckedChange = onTermsAcceptedChange
)
Text(
text = "I have read and accept the Terms of Service and Privacy Policy",
style = MaterialTheme.typography.bodySmall,
modifier = Modifier.padding(start = 8.dp)
)
}
}
}
}

Expand Down Expand Up @@ -346,6 +350,7 @@ private fun styleForProvider(provider: AuthProvider): AuthUITheme.ProviderStyle
backgroundColor = provider.buttonColor ?: Color(0xFF666666),
contentColor = provider.contentColor ?: Color.White
)

else -> AuthUITheme.ProviderStyle(
icon = null,
backgroundColor = Color(0xFF666666),
Expand Down
40 changes: 27 additions & 13 deletions auth/src/main/java/com/firebase/ui/auth/ui/screens/FirebaseAuthScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
Expand Down Expand Up @@ -104,6 +105,14 @@ import kotlinx.coroutines.tasks.await
* @param authenticatedContent Optional slot that allows callers to render the authenticated
* state themselves. When provided, it receives the current [AuthState] alongside an
* [AuthSuccessUiContext] containing common callbacks (sign out, manage MFA, reload user).
* @param customMethodPickerLayout Optional slot that fully replaces the method-picker screen.
* When provided, it renders as the *entire* screen content — edge-to-edge, with no logo, no
* Terms of Service/Privacy Policy footer, and no automatic system-inset handling. The caller is
* responsible for its own insets (e.g. `Modifier.safeDrawingPadding()`) and for displaying any
* required legal disclosures. [customMethodPickerTermsConfiguration] is ignored when this is set.
* @param customMethodPickerTermsConfiguration Optional custom Terms of Service/Privacy Policy
* footer for the *default* method-picker layout. Ignored when [customMethodPickerLayout] is
* provided, since that slot takes over the whole screen.
*
* @since 10.0.0
*/
Expand Down Expand Up @@ -207,19 +216,24 @@ fun FirebaseAuthScreen(
}
) {
composable(AuthRoute.MethodPicker.route) {
Scaffold { innerPadding ->
AuthMethodPicker(
modifier = modifier
.padding(innerPadding),
providers = configuration.providers,
logo = logoAsset,
termsOfServiceUrl = configuration.tosUrl,
privacyPolicyUrl = configuration.privacyPolicyUrl,
lastSignInPreference = lastSignInPreference.value,
customLayout = customMethodPickerLayout,
termsConfiguration = customMethodPickerTermsConfiguration,
onProviderSelected = onProviderSelected,
)
if (customMethodPickerLayout != null) {
Box(modifier = modifier.fillMaxSize()) {
customMethodPickerLayout(configuration.providers, onProviderSelected)
}
} else {
Scaffold { innerPadding ->
AuthMethodPicker(
modifier = modifier
.padding(innerPadding),
providers = configuration.providers,
logo = logoAsset,
termsOfServiceUrl = configuration.tosUrl,
privacyPolicyUrl = configuration.privacyPolicyUrl,
lastSignInPreference = lastSignInPreference.value,
termsConfiguration = customMethodPickerTermsConfiguration,
onProviderSelected = onProviderSelected,
)
}
}
}

Expand Down
Loading