sample(auth): full customization demo

app/build.gradle.kts

@@ -68,6 +68,7 @@ dependencies {
     implementation(libs.compose.ui.graphics)
     implementation(libs.compose.ui.tooling.preview)
     implementation(libs.compose.material3)
+    implementation(libs.compose.material.icons.extended)
 
     // Facebook
     implementation(libs.facebook.login)

app/src/main/AndroidManifest.xml

@@ -88,6 +88,12 @@
             android:exported="false"
             android:theme="@style/Theme.FirebaseUIAndroid" />
 
+        <activity
+            android:name="com.firebaseui.android.demo.auth.fullcustomization.FullCustomizationDemoActivity"
+            android:label="Full Customization"
+            android:exported="false"
+            android:theme="@style/Theme.FirebaseUIAndroid" />
+
         <!-- Database -->
         <activity
             android:name="com.firebaseui.android.demo.database.DatabaseDemoActivity"

app/src/main/java/com/firebaseui/android/demo/MainActivity.kt

@@ -36,7 +36,7 @@ import com.google.firebase.firestore.FirebaseFirestore
 
 class MainActivity : ComponentActivity() {
     companion object {
-        internal const val USE_AUTH_EMULATOR = true
+        internal const val USE_AUTH_EMULATOR = false
         private const val AUTH_EMULATOR_HOST = "10.0.2.2"
         private const val AUTH_EMULATOR_PORT = 9099
 

app/src/main/java/com/firebaseui/android/demo/auth/CustomMethodPickerDemoActivity.kt

@@ -142,6 +142,11 @@ class CustomMethodPickerDemoActivity : ComponentActivity() {
                             Log.d("CustomMethodPickerDemo", "Auth cancelled")
                         },
                         customMethodPickerLayout = { providers, onProviderSelected ->
+                            // customMethodPickerLayout now renders as the entire screen (no
+                            // built-in logo/ToS footer/inset handling), so the terms checkbox
+                            // that used to live in customMethodPickerTermsConfiguration is
+                            // rendered inline here instead, and this composable owns its own
+                            // insets via Modifier.safeDrawingPadding() in SpotlightMethodPicker.
                             SpotlightMethodPicker(
                                 providers = providers,
                                 onProviderSelected = onProviderSelected,
@@ -181,6 +186,8 @@ fun SpotlightMethodPicker(
     val anonymous = groups["anonymous"]?.firstOrNull()
 
     LazyColumn(
+        // customMethodPickerLayout now renders as the entire screen, so this composable is
+        // responsible for its own insets.
         modifier = Modifier
             .fillMaxSize()
             .safeDrawingPadding(),
@@ -298,7 +305,7 @@ fun SpotlightMethodPicker(
 }
 
 @Composable
-private fun ProviderIconButton(
+fun ProviderIconButton(
     style: AuthUITheme.ProviderStyle,
     contentDescription: String,
     onClick: () -> Unit,
@@ -335,12 +342,12 @@ private fun ProviderIconButton(
 }
 
 @Composable
-private fun AuthUIAsset.asPainter(): Painter = when (this) {
+fun AuthUIAsset.asPainter(): Painter = when (this) {
     is AuthUIAsset.Resource -> painterResource(resId)
     is AuthUIAsset.Vector -> rememberVectorPainter(image)
 }
 
-private fun styleForProvider(provider: AuthProvider): AuthUITheme.ProviderStyle = when (provider) {
+fun styleForProvider(provider: AuthProvider): AuthUITheme.ProviderStyle = when (provider) {
     is AuthProvider.Facebook -> ProviderStyleDefaults.Facebook
     is AuthProvider.Twitter -> ProviderStyleDefaults.Twitter
     is AuthProvider.Github -> ProviderStyleDefaults.Github

app/src/main/java/com/firebaseui/android/demo/auth/CustomSlotsThemingDemoActivity.kt

@@ -22,6 +22,7 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
+import com.firebaseui.android.demo.auth.fullcustomization.FullCustomizationDemoActivity
 
 class CustomSlotsThemingDemoActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
@@ -46,6 +47,9 @@ class CustomSlotsThemingDemoActivity : ComponentActivity() {
                         },
                         onCustomMethodPickerClick = {
                             startActivity(Intent(this, CustomMethodPickerDemoActivity::class.java))
+                        },
+                        onFullCustomizationClick = {
+                            startActivity(Intent(this, FullCustomizationDemoActivity::class.java))
                         }
                     )
                 }
@@ -60,6 +64,7 @@ fun CustomSlotsDemoChooser(
     onPhoneAuthSlotClick: () -> Unit,
     onShapeCustomizationClick: () -> Unit,
     onCustomMethodPickerClick: () -> Unit,
+    onFullCustomizationClick: () -> Unit,
 ) {
     Column(
         modifier = Modifier
@@ -106,6 +111,12 @@ fun CustomSlotsDemoChooser(
             description = "Replace the default provider list with a custom layout, and swap the 'By continuing...' footer with a checkbox using customMethodPickerLayout and customMethodPickerTermsConfiguration on FirebaseAuthScreen.",
             onClick = onCustomMethodPickerClick
         )
+
+        DemoCard(
+            title = "Full Customization",
+            description = "customMethodPickerLayout renders as the entire screen, so this layers a full-bleed background image and scrim behind the custom method picker.",
+            onClick = onFullCustomizationClick
+        )
     }
 }
 

app/src/main/java/com/firebaseui/android/demo/auth/HighLevelApiDemoActivity.kt

@@ -11,8 +11,11 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.Button
 import androidx.compose.material3.CircularProgressIndicator
@@ -32,7 +35,6 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 import androidx.lifecycle.compose.LocalLifecycleOwner
 import androidx.lifecycle.lifecycleScope
@@ -58,6 +60,7 @@ import com.firebase.ui.auth.configuration.theme.AuthUIAsset
 import com.firebase.ui.auth.configuration.theme.AuthUITheme
 import com.firebase.ui.auth.ui.screens.AuthSuccessUiContext
 import com.firebase.ui.auth.ui.screens.FirebaseAuthScreen
+import com.firebase.ui.auth.ui.screens.ReauthContentState
 import com.firebase.ui.auth.util.EmailLinkConstants
 import com.firebase.ui.auth.util.displayIdentifier
 import com.firebase.ui.auth.util.getDisplayEmail
@@ -229,13 +232,7 @@ class HighLevelApiDemoActivity : ComponentActivity() {
                         onSignInCancelled = {
                             Log.d("HighLevelApiDemoActivity", "Authentication cancelled")
                         },
-                        reauthContent = { state, onDismiss ->
-                            ReauthDialog(
-                                authUI = authUI,
-                                state = state,
-                                onDismiss = onDismiss,
-                            )
-                        },
+                        reauthContent = { state -> ReauthDialog(state = state) },
                         authenticatedContent = { state, uiContext ->
                             AppAuthenticatedContent(state, uiContext)
                         }
@@ -414,20 +411,15 @@ private fun AppAuthenticatedContent(
     }
 }
 
+/**
+ * Custom reauth UI. The slot only chooses a provider — the library owns every credential path, and
+ * for email/phone it presents its own sub-flow, which replaces this dialog while it is up. Keep the
+ * slot stateless for that reason.
+ */
 @Composable
-private fun ReauthDialog(
-    authUI: FirebaseAuthUI,
-    state: AuthState.ReauthenticationRequired,
-    onDismiss: () -> Unit,
-) {
-    var password by remember { mutableStateOf("") }
-    var isVerifying by remember { mutableStateOf(false) }
-    var errorMessage by remember { mutableStateOf<String?>(null) }
-    val coroutineScope = rememberCoroutineScope()
-    val email = state.user.email.orEmpty()
-
+private fun ReauthDialog(state: ReauthContentState) {
     AlertDialog(
-        onDismissRequest = onDismiss,
+        onDismissRequest = state.onDismiss,
         containerColor = MaterialTheme.colorScheme.surfaceVariant,
         title = {
             Column(verticalArrangement = Arrangement.spacedBy(4.dp)) {
@@ -442,60 +434,43 @@ private fun ReauthDialog(
             }
         },
         text = {
-            Column(verticalArrangement = Arrangement.spacedBy(12.dp)) {
+            Column(
+                modifier = Modifier.verticalScroll(rememberScrollState()),
+                verticalArrangement = Arrangement.spacedBy(8.dp),
+            ) {
                 Text(
-                    "Signing in as $email",
+                    "Signed in as ${state.user.displayIdentifier()}",
                     style = MaterialTheme.typography.labelMedium,
                     color = MaterialTheme.colorScheme.primary,
                 )
-                com.firebase.ui.auth.ui.components.AuthTextField(
-                    value = password,
-                    onValueChange = {
-                        password = it
-                        errorMessage = null
-                    },
-                    label = { Text("Password") },
-                    isSecureTextField = true,
-                    isError = errorMessage != null,
-                    errorMessage = errorMessage,
-                )
-            }
-        },
-        dismissButton = {
-            TextButton(onClick = onDismiss) { Text("Cancel") }
-        },
-        confirmButton = {
-            Button(
-                onClick = {
-                    coroutineScope.launch {
-                        isVerifying = true
-                        errorMessage = null
-                        try {
-                            val result = authUI.auth
-                                .signInWithEmailAndPassword(email, password)
-                                .await()
-                            result.user?.let { user ->
-                                authUI.updateAuthState(AuthState.Success(result, user))
-                            }
-                        } catch (e: Exception) {
-                            errorMessage = "Incorrect password. Please try again."
-                        } finally {
-                            isVerifying = false
-                        }
-                    }
-                },
-                enabled = password.isNotBlank() && !isVerifying,
-            ) {
-                if (isVerifying) {
+                state.error?.let { error ->
+                    Text(
+                        error,
+                        style = MaterialTheme.typography.bodySmall,
+                        color = MaterialTheme.colorScheme.error,
+                    )
+                }
+                if (state.isLoading) {
                     CircularProgressIndicator(
                         modifier = Modifier.size(16.dp),
                         strokeWidth = 2.dp,
                     )
-                } else {
-                    Text("Verify")
+                }
+                state.providers.forEach { provider ->
+                    Button(
+                        onClick = { state.onProviderSelected(provider) },
+                        enabled = !state.isLoading,
+                        modifier = Modifier.fillMaxWidth(),
+                    ) {
+                        Text("Continue with ${provider.providerName}")
+                    }
                 }
             }
         },
+        confirmButton = {},
+        dismissButton = {
+            TextButton(onClick = state.onDismiss) { Text("Cancel") }
+        },
     )
 }