Add Auth UI composables

detekt.yml

@@ -342,6 +342,8 @@ naming:
     excludes: ['**/test/**', '**/androidTest/**', '**/commonTest/**', '**/jvmTest/**', '**/androidUnitTest/**', '**/androidInstrumentedTest/**', '**/jsTest/**', '**/iosTest/**', '**/mingwX64Test/**', '**/macosTest/**', '**/appleTest/**', '**/linuxTest/**']
     functionPattern: '[a-z][a-zA-Z0-9]*'
     excludeClassPattern: '$^'
+    ignoreAnnotated:
+      - Composable
   FunctionParameterNaming:
     active: true
     parameterPattern: '[a-z][A-Za-z0-9]*'

gradle/libs.versions.toml

@@ -21,8 +21,9 @@ detekt = "1.23.1"
 moshi = "1.15.0"
 jackson = "2.15.2"
 browser = "1.6.0"
-compose = "1.4.3"
+compose = "1.5.0-rc04"
 googleid = "1.0.1"
+androidsvg = "1.4"
 
 [plugins]
 kotlin-multiplatform = { id = "org.jetbrains.kotlin.multiplatform", version.ref = "kotlin" }
@@ -71,13 +72,16 @@ javalin = { module = "io.javalin:javalin", version.ref = "javalin" }
 apollo-kotlin = { module = "com.apollographql.apollo3:apollo-runtime", version.ref = "apollo-kotlin" }
 
 krypto = { module = "com.soywiz.korlibs.krypto:krypto", version.ref = "korlibs" }
+korio = { module = "com.soywiz.korlibs.korio:korio", version.ref = "korlibs" }
 
 moshi = { module = "com.squareup.moshi:moshi", version.ref = "moshi" }
 moshi-kotlin = { module = "com.squareup.moshi:moshi-kotlin", version.ref = "moshi" }
 
 jackson = { module = "com.fasterxml.jackson.core:jackson-core", version.ref = "jackson" }
 jackson-kotlin = { module = "com.fasterxml.jackson.module:jackson-module-kotlin", version.ref = "jackson" }
 
+androidsvg = { module = "com.caverock:androidsvg-aar", version.ref = "androidsvg" }
+
 [bundles]
 ktor-client = ["ktor-client-core", "ktor-client-content-negotiation", "ktor-json"]
 multiplatform-settings = ["multiplatform-settings-no-arg", "multiplatform-settings-coroutines"]

plugins/ComposeAuth/build.gradle.kts

@@ -87,4 +87,9 @@ android {
         sourceCompatibility = JavaVersion.VERSION_1_8
         targetCompatibility = JavaVersion.VERSION_1_8
     }
-}
+}
+
+compose {
+    kotlinCompilerPlugin.set(dependencies.compiler.forKotlin("1.9.0"))
+    kotlinCompilerPluginArgs.add("suppressKotlinVersionCompatibilityCheck=1.9.10")
+}

plugins/ComposeAuthUI/README.md

