Implement Native Google OAuth iOS in sample

gradle/libs.versions.toml

@@ -20,7 +20,7 @@ detekt = "1.23.8"
 moshi = "1.15.2"
 jackson = "2.20.1"
 browser = "1.9.0"
-compose = "1.8.2"
+compose = "1.9.3"
 coil2 = "2.7.0"
 okio = "3.16.2"
 koin = "4.1.1"

sample/chat-demo-mpp/common/build.gradle.kts

@@ -14,7 +14,7 @@ plugins {
 
 group = "io.github.jan.supabase"
 version = "1.0-SNAPSHOT"
-val pluginVersion = "3.2.0"
+val pluginVersion = "3.3.0-beta-1"
 
 kotlin {
     @OptIn(ExperimentalKotlinGradlePluginApi::class)
@@ -91,4 +91,4 @@ kotlin {
     }
 }
 
-configureLibraryAndroidTarget("io.github.jan.supabase.common", 26, JavaVersion.VERSION_11)
+configureLibraryAndroidTarget("io.github.jan.supabase.common", 26, JavaVersion.VERSION_11)

sample/chat-demo-mpp/common/src/commonMain/kotlin/io/github/jan/supabase/common/ChatViewModel.kt

@@ -97,6 +97,10 @@ class ChatViewModel(
         }
     }
 
+    fun handleSignInWithGoogleResult() {
+        alert.value = "Successfully signed in with Google!"
+    }
+
     fun logout() {
         coroutineScope.launch {
             kotlin.runCatching {

sample/chat-demo-mpp/common/src/commonMain/kotlin/io/github/jan/supabase/common/di/supabaseModule.kt

@@ -3,6 +3,9 @@ package io.github.jan.supabase.common.di
 import io.github.jan.supabase.auth.Auth
 import io.github.jan.supabase.auth.AuthConfig
 import io.github.jan.supabase.auth.FlowType
+import io.github.jan.supabase.compose.auth.ComposeAuth
+import io.github.jan.supabase.compose.auth.appleNativeLogin
+import io.github.jan.supabase.compose.auth.googleNativeLogin
 import io.github.jan.supabase.createSupabaseClient
 import io.github.jan.supabase.logging.LogLevel
 import io.github.jan.supabase.postgrest.Postgrest
@@ -24,6 +27,9 @@ val supabaseModule = module {
                 flowType = FlowType.PKCE
             }
             install(Realtime)
+            install(ComposeAuth) {
+                googleNativeLogin(serverClientId = "YOUR_WEB_CLIENT_ID")
+            }
         }
     }
 }

sample/chat-demo-mpp/common/src/commonMain/kotlin/io/github/jan/supabase/common/ui/screen/LoginScreen.kt

@@ -39,7 +39,11 @@ import io.github.jan.supabase.common.ui.components.PasswordField
 import io.github.jan.supabase.common.ui.components.PasswordRecoveryDialog
 import io.github.jan.supabase.compose.auth.ui.ProviderButtonContent
 import io.github.jan.supabase.compose.auth.ui.annotations.AuthUiExperimental
-
+import io.github.jan.supabase.compose.auth.composeAuth
+import io.github.jan.supabase.compose.auth.ui.ProviderIcon
+import io.github.jan.supabase.compose.auth.composable.NativeSignInResult
+import io.github.jan.supabase.compose.auth.composable.rememberSignInWithGoogle
+import co.touchlab.kermit.Logger
 @OptIn(ExperimentalMaterial3Api::class, SupabaseExperimental::class, AuthUiExperimental::class)
 @Composable
 fun LoginScreen(viewModel: ChatViewModel) {
@@ -48,7 +52,28 @@ fun LoginScreen(viewModel: ChatViewModel) {
     var email by remember { mutableStateOf("") }
     var otpDialogState by remember { mutableStateOf<OTPDialogState>(OTPDialogState.Invisible) }
     var showPasswordRecoveryDialog by remember { mutableStateOf(false) }
+    val action = viewModel.supabaseClient.composeAuth.rememberSignInWithGoogle(
+        onResult = { result ->
+            when (result) {
+                is NativeSignInResult.Success -> {
+                    viewModel.handleSignInWithGoogleResult()
+                    Logger.d("LoginScreen - Success")
+                }
+
+                is NativeSignInResult.ClosedByUser -> {
+                    Logger.d("LoginScreen - ClosedByUser")
+                }
 
+                is NativeSignInResult.Error -> {
+                    Logger.d("LoginScreen - Error")
+                }
+
+                is NativeSignInResult.NetworkError -> {
+                    Logger.d("LoginScreen - Network Error")
+                }
+            }
+        },
+    )
     Column(
         modifier = Modifier.fillMaxSize(),
         verticalArrangement = Arrangement.Center,
@@ -94,7 +119,14 @@ fun LoginScreen(viewModel: ChatViewModel) {
         ) {
             ProviderButtonContent(Google, text = if (signUp) "Sign Up with Google" else "Login with Google")
         }
-
+        Button(
+            onClick = {
+                action.startFlow()
+            },
+        ) {
+            ProviderIcon(Google, contentDescription = null)
+            Text("Native Sign In with Google")
+        }
         TextButton(
             onClick = { otpDialogState = OTPDialogState.Visible(email) }
         ) {

sample/chat-demo-mpp/ios/chatdemoios.xcodeproj/xcuserdata/hieuvu.xcuserdatad/xcschemes/xcschememanagement.plist

@@ -7,7 +7,7 @@
 		<key>chatdemoios.xcscheme_^#shared#^_</key>
 		<dict>
 			<key>orderHint</key>
-			<integer>2</integer>
+			<integer>0</integer>
 		</dict>
 	</dict>
 	<key>SuppressBuildableAutocreation</key>

sample/chat-demo-mpp/ios/chatdemoios/Info.plist

@@ -2,7 +2,22 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
 <dict>
+	<key>CFBundleIdentifier</key>
+	<string>io.github.jan.supabase.ios</string>
+	<key>GIDClientID</key>
+	<string>YOUR_IOS_CLIENT_ID</string>
 	<key>CADisableMinimumFrameDurationOnPhone</key>
 	<true/>
+	<key>CFBundleURLTypes</key>
+	<array>
+		<dict>
+			<key>CFBundleTypeRole</key>
+			<string>Editor</string>
+			<key>CFBundleURLSchemes</key>
+			<array>
+				<string>YOUR_REVERSED_IOS_CLIENT_ID</string>
+			</array>
+		</dict>
+	</array>
 </dict>
 </plist>

sample/chat-demo-mpp/web/src/jsMain/kotlin/Main.kt

@@ -1,6 +1,6 @@
 // Copyright 2000-2021 JetBrains s.r.o. and contributors. Use of this source code is governed by the Apache 2.0 license that can be found in the LICENSE file.
 import androidx.compose.ui.ExperimentalComposeUiApi
-import androidx.compose.ui.window.CanvasBasedWindow
+import androidx.compose.ui.window.ComposeViewport
 import io.github.jan.supabase.common.App
 import io.github.jan.supabase.common.ChatViewModel
 import io.github.jan.supabase.common.di.initKoin
@@ -19,7 +19,7 @@ fun main() {
     initKoin()
     val root = RootComponent()
     onWasmReady {
-        CanvasBasedWindow(title = "Demo Chat App") {
+        ComposeViewport("ComposeTarget") {
             App(root.viewModel)
         }
     }

sample/chat-demo-mpp/web/src/jsMain/resources/index.html

@@ -2,14 +2,12 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Chat App</title>
+    <title>Chat Demo</title>
     <script src="skiko.js"> </script>
     <link type="text/css" rel="stylesheet" href="styles.css" />
 </head>
-<body>
-<div>
-    <canvas id="ComposeTarget" height="800" width="600"></canvas>
-</div>
-<script src="web.js"> </script>
+<body style="text-align: center; align-content: center">
+    <div id="ComposeTarget">
+    <script src="web.js"> </script>
 </body>
 </html>

sample/chat-demo-mpp/web/src/jsMain/resources/styles.css

@@ -1,15 +1,9 @@
-#root {
+html,
+#ComposeTarget,
+body {
     width: 100%;
-    height: 100vh;
-}
-
-#root > .compose-web-column > div {
-    position: relative;
-}
-
-canvas {
+    height: 100%;
+    margin: 0;
     padding: 0;
-    margin: auto;
-    display: block;
-    width: 800px;
+    overflow: hidden;
 }

sample/multi-factor-auth/web/src/jsMain/kotlin/Main.kt

@@ -1,5 +1,5 @@
 import androidx.compose.ui.ExperimentalComposeUiApi
-import androidx.compose.ui.window.CanvasBasedWindow
+import androidx.compose.ui.window.ComposeViewport
 import io.github.jan.supabase.common.App
 import io.github.jan.supabase.common.AppViewModel
 import io.github.jan.supabase.common.di.initKoin
@@ -18,7 +18,7 @@ fun main() {
     initKoin()
     val root = RootComponent()
     onWasmReady {
-        CanvasBasedWindow(title = "MFA App") {
+        ComposeViewport("ComposeTarget") {
             App(root.viewModel)
         }
     }

sample/multi-factor-auth/web/src/jsMain/resources/index.html

@@ -2,14 +2,12 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Chat App</title>
+    <title>MFA App</title>
     <script src="skiko.js"> </script>
     <link type="text/css" rel="stylesheet" href="styles.css" />
 </head>
-<body>
-<div>
-    <canvas id="ComposeTarget" height="800" width="600"></canvas>
-</div>
-<script src="web.js"> </script>
+<body style="text-align: center; align-content: center">
+<div id="ComposeTarget">
+    <script src="web.js"> </script>
 </body>
 </html>

sample/multi-factor-auth/web/src/jsMain/resources/styles.css

@@ -1,15 +1,9 @@
-#root {
+html,
+#ComposeTarget,
+body {
     width: 100%;
-    height: 100vh;
-}
-
-#root > .compose-web-column > div {
-    position: relative;
-}
-
-canvas {
+    height: 100%;
+    margin: 0;
     padding: 0;
-    margin: auto;
-    display: block;
-    width: 800px;
+    overflow: hidden;
 }