@@ -0,0 +1,191 @@
+# Supabase-kt Compose Auth UI
+
+Extends Supabase-kt with UI composables
+
+Newest version: [![Maven Central](https://img.shields.io/maven-central/v/io.github.jan-tennert.supabase/supabase-kt)](https://search.maven.org/search?q=g%3Aio.github.jan-tennert.supabase)
+
+# Installation
+
+```kotlin
+dependencies {
+    implementation("io.github.jan-tennert.supabase:compose-auth-ui:VERSION")
+}
+```
+
+# Full Example
+
+<details>
+
+<summary>Full Compose for Desktop Example</summary>
+
+```kotlin
+singleWindowApplication {
+    MaterialTheme(
+        darkColorScheme()
+    ) {
+        Box(Modifier.fillMaxSize().background(MaterialTheme.colorScheme.background), contentAlignment = Alignment.Center) {
+            AuthForm {
+                var password by remember { mutableStateOf("") }
+                var email by remember { mutableStateOf("") }
+                var phone by remember { mutableStateOf("") }
+                val state = LocalAuthState.current
+                Column(
+                    horizontalAlignment = Alignment.CenterHorizontally,
+                ) {
+                    OutlinedEmailField(
+                        value = email,
+                        onValueChange = { email = it },
+                        label = { Text("E-Mail") },
+                        mandatory = email.isNotBlank() //once an email is entered, it is mandatory. (which enable validation)
+                    )
+                    OutlinedPhoneField(
+                        value = phone,
+                        onValueChange = { phone = it },
+                        label = { Text("Phone Number") }
+                    )
+                    OutlinedPasswordField(
+                        value = password,
+                        onValueChange = { password = it },
+                        label = { Text("Password") },
+                        rules = rememberPasswordRuleList(PasswordRule.minLength(6), PasswordRule.containsSpecialCharacter(), PasswordRule.containsDigit(), PasswordRule.containsLowercase(), PasswordRule.containsUppercase())
+                    )
+                    FormComponent("accept_terms") { valid ->
+                        Row(
+                            verticalAlignment = Alignment.CenterVertically,
+                        ) {
+                            Checkbox(
+                                checked = valid.value,
+                                onCheckedChange = { valid.value = it },
+                            )
+                            Text("Accept Terms", color = MaterialTheme.colorScheme.onBackground)
+                        }
+                    }
+                    Button(
+                        onClick = {}, //Login with email and password,
+                        enabled = state.validForm,
+                    ) {
+                        Text("Login")
+                    }
+                    OutlinedButton(
+                        onClick = {}, //Login with Google,
+                        content = { ProviderButtonContent(Google) }
+                    )
+                    Button(
+                        onClick = {}, //Login with Twitch,
+                        content = { ProviderButtonContent(Twitch) }
+                    )
+                }
+            }
+        }
+    }
+}
+```
+
+https://github.com/supabase-community/supabase-kt/assets/26686035/91e5d533-3b01-4093-9585-a35e59b66927
+
+</details>
+
+# Usage
+
+### PasswordField
+You can set `rules` for the password like this:
+```kotlin
+OutlinedPasswordField(
+    value = password,
+    onValueChange = { password = it },
+    label = { Text("Password") },
+    rules = rememberPasswordRuleList(PasswordRule.minLength(6), PasswordRule.containsSpecialCharacter(), PasswordRule.containsDigit(), PasswordRule.containsLowercase(), PasswordRule.containsUppercase())
+)
+```
+Once set, the field will automatically display an error supporting text if the password doesn't match the criteria.
+Note that the built-in roles also accept a custom description as a parameter.
+You can also easily create your own rules:
+```kotlin
+val myRule = PasswordRule("description") { password ->
+    password.contains("-")
+}
+```
+
+### EmailField
+The email field has a validator parameter which defaults to a regex solution.
+Example:
+```kotlin
+OutlinedEmailField(
+    value = email,
+    onValueChange = { email = it },
+    label = { Text("E-Mail") },
+    validator = EmailValidator { 
+        //validate email
+    }
+)
+```
+
+### Phone Field
+The phone field also has a validator parameter, which just checks whether the phone number only consists of digits.
+On top of that you can provide a `mask` parameter, which changes how the phone number gets displayed. The value is just the raw number.
+Example with the default mask:
+```kotlin
+OutlinedPhoneField(
+    value = phone,
+    onValueChange = { phone = it },
+    label = { Text("Phone") }
+)
+```
+
+![image](https://github.com/supabase-community/supabase-kt/assets/26686035/5405772b-f6f8-45e7-a28d-a55003f48e75)
+
+Example with custom mask: (you can also set it to null, if you don't want a mask)
+```kotlin
+OutlinedPhoneField(
+    value = phone,
+    onValueChange = { phone = it },
+    label = { Text("Phone") },
+    mask = "(###) ###-####"
+)
+```
+
+![image](https://github.com/supabase-community/supabase-kt/assets/26686035/13251358-9147-4f49-8116-9776ec3266b8)
+
+**Note: You can customize the fields completely, they just all have default values. They also have a `mandatory´ option, you can use that to have optional fields. It is also possible to make fields only mandatory (=validation enabled) once the field is not empty. (See example)**
+
+### Provider Button
+This module provides a function to generate the button content independently of the variation:
+```kotlin
+OutlinedButton(
+    onClick = {}, //Login with Google,
+    content = { ProviderButtonContent(Google) }
+)
+Button(
+    onClick = {}, //Login with Twitch,
+    content = { ProviderButtonContent(Twitch) }
+)
+```
+
+![image](https://github.com/supabase-community/supabase-kt/assets/26686035/fb5263e7-272c-4a79-a3c4-1f6755922752)
+
+You can also only use the icon if you want a custom layout:
+```kotlin
+Button(
+    onClick = {},
+) {
+    ProviderIcon(Google)
+    Text("Login with Google")
+}
+```
+
+### Custom Form Components
+You can also easily make your own form components:
+```kotlin
+FormComponent(formKey = "accept_terms", mandatory = true) { valid ->
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Checkbox(
+            checked = valid.value,
+            onCheckedChange = { valid.value = it },
+        )
+        Text("Accept Terms", color = MaterialTheme.colorScheme.onBackground)
+    }
+}
+```
+Mandatory changes whether the `AuthState#validForm` property is affected by this component.

plugins/ComposeAuthUI/build.gradle.kts

@@ -0,0 +1,89 @@
+plugins {
+    alias(libs.plugins.kotlin.multiplatform)
+    alias(libs.plugins.android.library)
+    alias(libs.plugins.compose)
+}
+
+description = "Extends supabase-kt with a Apollo GraphQL Client"
+
+repositories {
+    mavenCentral()
+}
+
+@OptIn(org.jetbrains.kotlin.gradle.ExperimentalKotlinGradlePluginApi::class)
+kotlin {
+    targetHierarchy.default()
+    jvmToolchain(8)
+    jvm {
+        compilations.all {
+            kotlinOptions.freeCompilerArgs = listOf(
+                "-Xjvm-default=all",  // use default methods in interfaces,
+                "-Xlambdas=indy"      // use invokedynamic lambdas instead of synthetic classes
+            )
+        }
+    }
+    androidTarget {
+        publishLibraryVariants("release", "debug")
+    }
+    js(IR) {
+        browser {
+            testTask {
+                enabled = false
+            }
+        }
+        nodejs {
+            testTask {
+                enabled = false
+            }
+        }
+    }
+    ios()
+    iosSimulatorArm64()
+    sourceSets {
+        all {
+            languageSettings.optIn("kotlin.RequiresOptIn")
+            languageSettings.optIn("io.github.jan.supabase.annotations.SupabaseInternal")
+            languageSettings.optIn("io.github.jan.supabase.annotations.SupabaseExperimental")
+        }
+        val commonMain by getting {
+            dependencies {
+                api(compose.ui)
+                implementation(project(":gotrue-kt"))
+                implementation(libs.korio)
+                implementation(compose.material3)
+            }
+        }
+        val nonJvmMain by creating {
+            dependsOn(commonMain)
+        }
+        val androidMain by getting {
+            dependencies {
+                implementation(libs.androidsvg)
+            }
+        }
+        val iosMain by getting {
+            dependsOn(nonJvmMain)
+        }
+        val jsMain by getting {
+            dependsOn(nonJvmMain)
+        }
+    }
+}
+
+android {
+    compileSdk = 34
+    sourceSets["main"].manifest.srcFile("src/androidMain/AndroidManifest.xml")
+    namespace = "io.github.jan.supabase.compose.auth.ui.library"
+    defaultConfig {
+        minSdk = 21
+    }
+    compileOptions {
+        sourceCompatibility = JavaVersion.VERSION_1_8
+        targetCompatibility = JavaVersion.VERSION_1_8
+    }
+}
+
+compose {
+    kotlinCompilerPlugin.set(dependencies.compiler.forKotlin("1.9.0"))
+    kotlinCompilerPluginArgs.add("suppressKotlinVersionCompatibilityCheck=1.9.10")
+}

plugins/ComposeAuthUI/src/androidMain/AndroidManifest.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest/>