Let’s say you already have a backend written in Kotlin using Ktor. You tested everything locally, it works great, and now you want to deploy it so you can use it externally in your mobile apps or web.

That was exactly my situation too.

I downloaded a server template from KMP’s website (https://kmp.jetbrains.com), tested it locally, and everything was fine. But here’s the thing: I’m mainly a mobile developer, and I didn’t want to spend hours playing with VPS configs, Linux permissions, firewalls, Docker commands, Nginx configs, etc. I needed something super simple.

So I used Dokploy with a VPS server. Dokploy is an open-source deployment platform that gives you a clean UI for deploying your apps.
You literally click around in the browser to deploy your backend, add databases, check logs, manage environment variables, auto-deploy on push and more.

🖥 Step 1 — Choose a VPS Server (I Used Hetzner)

To host your backend, you need a VPS. I use Hetzner because it’s cheap and very reliable.

1. Go to hetzner.com, Create a new project. Then Create Resource → Create Server. For Dokploy UI, choose at least 2GB RAM. I usually pick 4GB or 8GB RAM (cost-optimized → x86 Intel/AMD). Choose Ubuntu 24.04 (or latest) as the image.
2. Now you need to add an SSH key so you can connect securely to your VPS server.

Generate SSH key

(these commands are tested in macOS)

ssh-keygen -t ed25519 -C "your_email@example.com"

You can leave the password empty if you want. I named my file name as: id_ed25519_hetzner. Now copy the public key:

cat ~/.ssh/id_ed25519_hetzner.pub | pbcopy

Paste the key into the SSH section when creating the VPS. Now your VPS is ready.

🔌 Step 2 — Connect to Your VPS

In your Hetzner dashboard, you’ll see the server’s IP.
Connect from you device using:

ssh root@IP_ADDRESS -i ~/.ssh/id_ed25519_hetzner

Replace IP_ADDRESS with your VPS IP.

⚙️ Step 3 — Install Dokploy (and Docker)

Once connected:

curl -sSL https://dokploy.com/install.sh | sh

This installs:

• Dokploy UI
• Docker
• Everything needed to deploy your Ktor app

After installation, in your browser go to http://YOUR_VPS_IP:3000

You’ll see the Dokploy dashboard 🎉

📦 Step 4 — Prepare Your Ktor Backend for Deployment

Before deploying, we need to Dockerize the project. In your build.gradle.kts, set:

kotlin {
    jvmToolchain(17)
}

Add a Dockerfile

Create a Dockerfile in the root of your project.

Paste this:

# Stage 1: Cache Gradle dependencies
FROM gradle:latest AS cache
RUN mkdir -p /home/gradle/cache_home
ENV GRADLE_USER_HOME=/home/gradle/cache_home
COPY . /home/gradle/app/
WORKDIR /home/gradle/app
RUN gradle dependencies --no-daemon

# Stage 2: Build Application
FROM gradle:latest AS build
COPY --from=cache /home/gradle/cache_home /home/gradle/.gradle
COPY --chown=gradle:gradle . /home/gradle/src
WORKDIR /home/gradle/src
RUN gradle buildFatJar --no-daemon

# Stage 3: Create the Runtime Image
FROM amazoncorretto:22 AS runtime
EXPOSE 8080
RUN mkdir /app
COPY --from=build /home/gradle/src/server/build/libs/*.jar /app/kotlin-backend.jar
ENTRYPOINT ["java","-jar","/app/kotlin-backend.jar"]

What this Dockerfile does

• First stage caches Gradle dependencies
• Second stage builds your fat JAR
• Third stage runs your Ktor backend on Java 22
• It exposes port 8080 for your API

🧩 (Optional but recommended) Create a Compose YAML

I always add a docker-compose.yml, even if it’s simple now, later you can add PostgreSQL, Redis, etc.

docker-compose.yml:

version: "3.9"

services:
  kotlin-backend:
    build: ./
    container_name: kotlin-backend
    restart: unless-stopped
    ports:
      - "8080:8080"
    expose:
      - "8080"

🚀 Step 5 — Deploy with Dokploy

1. Go to Dokploy dashboard
2. Create Project -> Create Service -> Choose Application

3. In Deploy Settings-> Provider section connect your GitHub repository (optional but recommended). Every push to main can auto-deploy.

1. In Deploy Section-> Build Type, choose Dockerfile
2. Dockerfile path: ./Dockerfile
3. Click deploy, or push some changes to main branch.
4. Now when you visit http://YOUR_SERVER_IP:8080 you should see your API response. Congrats, now your Ktor backend is live.

In Dokploy, later you can easily from UI: Add your domain, Automatic HTTPS via Let’s Encrypt, Monitor logs, Restart services, Check metrics.

Before talking about Junie, let me give a bit of context. I wanted to build a new Kotlin/Compose Multiplatform app to participate in the RevenueCat 2025 Shipaton Hackathon and compete in the Kotlin Multiplatform category. But each day, even though I had a rough idea, I still didn’t know how the app should look in terms of UI and UX. I just kept procrastinating. I think this is one of those things people don’t talk about when they say “AI doesn’t save time.” Yes, I still review the AI-generated code, and yes, it takes time to understand the logic, and yes I sometimes rewrite what AI suggested. But for me, the real time saving comes from overcoming that procrastination. As an indie developer, this makes a huge difference. Instead of overthinking everything and trying to make it perfect before I even start, I just tell the AI to “make it perfect 😄” and then I review it after. That’s where the time saving comes in. I don’t think this part gets mentioned enough when people talk about AI productivity.

Then I got an email saying I was selected as one of 20 developers to use Junie during the hackathon for free and at full power. I was like “yes, this is amazing.”

First Impressions of Junie

When I first started using it, I noticed something interesting. It almost never produced compilation errors. About 90 percent of the time, the code it modified just worked. Of course, the functionality depends on how well you describe the task, but still, that was impressive. The downside was that it took a lot of time to complete a task. I had been using GitHub Copilot before, and that was at least twice as fast. Waiting for Junie to finish wasn’t fun.

Another thing I noticed was that when I asked it to build some UI, the result was very basic. Not ugly, but not great either. At that point I was giving very simple prompts something like “implement a home screen where users can generate some AI influencers.”

When I saw that, my initial reaction was why not build two mobile apps in parallel. While I was reviewing AI-written code for the first one, Junie could work on the second one. And that’s exactly what I did.

Here’s the livestream if you want to watch it: https://www.youtube.com/watch?v=O-_lR3pDHrM

What Helped Me Speed Things Up and Improve Quality

1. Change the default model to Claude Sonnet

By default, Junie uses GPT-5 model. In my experience, Claude Sonnet works better for code and for creative UI. This might change in the future, but for now Sonnet felt more solid to me. By changing the model, both code quality and UI/UX improved drastically.

You can change it in Settings → Junie → Models.

2. Use Junie guidelines properly

In your project directory, create a .junie/guidelines.md file and write your project guidelines there. Things like what tech stack you’re using, what architecture you prefer, and any rules you want Junie to follow. I also create a prd.md file (Product Requirements Document) where I explain what the project is about, the tech stack, the user flow, monetization, and so on.

Whenever Junie makes a mistake, I ask it to fix the issue and then I also ask it to update my guidelines based on that fix. This is one of the best tips I can give. Over time the guide gets smarter, and Junie starts delivering better code right away.

For example, in the beginning Junie kept creating empty use cases and extra layers for no reason. It was clearly following some “Clean Architecture” patterns from GitHub. For an MVP this is just overengineering and a waste of time. So I explicitly added to the guidelines: “Don’t overengineer. Don’t create empty use cases unless really needed.”

In the picture above, you can see the guidelines and prompts I use for my projects. In the prompts directory, there are a bunch of ready-to-use prompts for generating things like product design requirement documents, detailed UI/UX flows, monetization plans, onboarding flows, and more. I just go to ChatGPT, paste one of these prompts, give my rough app idea, and it generates each document in Markdown format one by one. Then I copy and paste those new guidelines into my guides/project directory (for example prd.md, onboarding.md, paywall.md, etc.)

I added a link in the end of the blog where you can copy and paste the exact guidelines and prompts I use for my own projects.

3. Have a separate design system module and use Compose Hot Reload

This one made a big difference for me for 2 main reasons. When you have a separate design system module, Junie can reuse existing UI components instead of creating new ones every time. It also makes your UI more consistent and gives you the ability to change the look of the whole app more easily. If the changes are only UI related, I just tell Junie not to compile the entire project, and compile only the JVM source set, which is way faster than compiling both Android and iOS. Since I use Compose Hot Reload, I can see the result immediately. I also sometimes ask Junie to create a few variations of the same UI and then I pick the one I like most.

4. Give Structured Prompts Instead of Plain Text

One thing that really made a difference for me is how I write prompts. When you just type a quick idea in plain text, the results are often basic. But if you give a more structured prompt, Junie performs much better.

What I usually do is go to ChatGPT and type something like:
“Act as a prompt engineering expert. Improve the given prompt:”

Then I paste my rough idea of what I want. If needed, I also include the prd.md document for extra context. ChatGPT then turns my messy idea into a clean, well-structured prompt. After that, I just copy and paste the improved prompt into Junie’s text area, and the results are almost always better and more accurate.

This small step saves a lot of time and gives a much stronger starting point for any task.

5. Ask Junie to compile only the Android source set

This one is more specific to Kotlin Multiplatform. By default, after making some changes, Junie rebuilds whole project (both Android and iOS). But in most cases I don’t even touch the iOS part of the code, because most of the work happens in the common source set. So I just ask Junie to compile only Android, and I test iOS manually if needed. Since iOS builds are very slow, seeing changes on android only is at least two times faster.

6. Start with a boilerplate

Junie (or any AI agent) works best when it has an existing project structure to follow. Instead of prompting it in an empty project, have a boilerplate ready even just mock implementations of some classes like ViewModel, Repository, data sources or basic UI. That way:

• It’s easier and faster to review generated code because you understand your own project’s architecture.
• It won’t implement features in random ways each time, so it will be more deterministic.
• Your architecture/code stays consistent.

If you don’t have your own boilerplate, you can use something like KAppMaker, which already has reusable UI components, in-app purchases, notifications, authentication, AI guidelines and more.

Wrapping Up

By the end of the hackathon, I was able to build two Compose/Kotlin Multiplatform apps: ClipUGC and ArchGee. ClipUGC won 5th place in the Kotlin Multiplatform category, yaaayy :). Big thanks to JetBrains for Kotlin Multiplatform technology and and for giving me the chance to try Junie and to RevenueCat for making this hackathon happen.

You can download the AI prompts and guidelines I use from here.

In this blog post, I’ll go through using Firebase Analytics as an example, but this approach can be applied to any Swift dependency.

Step 1: Create a Common Analytics Interface

First, we need to create a common Analytics interface:

interface Analytics {
    fun logEvent(event: String, params: Map<String, Any>? = emptyMap())
    fun setEnabled(enabled: Boolean = true) //Can be used based on user consent

    companion object {
        const val EVENT_SCREEN_VIEW = "screen_view"
        const val PARAM_SCREEN_NAME = "screen_name"
    }
}

You can also add commonly used event names here. I also like to create an extra extension function to log each screen view:

fun Analytics.logScreenView(screenName: String, params: Map<String, Any>? = emptyMap()) {
    logEvent(
        event = Analytics.EVENT_SCREEN_VIEW,
        params = mapOf(Analytics.PARAM_SCREEN_NAME to screenName) + (params ?: emptyMap())
    )
}

Step 2: Implement Analytics for Each Platform

Android Implementation

In the androidMain source set, create FirebaseAnalyticsImpl:

import android.os.Bundle
import com.google.firebase.analytics.FirebaseAnalytics

class FirebaseAnalyticsImpl(private val firebaseAnalytics: FirebaseAnalytics) : Analytics {

    override fun logEvent(event: String, params: Map<String, Any>?) {
        val bundle = Bundle().apply {
            for (entry in params ?: emptyMap()) putString(entry.key, entry.value.toString())
        }
        firebaseAnalytics.logEvent(event, bundle)
    }

    override fun setEnabled(enabled: Boolean) {
        firebaseAnalytics.setAnalyticsCollectionEnabled(enabled)
    }
}

iOS Implementation

Since we don’t have CocoaPods dependencies in Kotlin Multiplatform, we need to create a Swift file in the iOS project. First, make sure you add FirebaseAnalytics dependency using Swift Package Manager. Then, in iosApp, create a new Swift file called FirebaseAnalyticsImpl:

import Foundation
import ComposeApp
import FirebaseAnalytics
import FirebaseCore

class FirebaseAnalyticsImpl: ComposeApp.Analytics {
    func logEvent(event: String, params: [String : Any]?) {
        var eventParams: [String: Any] = [:]
        params?.forEach { key, value in eventParams[key] = "\(value)" }
        Analytics.logEvent(event, parameters: eventParams)
    }

    func setEnabled(enabled: Bool) {
        Analytics.setAnalyticsCollectionEnabled(enabled)
    }
}

Step 3: Provide Implementations to Kotlin Multiplatform with Koin

Koin makes dependency injection easier. I assume you’re already familiar with providing platform-specific modules using Koin in Kotlin Multiplatform. If not, check out my blog post:

Achieving Platform-Specific Implementations with Koin in KMP

Android Side

In platformModule, provide the implementation as a singleton:

internal actual val platformModule: Module = module {
    single { FirebaseAnalyticsImpl(firebaseAnalytics = Firebase.analytics) } bind Analytics::class
}

iOS Side

Since Kotlin can’t directly access Swift classes, we need a factory to create instances. First, create SwiftLibDependencyFactory in iosMain:

interface SwiftLibDependencyFactory {
    fun provideFirebaseAnalyticsImpl(): Analytics
}

Then, in iosApp, create SwiftLibDependencyFactoryImpl.swift:

import Foundation
import ComposeApp
import SwiftUI
import UIKit

class SwiftLibDependencyFactoryImpl: SwiftLibDependencyFactory {
    static var shared = SwiftLibDependencyFactoryImpl()
    
    func provideFirebaseAnalyticsImpl() -> any Analytics {
        return FirebaseAnalyticsImpl()
    }
}

Although this requires some boilerplate code, the advantage is that you only need to do this once. When adding a new Swift library, just add a function in SwiftLibDependencyFactory and provide its implementation.

Step 4: Connect Everything in Kotlin Multiplatform

In iosMain, add a new koin module to manage the dependency:

internal fun swiftLibDependenciesModule(factory: SwiftLibDependencyFactory): Module = module {
    single { factory.provideFirebaseAnalyticsImpl() } bind Analytics::class
}

Step 5: Provide SwiftLibDependencyFactoryImpl to Koin

In iosMain main.kt, add an extension function to provide the module to the application:

fun KoinApplication.provideSwiftLibDependencyFactory(factory: SwiftLibDependencyFactory) =
    run { modules(swiftLibDependenciesModule(factory)) }

You probably initialize dependencies in your project something similar to this:

object AppInitializer {
    fun initialize(onKoinStart: KoinApplication.() -> Unit) {
        startKoin {
            onKoinStart()
            modules(appModules)
        }
    }
}

In your Swift application, call:

AppInitializer.shared.initialize(onKoinStart: { koinApp in
    koinApp.provideSwiftLibDependencyFactory(
        factory: SwiftLibDependencyFactoryImpl.shared
    )
})

Step 6: Use Analytics

Now that everything is set up, you can inject Analytics anywhere in your Kotlin code. For example, in a Composable function:

val analytics = koinInject<Analytics>()
analytics.logEvent(event = "PurchaseButtonClick")

Make sure to call analytics.setEnabled(true) at app startup or after obtaining user consent.

This approach ensures integration of any Swift dependencies into Kotlin Multiplatform while keeping everything organized using Koin in Kotlin Multiplatform project. And if you’re using KAppMaker, the boilerplate for this is already set up for you, so you can get started even faster.

How to Use Swift Packages in Kotlin Multiplatform using Koin was originally published in ProAndroidDev on Medium, where people are continuing the conversation by highlighting and responding to this story.

Let’s say you’ve built a Compose Multiplatform (CMP) app that works perfectly on both Android and iOS. Now, you want to create a demo web version to increase downloads. Thanks to Kotlin/Wasm and the KMPDevicePreview library, we can easily make this happen. You can check out a sample web demo of the PianoSpot app, created by these tools.

Kotlin/Wasm allows you to create a web version of your app using the same Compose views, but there’s one issue. When you use Kotlin/Wasm, the view will be shown like it’s on a desktop or big screen. This means users won’t get a true sense of how the app will look on their phone. That’s where the KMPDevicePreview library comes in. It lets us simulate how the app will look on a specific device, making it feel more realistic.

For this demo, I’ll walk through a simple app, but the process can be applied to nearly any Compose app or UI components. There might be some challenges when applying this to every app, but don’t worry — I’ve also shared some of the challenges I faced and how I overcame them in this blog.

Step 1: Set Up Your Project

First, open your existing project. I’m using a simple project generated from the Kotlin Multiplatform Wizard (you can find it here). If your project already includes a WebAssembly (Wasm) target, you can skip the next step. If not, follow these simple steps:

1. In your composeApp/build.gradle.kts file, add the WasmJs target:

kotlin {
    androidTarget {
        //...
    }
    //....

    @OptIn(ExperimentalWasmDsl::class)
    wasmJs {
        moduleName = "composeApp"
        browser {
            val rootDirPath = project.rootDir.path
            val projectDirPath = project.projectDir.path
            commonWebpackConfig {
                outputFileName = "composeApp.js"
                devServer = (devServer ?: KotlinWebpackConfig.DevServer()).apply {
                    static = (static ?: mutableListOf()).apply {
                        add(rootDirPath)
                        add(projectDirPath)
                    }
                }
            }
        }
        binaries.executable()
    }

  //....
}

2. Then, create a wasmJsMain directory in composeApp/src. Android Studio will suggest this automatically. Inside wasmJsMain, create the kotlin and resources directories.

In the kotlin directory, create a main.kt file with the following code:

import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.window.ComposeViewport
import kotlinx.browser.document

@OptIn(ExperimentalComposeUiApi::class)
fun main() {
    ComposeViewport(document.body!!) {
        App()
    }
}

In the resources directory, create an index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DemoApp</title>
    <link type="text/css" rel="stylesheet" href="styles.css">
    <script type="application/javascript" src="composeApp.js"></script>
</head>
<body>
</body>
</html>

And a styles.css file:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

3. To run the web version of your project, run:

./gradlew wasmJsBrowserRun

You should see your app running in the browser, but it’s not mobile-friendly yet. We’re not just creating a web version of our app — we’re building a mobile demo version. To achieve this, the next step is to include the KMPDevicePreview library.

Step 2: Add KMPDevicePreview

The KMPDevicePreview library is easy to use and works across Android, iOS, WasmJs, JS, and desktop targets. To add it, include the following dependency in your commonMain:

implementation("com.kappmaker:kmpdevicepreview:1.0.0-alpha02")

Check the GitHub Repo for the latest version — at the time of writing, it’s 1.0.0-alpha02.

After adding the library, run ./gradlew kotlinUpgradeYarnLock command. Otherwise, you might see the following error: > Task :kotlinStoreYarnLock FAILED.

Step 3: Wrap Your Composable with DevicePreview

Now, return to your main.kt file and wrap the root App composable with DeviceWithConfigurationView like this:

DeviceWithConfigurationView {
    App()
}

This will simulate the app as if it’s running on a device, giving users a realistic preview of what to expect before downloading:

You can select different device sizes and configurations (portrait or landscape). This lets you show how your app will look on various device sizes.

Advanced Configuration and Challenges I Faced

In this basic setup, we’ve managed to create a simple demo web version of a Kotlin Compose Multiplatform app. However, creating the demo web app for PianoSpot wasn’t without its challenges. Below, I’ll share the advanced configurations I implemented and the challenges I encountered while building the demo web app, along with the solutions I used.

Advanced Configuration

Custom Device Preview

For previewing a specific simulated device without including the configuration view, you can use SimulatedDevicePreview. Here's how it works:

SimulatedDevicePreview(
    simulatedDevice = SimulatedDevice(
        device = Pixel6(), // Use a predefined device or create your own
        configuration = DeviceConfiguration(isDarkMode = true, isPortrait = true) // Set dark mode and orientation
    )
) {
    // Your composable content
    App()
}

In this example, you can either use predefined devices like Pixel6 or create a custom device by implementing the Device interface and overriding its size properties. This gives you the flexibility to test how your app looks on different devices.

Theme Configuration

For testing light and dark modes in the preview, use SimulatedDeviceThemeIsDark.current:

val isDark by SimulatedDeviceThemeIsDark.current
MaterialTheme(colorScheme = if (isDark) darkColorScheme() else lightColorScheme()) {
    // Your composable content
    App()
}

This setup allows you to test how your app behaves in both dark and light mode, ensuring that your design is consistent across different themes.

Challenges

1. Dependencies Not Supporting Wasm Target

A main challenge I faced was the lack of support for certain dependencies when targeting the wasmJs platform. Some libraries, such as Room (for local storage) and RevenueCat (for in-app purchases), do not yet support wasm. This is understandable, given that wasmJs is still in its alpha stage, and not all libraries are expected to support it.

While this could be a problem, the main goal of the demo web app is to showcase the app’s interface and interactivity, not to replicate every feature of the native app. Therefore, excluding unsupported features like local storage and in-app purchases makes sense for the web version.

Solution:

To address this, I came up with two possible solutions:

Simple Solution:

The simpler solution was to create a separate module for the web demo app. Instead of creating a new wasmJs source set in the main composeApp module, I copied the composeApp module and renamed it to webApp. This webApp module only contains a wasmJs source set and minimal dependencies—mainly composable views and navigation—enough for the demo app.

• In the webApp module's build.gradle.kts file, I removed all dependencies that were not wasmJs compatible, keeping only the essentials. If I needed to use a feature from another library that wasn't wasmJs compatible, I simply removed that part or displayed a message informing the user that the feature was unavailable in the web demo.
• The downside to this approach is that when I update a view in the main composeApp module, I have to also update it in the webApp module. However, since the demo app is just for preview purposes, this trade-off is acceptable. You can also create a separate UI module for composables to avoid duplication, but I found that copying the composeApp module and removing unsupported parts was faster and easier.

Complex Solution:

• A more complex approach would involve creating a separate module for each unsupported library, creating abstractions for those libraries, and implementing actual code for supported platforms while providing fallback messages or fake implementations for the wasmJs target. This would keep the project up-to-date with the latest changes, but I felt this approach was overly complicated and didn't provide significant benefits for the demo app.

Creating Web Demos for Kotlin Multiplatform Apps was originally published in ProAndroidDev on Medium, where people are continuing the conversation by highlighting and responding to this story.

Sound familiar?

After 6 years of mobile development and dealing with this over and over, I decided to fix it. That’s how KAppMaker was born — a Kotlin Multiplatform & Compose Multiplatform boilerplate to help developers skip the boring setup and dive straight into building native apps for both android and ios.

Why KAppMaker?

I built KAppMaker because I wanted a boilerplate that’s simple but powerful and flexible to change. It gives you all the essential building blocks so you can focus on the creative parts of app development.

For example, I built PianoSpot, an app to find public pianos worldwide, in just 5 days using KAppMaker. And here’s something crazier: I challenged myself to build and publish a fully functional Android and iOS app in just 6 hours live. It had authentication (Google and Apple Sign In), in-app purchases for premium feature, local storage for favorites, sending push notifications, requesting network request, and more. You can watch full video where I built and published android and ios app at the same time using almost all features of KAppMaker

If I can do that, imagine how much faster you can ship your app ideas!

What’s Included

KAppMaker comes with essentials you need to get started:

• Authentication: Google, Apple sign In
• In-app purchases: Add premium features or subscriptions.
• Push Notifications: Send push notifications to your users.
• Account management: User Logout and deletion built-in.
• Navigation & onboarding: Prebuilt components to save hours of work.
• Local storage: Save user preferences or favorites easily.
• GitHub Actions: Automate builds and publishing for Android and iOS.

It’s flexible too — you can generate screens with a single script and add new features without touching the core boilerplate.

Who’s It For?

KAppMaker is for developers, indie creators, and startups who want to ship faster. Whether you’re building an MVP or a production-ready app, it gives you core essentials. You need to have a skill with Kotlin & Compose Multiplatform technology though, it is not a no code builder.

Ready to Build Faster?

If you’ve ever abandoned an app idea because of all the tedious setup, KAppMaker is for you. Check it out on kappmaker.com and let me know what you think!

I’d love to hear your thoughts, feedback, or even feature requests.

New Platforms: Web and Desktop Support

One of the most exciting updates to KMPNotifier is the addition of web support, including JavaScript (JS) and WebAssembly (WASM) targets. This means you can now send and receive local notifications in web applications built with Kotlin Multiplatform.

Here’s how you can initialize KMPNotifier for the web:

NotifierManager.initialize(
    NotificationPlatformConfiguration.Web(
        askNotificationPermissionOnStart = true,
        notificationIconPath = null //Any image icon url or put image in resources folder
    )
)

NOTE: For macOS users, be sure to enable notifications for your browser in the system settings to ensure that web notifications display correctly.

In addition to web support, KMPNotifier now also supports local notifications on Desktop platforms. Desktop initialization:

NotifierManager.initialize(
   NotificationPlatformConfiguration.Desktop(
       notificationIconPath = composeDesktopResourcesPath() + File.separator + "ic_notification.png"
   )
)

For custom notification icon on Desktop, you need to put notification icon into resources/common folder. For more information: Compose Desktop Resources.

Custom Notification Sounds

KMPNotifier now has the ability to use custom notification sounds on both Android and iOS.

Android: To set a custom notification sound, place your audio file in the res/raw directory and initialize the library with the soundUri parameter:

val customNotificationSound = Uri.parse(ContentResolver.SCHEME_ANDROID_RESOURCE + "://" + "YOUR_APPLICATION_PACKAGE_NAME" + "/" + R.raw.custom_notification_sound)

NotifierManager.initialize(
    configuration = NotificationPlatformConfiguration.Android(
        notificationIconResId = R.drawable.ic_launcher_foreground,
        showPushNotification = true,
        notificationChannelData = NotificationPlatformConfiguration.Android.NotificationChannelData(
            soundUri = customNotificationSound.toString()
        )
    )
)

iOS: For iOS, add your custom sound file to the Resources directory, then specify the notificationSoundName parameter during initialization:

NotifierManager.initialize(
    NotificationPlatformConfiguration.Ios(
        showPushNotification = true,
        askNotificationPermissionOnStart = true,
        notificationSoundName = "custom_notification_sound.wav"
    )
)

If no custom sound is specified, the default notification sound will be used.

Deep Link Support on Android

KMPNotifier now supports deep linking on Android, allowing you to associate notifications with specific actions within your app via URIs. To utilize this feature, include a “URL” key in your notification payload data:

notifier.notify(
    title = "Title", 
    body = "bodyMessage", 
    payloadData = mapOf(
        Notifier.KEY_URL to "https://github.com/mirzemehdi/KMPNotifier/",
        "extraKey" to "randomValue"
    )
)

KMPNotifier will automatically set the Intent’s data to the URI provided in the “URL” key, enabling deep linking within your Android app.

Notification Permission Handling

In previous versions of KMPNotifier, notification permissions were requested automatically when the app started. The latest update introduces more flexibility, allowing developers to control when these permissions are requested. To manage notification permissions manually, set askNotificationPermissionOnStart to false during initialization. You can then use the PermissionUtil class or Moko Permissions to request permissions when needed in your app.

val permissionUtil = NotifierManager.getPermissionUtil()
permissionUtil.askNotificationPermission()

New Listener Methods for Advanced Notification Handling

The latest update to KMPNotifier introduces new listener methods that improve to manage notifications effectively. These methods allow for greater customization and control over how notifications are handled within your application.

NotifierManager.addListener(object : NotifierManager.Listener {
    override fun onNewToken(token: String) {
       println("Push Notification onNewToken: $token")
    }

    override fun onPushNotification(title: String?, body: String?) {
       super.onPushNotification(title, body)
       println("Push Notification notification type message is received: Title: $title and Body: $body")
    }

    override fun onPayloadData(data: PayloadData) {
        super.onPayloadData(data)
        println("Push Notification data type message is received, payloadData: $data")
    }

    override fun onNotificationClicked(data: PayloadData) {
        super.onNotificationClicked(data)
        println("Notification clicked, Notification payloadData: $data")
    }
})

Note: By default, foreground push notifications are shown to the user. If you want to customize this behavior, you can set the showPushNotification value to false when initializing the library. This way, notifications will not be displayed to the user, but you can still access the notification content using the onPushNotification listener method mentioned above.

Notification Removal Functionality

KMPNotifier now has a support to manage notifications by removing them when needed:

notifier.remove(notificationId) //Remove notification by id.
notifier.removeAll() //Remove all notifications

Thank you all for your support and collaboration as we improve KMPNotifier! With these updates, KMPNotifier is now available for managing notifications across Android, iOS, web, and desktop platforms. Don’t forget to check out the latest updates on our GitHub page.

KMPNotifier Update: Web, Desktop, and New Features for Kotlin Multiplatform Notifications was originally published in ProAndroidDev on Medium, where people are continuing the conversation by highlighting and responding to this story.

As I thought about this, I came across RevenueCat’s new Paywall UI template feature on the internet (seems like Google’s technology is now advanced enough to show relevant content based on our thoughts xD). In case you’re not familiar, RevenueCat simplifies payment and subscription integration into mobile apps without needing backend development or complex implementations. The new Paywall feature makes it even easier by providing paywall templates you can use and update from the web without updating the app in the store.

Excited about this discovery, I thought, “Perfect! This is exactly what I’ve been looking for. It speeds things up for me without getting into UI and backend complexities related to subscriptions.” So, I decided to use it in FindTravelNow. Initially, I was a bit disappointed since it wasn’t Kotlin Multiplatform ready. But then, I realized it’s just a library with different Swift (Objective-C compatible) and Kotlin implementations. I could easily create a wrapper and use it in a Kotlin+Compose Multiplatform project.

Enough of the story; now, let’s dive into the technical aspect of integrating RevenueCat and Paywall UI in a Kotlin+Compose Multiplatform project.

First step— RevenueCat Library Installation

We add android and iOS dependencies of RevenueCat and RevenueCatUI in our shared module using Gradle.

cocoapods {
  ios.deploymentTarget = "15.0"
  framework {
    baseName = "shared"
    isStatic = true
  }
  pod("RevenueCat"){
    extraOpts += listOf("-compiler-option", "-fmodules") //Extra opts is important
  }
  pod("RevenueCatUI"){
    extraOpts += listOf("-compiler-option", "-fmodules") //Extra opts is important
  }
}

sourceSets {
  androidMain.dependencies {
    implementation("com.revenuecat.purchases:purchases:7.5.2")
    implementation("com.revenuecat.purchases:purchases-ui:7.5.2")
  }
}

Make sure to include RevenueCat and RevenueCatUI from XCode as well; otherwise, errors may occur. For that I used Swift Package Manager in XCode. Select File » Add Packages... and enter the repository URL https://github.com/RevenueCat/purchases-ios.git. Select RevenueCat and RevenueCatUI from the list.

Second Step— Purchases Core class and Functions.

In this step, I’ll cover the main necessary classes and functions that you can copy and paste. Additionally, I’ll share a “magic blueprint” so you can follow the same pattern to implement other functions as needed. Our main goals are to cover the initialization of RevenueCat and display the Paywall view using the RevenueCatUI Paywall composable function — these are our core requirements.

The magic blueprint involves opening the RevenueCat Configuring SDK page in two tabs. In one tab, we focus on the Kotlin implementation, while in the other tab, we refer to the Objective-C implementation page. It’s as simple as that. When creating classes in the commonMain sourceSet, we maintain the same Kotlin implementation code style.

Purchases commonMain class/functions

public interface Purchases {
    public var logLevel: LogLevel
    public fun configure(apiKey: String)

    public fun login(appUserId: String, onResult: (Result<LogInResult>) -> Unit)
    public fun logOut(onResult: (Result<CustomerInfo>) -> Unit)
}

And we also need data classes for logging information and customer details. For this, we can create an identical version of Kotlin data classes that are available for the Android Kotlin part in commonMain. Then, in each source set, we can include Mapper functions to map RevenueCat Android and iOS data classes to our custom data class.

Purchases commonMain Data classes

public data class CustomerInfo(
    val originalAppUserId: String,
    val entitlements: EntitlementInfos
)

data class LogInResult(val customerInfo: CustomerInfo, val created: Boolean)

public data class EntitlementInfos(val all: Map<String, EntitlementInfo>)

public data class EntitlementInfo(
    val identifier: String,
    val isActive: Boolean,
    val willRenew: Boolean,
    val latestPurchaseDate: Long,
    val originalPurchaseDate: Long,
    val expirationDate: Long?,
    val productIdentifier: String,
    val productPlanIdentifier: String?,
    val isSandbox: Boolean,
    val unsubscribeDetectedAt: Long?,
    val billingIssueDetectedAt: Long?,
)

Purchases implementation in Android (androidMain sourceSet)

import com.revenuecat.purchases.Purchases as RevenueCatPurchases
import com.revenuecat.purchases.interfaces.LogInCallback as RevenueCatLoginCallback
import com.revenuecat.purchases.CustomerInfo as RevenueCatCustomerInfo

internal class PurchasesImpl(private val context: Context) : Purchases {
    override var logLevel: LogLevel
        get() = RevenueCatPurchases.logLevel.asLogLevel()
        set(value) {
            RevenueCatPurchases.logLevel = value.asRevenueCatLogLevel()
        }

    override fun configure(apiKey: String) {
        RevenueCatPurchases.configure(PurchasesConfiguration.Builder(context, apiKey).build())
    }


    override fun login(appUserId: String, onResult: (Result<LogInResult>) -> Unit) {
        RevenueCatPurchases.sharedInstance.logIn(appUserId, object : RevenueCatLoginCallback {
            override fun onError(error: PurchasesError) {
                onResult(Result.failure(Exception(error.message)))
            }

            override fun onReceived(customerInfo: RevenueCatCustomerInfo, created: Boolean) {
                onResult(Result.success(LogInResult(customerInfo.asCustomerInfo(), created)))
            }
        })
    }

    override fun logOut(onResult: (Result<CustomerInfo>) -> Unit) {
        RevenueCatPurchases.sharedInstance.logOut(object : ReceiveCustomerInfoCallback {
            override fun onError(error: PurchasesError) {
                onResult(Result.failure(Exception(error.message)))
            }

            override fun onReceived(customerInfo: RevenueCatCustomerInfo) {
                onResult(Result.success(customerInfo.asCustomerInfo()))
            }

        })
    }
}

Purchases Mapper functions for Android
These mapper functions will map RevenueCat Android data classes to our custom data class that we created earlier.

import com.revenuecat.purchases.LogLevel as RevenueCatLogLevel
import com.revenuecat.purchases.CustomerInfo as RevenueCatCustomerInfo
import com.revenuecat.purchases.EntitlementInfos as RevenueCatEntitlementInfos
import com.revenuecat.purchases.EntitlementInfo as RevenueCatEntitlementInfo


internal fun LogLevel.asRevenueCatLogLevel(): RevenueCatLogLevel {
    return when (this) {
        LogLevel.VERBOSE -> RevenueCatLogLevel.VERBOSE
        LogLevel.DEBUG -> RevenueCatLogLevel.DEBUG
        LogLevel.INFO -> RevenueCatLogLevel.INFO
        LogLevel.WARN -> RevenueCatLogLevel.WARN
        LogLevel.ERROR -> RevenueCatLogLevel.ERROR
    }

}

internal fun RevenueCatLogLevel.asLogLevel(): LogLevel {
    return when (this) {
        RevenueCatLogLevel.VERBOSE -> LogLevel.VERBOSE
        RevenueCatLogLevel.DEBUG -> LogLevel.DEBUG
        RevenueCatLogLevel.INFO -> LogLevel.INFO
        RevenueCatLogLevel.WARN -> LogLevel.WARN
        RevenueCatLogLevel.ERROR -> LogLevel.ERROR
    }
}

internal fun RevenueCatEntitlementInfos.asEntitlementInfos(): EntitlementInfos {
    return EntitlementInfos(all = this.all.mapValues { entry ->
        entry.value.asEntitlementInfo()
    })
}

internal fun RevenueCatEntitlementInfo.asEntitlementInfo(): EntitlementInfo {
    return EntitlementInfo(
        identifier = this.identifier,
        isActive = this.isActive,
        willRenew = this.willRenew,
        latestPurchaseDate = this.latestPurchaseDate.time,
        originalPurchaseDate = this.originalPurchaseDate.time,
        expirationDate = this.expirationDate?.time,
        productIdentifier = this.productIdentifier,
        productPlanIdentifier = this.productPlanIdentifier,
        isSandbox = this.isSandbox,
        unsubscribeDetectedAt = this.unsubscribeDetectedAt?.time,
        billingIssueDetectedAt = this.billingIssueDetectedAt?.time
    )
}

internal fun RevenueCatCustomerInfo.asCustomerInfo(): CustomerInfo {
    return CustomerInfo(
        originalAppUserId = this.originalAppUserId,
        entitlements = entitlements.asEntitlementInfos()
    )
}

Purchases implementation in iOS (iosMain sourceSet)

@OptIn(ExperimentalForeignApi::class)
internal class PurchasesImpl : Purchases {
    override var logLevel: LogLevel
        get() = RCPurchases.logLevel().asLogLevel()
        set(value) {
            RCPurchases.setLogLevel(value.asRevenueCatLogLevel())
        }

    override fun configure(apiKey: String) {
        RCPurchases.configureWithAPIKey(apiKey)
    }


    override fun login(appUserId: String, onResult: (Result<LogInResult>) -> Unit) {
        RCPurchases.sharedPurchases()
            .logIn(appUserId, completionHandler = { rcCustomerInfo, created, nsError ->
                if (rcCustomerInfo != null) onResult(
                    Result.success(
                        LogInResult(
                            customerInfo = rcCustomerInfo.asCustomerInfo(),
                            created = created
                        )
                    )
                )
                else
                    onResult(Result.failure(Exception(nsError?.localizedFailureReason)))
            })
    }

    override fun logOut(onResult: (Result<CustomerInfo>) -> Unit) {
        RCPurchases.sharedPurchases().logOutWithCompletion { rcCustomerInfo, nsError ->
            if (rcCustomerInfo != null) onResult(
                Result.success(rcCustomerInfo.asCustomerInfo())
            )
            else
                onResult(Result.failure(Exception(nsError?.localizedFailureReason)))
        }
    }

}

Purchases Mapper functions for iOS

These mapper functions will map RevenueCat iOS data classes to our custom data class that we created earlier.

@OptIn(ExperimentalForeignApi::class)
internal fun LogLevel.asRevenueCatLogLevel(): Long {
    return when (this) {
        LogLevel.VERBOSE -> RCLogLevelVerbose
        LogLevel.DEBUG -> RCLogLevelDebug
        LogLevel.INFO -> RCLogLevelInfo
        LogLevel.WARN -> RCLogLevelWarn
        LogLevel.ERROR -> RCLogLevelError
    }

}

@OptIn(ExperimentalForeignApi::class)
internal fun Long.asLogLevel(): LogLevel {
    return when (this) {
        RCLogLevelVerbose -> LogLevel.VERBOSE
        RCLogLevelDebug -> LogLevel.DEBUG
        RCLogLevelInfo -> LogLevel.INFO
        RCLogLevelWarn -> LogLevel.WARN
        RCLogLevelError -> LogLevel.ERROR
        else -> LogLevel.DEBUG
    }
}

@OptIn(ExperimentalForeignApi::class)
internal fun RCEntitlementInfos.asEntitlementInfos(): EntitlementInfos {
    val entitlementInfos: Map<String, EntitlementInfo> = this.all().filter { entry ->
        entry.key is String && entry.value is RCEntitlementInfo
    }.map { entry ->
        val key = entry.key as String
        val value = entry.value as RCEntitlementInfo
        key to value.asEntitlementInfo()
    }.toMap()

    return EntitlementInfos(all = entitlementInfos)
}

@OptIn(ExperimentalForeignApi::class)
internal fun RCEntitlementInfo.asEntitlementInfo(): EntitlementInfo {
    return EntitlementInfo(
        identifier = this.identifier(),
        isActive = this.isActive(),
        willRenew = this.willRenew(),
        latestPurchaseDate = this.latestPurchaseDate()?.timeIntervalSince1970?.toLong() ?: 0L,
        originalPurchaseDate = this.originalPurchaseDate()?.timeIntervalSince1970?.toLong() ?: 0L,
        expirationDate = this.expirationDate()?.timeIntervalSince1970?.toLong() ?: 0L,
        productIdentifier = this.productIdentifier(),
        productPlanIdentifier = this.productPlanIdentifier(),
        isSandbox = this.isSandbox(),
        unsubscribeDetectedAt = this.unsubscribeDetectedAt()?.timeIntervalSince1970?.toLong() ?: 0L,
        billingIssueDetectedAt = this.billingIssueDetectedAt()?.timeIntervalSince1970?.toLong()
            ?: 0L
    )
}

@OptIn(ExperimentalForeignApi::class)
public fun RCCustomerInfo.asCustomerInfo(): CustomerInfo {
    return CustomerInfo(
        originalAppUserId = originalAppUserId(),
        entitlements = entitlements().asEntitlementInfos()
    )
}

Finally, we bring all implementation classes together using either just ‘expect/actual’ or you can provide it with the Koin DI framework, as this is my personal preference. I’ve written more detailed blog post about the usage of Koin in Kotlin Multiplatform that you can check out: https://medium.com/proandroiddev/achieving-platform-specific-implementations-with-koin-in-kmm-5cb029ba4f3b.

Third Step — Purchases UI — Paywall Composable

Now, we’ll move on to covering the UI part, which we can utilize as a Composable function within our composable.

Purchases UI in commonMain — Paywall composable

@Composable
public expect fun Paywall(
    shouldDisplayDismissButton: Boolean = true,
    onDismiss: () -> Unit,
    listener: PaywallListener?
)

public interface PaywallListener {
    public fun onPurchaseStarted() {}
    public fun onPurchaseCompleted(customerInfo: CustomerInfo?) {}
    public fun onPurchaseError(error: String?) {}
    public fun onPurchaseCancelled() {}
    public fun onRestoreStarted() {}
    public fun onRestoreCompleted(customerInfo: CustomerInfo?) {}
    public fun onRestoreError(error: String?) {}
}

Paywall composable implementation in Android (androidMain sourceSet)

import com.revenuecat.purchases.ui.revenuecatui.Paywall as RevenueCatPaywall

@OptIn(ExperimentalPreviewRevenueCatUIPurchasesAPI::class)
@Composable
public actual fun Paywall(
    shouldDisplayDismissButton: Boolean,
    onDismiss: () -> Unit,
    listener: PaywallListener?
) {
    RevenueCatPaywall(
        options = PaywallOptions.Builder(
            dismissRequest = onDismiss
        )
            .setListener(listener?.asRevenueCatPaywallListener())
            .setShouldDisplayDismissButton(shouldDisplayDismissButton)
            .build()
    )
}

PaywallListener Mapper for Android (androidMain)

import com.revenuecat.purchases.ui.revenuecatui.PaywallListener as RevenueCatPaywallListener


@OptIn(ExperimentalPreviewRevenueCatUIPurchasesAPI::class)
internal fun PaywallListener.asRevenueCatPaywallListener(): RevenueCatPaywallListener {
    return object:RevenueCatPaywallListener{
        override fun onPurchaseCancelled() {
            this@asRevenueCatPaywallListener.onPurchaseCancelled()
        }

        override fun onPurchaseCompleted(
            customerInfo: CustomerInfo,
            storeTransaction: StoreTransaction
        ) {
            this@asRevenueCatPaywallListener.onPurchaseCompleted(customerInfo.asCustomerInfo())

        }

        override fun onPurchaseError(error: PurchasesError) {
            this@asRevenueCatPaywallListener.onPurchaseError(error.message)
        }

        override fun onPurchaseStarted(rcPackage: Package) {
            this@asRevenueCatPaywallListener.onPurchaseStarted()
        }

        override fun onRestoreCompleted(customerInfo: CustomerInfo) {
            this@asRevenueCatPaywallListener.onRestoreCompleted(customerInfo.asCustomerInfo())
        }

        override fun onRestoreError(error: PurchasesError) {
            this@asRevenueCatPaywallListener.onRestoreError(error.message)
        }

        override fun onRestoreStarted() {
            this@asRevenueCatPaywallListener.onRestoreStarted()
        }
    }
}

Paywall composable implementation in iOS (iosMain sourceSet)

@OptIn(ExperimentalForeignApi::class)
@Composable
public actual fun Paywall(
    shouldDisplayDismissButton: Boolean,
    onDismiss: () -> Unit, listener: PaywallListener?
) {

    val rootViewController = UIApplication.sharedApplication.keyWindow?.rootViewController
    val controller = RCPaywallViewController(null, shouldDisplayDismissButton)
    controller.setDelegate(listener?.asRCPaywallViewControllerDelegate(onDismiss))
    if (controller.isBeingPresented().not())
        rootViewController?.presentViewController(controller, true, completion = {
            if (controller.isBeingPresented().not()) onDismiss()
        })

}

PaywallListener Mapper for iOS (iosMain)

@OptIn(ExperimentalForeignApi::class)
@Suppress("CONFLICTING_OVERLOADS")
internal fun PaywallListener.asRCPaywallViewControllerDelegate(onDismissed: () -> Unit): RCPaywallViewControllerDelegateProtocol {
    return object : RCPaywallViewControllerDelegateProtocol, NSObject() {
        override fun paywallViewController(
            controller: RCPaywallViewController,
            didFailPurchasingWithError: NSError
        ) {
            this@asRCPaywallViewControllerDelegate.onPurchaseError(didFailPurchasingWithError.localizedFailureReason)
        }


        override fun paywallViewController(
            controller: RCPaywallViewController,
            didFailRestoringWithError: NSError
        ) {
            this@asRCPaywallViewControllerDelegate.onRestoreError(didFailRestoringWithError.localizedFailureReason)
        }

        override fun paywallViewController(
            controller: RCPaywallViewController,
            didFinishRestoringWithCustomerInfo: RCCustomerInfo
        ) {
            /*

            TODO for some reason here can't get any value of didFinishRestoringWithCustomerInfo, 
            so just pass null if it is case, if not just map it. 

            */
            this@asRCPaywallViewControllerDelegate.onRestoreCompleted(
                null
//                didFinishRestoringWithCustomerInfo.asCustomerInfo()
            )
        }

        override fun paywallViewController(
            controller: RCPaywallViewController,
            didFinishPurchasingWithCustomerInfo: RCCustomerInfo
        ) {
            this@asRCPaywallViewControllerDelegate.onPurchaseCompleted(null)
        }

        override fun paywallViewController(
            controller: RCPaywallViewController,
            didFinishPurchasingWithCustomerInfo: RCCustomerInfo,
            transaction: RCStoreTransaction?
        ) {
            this@asRCPaywallViewControllerDelegate.onPurchaseCompleted(null)
        }

        override fun paywallViewControllerDidCancelPurchase(controller: RCPaywallViewController) {
            this@asRCPaywallViewControllerDelegate.onPurchaseCancelled()
        }

        override fun paywallViewControllerDidStartPurchase(controller: RCPaywallViewController) {
            this@asRCPaywallViewControllerDelegate.onPurchaseStarted()
        }

        override fun paywallViewControllerWasDismissed(controller: RCPaywallViewController) {
            onDismissed()
        }
    }

}

Thanks for reading until the end! I wish you a lot of success in earning money from your in-app purchases or subscriptions :D. For those who made it this far, I want to let you in on something special — I’ve introduced a Lifetime Premium Subscription in FindTravelNow, available for a limited time at just $5 (think of it as a buy-me-coffee thing :D). This lifetime subscription is meant for demo and test purposes, and I plan to keep it available for one month. However, if you act quickly, you can secure a lifetime premium subscription at this exceptionally low price. Don’t miss out on this opportunity!

Additionally, there’s one more thing — I’ve also developed the KMPRevenueCat wrapper library . With this, you can directly use the functionalities above without having to implement all of these steps. It’s designed to simplify the integration process.

That’s how easy is to authenticate users in your Kotlin Multiplatform project using KMPAuth library. KMPAuth is simple and easy to use Kotlin Multiplatform Authentication library targeting iOS and Android. Library supports Google, Apple, Github authentication integrations using Firebase.

Because I am using KMPAuth in FindTravelNow production open-source KMP project, I’ll support development of this library :).

Related blog post: Integrating Google Sign-In into Kotlin Multiplatform
You can check out Documentation for full library api information.

🚀 KMPAuth library just got even better with version 1.0.0!

What’s New?

✅ Implemented Google, Apple, Github authentication
✅ Developed new kmpauth-uihelper module that contains Google and Apple Sign-In Buttons
✅ Updated sample code.
✅ Updated Documentation.

Before we dive into the coding adventure, let’s understand that Google Sign In is a mix of UI and data layers. To illustrate, consider signing out; you can do it from the data layer or repository (but not necessarily), but signing in is strictly a UI task. Why? Well, we display Google Accounts for one-tap sign-ins, making it a UI-centric task. So our code needs to be easy to use, manageable, and adaptable to both UI and data layers. If you want to jump to the code immediately, here is the pull request showing how I implemented it in the FindTravelNow app. However, I strongly recommend reading it to understand the logic behind the implementation.

First Step — Creating core class and functions

Firstly, you need to set up OAuth 2.0 in Google Cloud Platform Console. For steps you can follow this link. Pro Easy Tip: If you use Firebase and enable Google Sign-In authentication in Firebase it will automatically generate OAuth client IDs for each platform, and one will be Web Client ID which will be needed for identifying signed-in users in backend server.

Common (commonMain sourceSet)

We will create one data class for holding authenticated Google User properties, and the most important one will be idToken field which will be used to authenticate user in backend side.

data class GoogleUser(
    val idToken: String,
    val displayName: String = "",
    val profilePicUrl: String? = null,
)

And another data class for holding required credential parameters.

data class GoogleAuthCredentials(val serverId: String) //Web client ID

Then we will create two interfaces, one will contain UI layer functionalities (a.k.a Sign-In ), and another will be related to Data layer.

interface GoogleAuthUiProvider {

    /**
     * Opens Sign In with Google UI,
     * @return returns GoogleUser
     */
    suspend fun signIn(): GoogleUser?
}

To ensure that the GoogleAuthUIProvider implementation is accessible only on the UI side and to leverage Compose Multiplatform for the UI, we will use the Composable annotation for returning GoogleAuthUIProvider in the second interface.

interface GoogleAuthProvider {
    @Composable
    fun getUiProvider(): GoogleAuthUiProvider

    suspend fun signOut()
}

Next step is to create platform specific implementation of these interfaces.

Android (androidMain sourceSet)

In build.gradle.kts, we need to add the following Google Sign-In dependencies for the androidMain dependencies.

#Google Sign In
implementation("androidx.credentials:credentials:1.3.0-alpha01")
implementation("androidx.credentials:credentials-play-services-auth:1.3.0-alpha01")
implementation("com.google.android.libraries.identity.googleid:googleid:1.1.0")

GoogleAuthUiProvider implementation ->

internal class GoogleAuthUiProviderImpl(
    private val activityContext: Context,
    private val credentialManager: CredentialManager,
    private val credentials: GoogleAuthCredentials,
) :
    GoogleAuthUiProvider {
    override suspend fun signIn(): GoogleUser? {
        return try {
            val credential = credentialManager.getCredential(
                context = activityContext,
                request = getCredentialRequest()
            ).credential
            getGoogleUserFromCredential(credential)
        } catch (e: GetCredentialException) {
            AppLogger.e("GoogleAuthUiProvider error: ${e.message}")
            null
        } catch (e: NullPointerException) {
            null
        }
    }

    private fun getGoogleUserFromCredential(credential: Credential): GoogleUser? {
        return when {
            credential is CustomCredential && credential.type == GoogleIdTokenCredential.TYPE_GOOGLE_ID_TOKEN_CREDENTIAL -> {
                try {
                    val googleIdTokenCredential =
                        GoogleIdTokenCredential.createFrom(credential.data)
                    GoogleUser(
                        idToken = googleIdTokenCredential.idToken,
                        displayName = googleIdTokenCredential.displayName ?: "",
                        profilePicUrl = googleIdTokenCredential.profilePictureUri?.toString()
                    )
                } catch (e: GoogleIdTokenParsingException) {
                    AppLogger.e("GoogleAuthUiProvider Received an invalid google id token response: ${e.message}")
                    null
                }
            }

            else -> null
        }
    }

    private fun getCredentialRequest(): GetCredentialRequest {
        return GetCredentialRequest.Builder()
            .addCredentialOption(getGoogleIdOption(serverClientId = credentials.serverId))
            .build()
    }

    private fun getGoogleIdOption(serverClientId: String): GetGoogleIdOption {
        return GetGoogleIdOption.Builder()
            .setFilterByAuthorizedAccounts(false)
            .setAutoSelectEnabled(true)
            .setServerClientId(serverClientId)
            .build()
    }
}

GoogleAuthProvider Implementation ->

internal class GoogleAuthProviderImpl(
    private val credentials: GoogleAuthCredentials,
    private val credentialManager: CredentialManager,
) : GoogleAuthProvider {

    @Composable
    override fun getUiProvider(): GoogleAuthUiProvider {
        val activityContext = LocalContext.current
        return GoogleAuthUiProviderImpl(
            activityContext = activityContext,
            credentialManager = credentialManager,
            credentials = credentials
        )
    }

    override suspend fun signOut() {
        credentialManager.clearCredentialState(ClearCredentialStateRequest())
    }
}

iOS (iosMain sourceSet)

In iOS, you also need to add Google Sign-In dependencies. If you use CocoaPods, you can add them as shown below, or you can simply add the library using Swift Package Manager from Xcode.

pod("GoogleSignIn")

And add client and server IDs to the Info.plist file.

<key>GIDServerClientID</key>
<string>YOUR_SERVER_CLIENT_ID</string>

<key>GIDClientID</key>
<string>YOUR_IOS_CLIENT_ID</string>
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>YOUR_DOT_REVERSED_IOS_CLIENT_ID</string>
    </array>
  </dict>
</array>

GoogleAuthUiProvider implementation ->

internal class GoogleAuthUiProviderImpl : GoogleAuthUiProvider {
    @OptIn(ExperimentalForeignApi::class)
    override suspend fun signIn(): GoogleUser? = suspendCoroutine { continutation ->

        val rootViewController =
            UIApplication.sharedApplication.keyWindow?.rootViewController

        if (rootViewController == null) continutation.resume(null)
        else {
            GIDSignIn.sharedInstance
                .signInWithPresentingViewController(rootViewController) { gidSignInResult, nsError ->
                    nsError?.let { println("Error While signing: $nsError") }
                    val idToken = gidSignInResult?.user?.idToken?.tokenString
                    val profile = gidSignInResult?.user?.profile
                    if (idToken != null) {
                        val googleUser = GoogleUser(
                            idToken = idToken,
                            displayName = profile?.name ?: "",
                            profilePicUrl = profile?.imageURLWithDimension(320u)?.absoluteString
                        )
                        continutation.resume(googleUser)
                    } else continutation.resume(null)
                }

        }
    }
    
}

GoogleAuthProvider implementation ->

internal class GoogleAuthProviderImpl :
    GoogleAuthProvider {

    @Composable
    override fun getUiProvider(): GoogleAuthUiProvider = GoogleAuthUiProviderImpl()

    @OptIn(ExperimentalForeignApi::class)
    override suspend fun signOut() {
        GIDSignIn.sharedInstance.signOut()
    }


}

You only need the code below to implement application delegate function calls on the Swift side.

class AppDelegate: NSObject, UIApplicationDelegate {

    func application(
      _ app: UIApplication,
      open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]
    ) -> Bool {
      var handled: Bool

      handled = GIDSignIn.sharedInstance.handle(url)
      if handled {
        return true
      }

      // Handle other custom URL types.

      // If not handled by this app, return false.
      return false
    }


}

@main
struct iOSApp: App {
    @UIApplicationDelegateAdaptor(AppDelegate.self) var delegate
    
   var body: some Scene {
      WindowGroup {
            ContentView().onOpenURL(perform: { url in
                GIDSignIn.sharedInstance.handle(url)
            })
      }
   }
}

Finally, we bring all implementation classes together using either just ‘expect/actual’ or you can use it with the Koin DI framework, as I did in FindTravelNow. I’ve written more detailed blog post about the usage of Koin in Kotlin Multiplatform that you can check out: https://medium.com/proandroiddev/achieving-platform-specific-implementations-with-koin-in-kmm-5cb029ba4f3b.

Second Step — Creating GoogleButtonUiContainer.

Up to this point, our code is actually ready to use. However, we can add a little touch to make our lives easier, allowing us to use this button container across any project, handling all the heavy lifting for us. For each project, we can customize the button however we want.

interface GoogleButtonUiContainerScope {
    fun onClick()
}

@Composable
fun GoogleButtonUiContainer(
    modifier: Modifier = Modifier,
    onGoogleSignInResult: (GoogleUser?) -> Unit,
    content: @Composable GoogleButtonUiContainerScope.() -> Unit,
) {
    val googleAuthProvider = koinInject<GoogleAuthProvider>()
    val googleAuthUiProvider = googleAuthProvider.getUiProvider()
    val coroutineScope = rememberCoroutineScope()
    val uiContainerScope = remember {
        object : GoogleButtonUiContainerScope {
            override fun onClick() {
                coroutineScope.launch {
                    val googleUser = googleAuthUiProvider.signIn()
                    onGoogleSignInResult(googleUser)
                }
            }
        }
    }
    Surface(
        modifier = modifier,
        content = { uiContainerScope.content() }
    )

}

Then we simply delegate our button or view click to this container’s click, which will perform Google One Tap Sign-In and notify our screen about the result (our GoogleUser object). Using the ID token, we can send it to our backend server to check the authentication of the user. Finally, this is how simple it is to use it in your views.

GoogleButtonUiContainer(onGoogleSignInResult = { googleUser ->
        val idToken=googleUser.idToken // Send this idToken to your backend to verify
        signedInUser=googleUser
}) {
    Button(
        onClick = { this.onClick() }
    ) {
        Text("Sign-In with Google")
    }
}

You can check out full source code in this PR changes: https://github.com/mirzemehdi/FindTravelNow-KMM/pull/7

Integrating Google Sign-In into Kotlin Multiplatform was originally published in ProAndroidDev on Medium, where people are continuing the conversation by highlighting and responding to this story.

In this blog post I will share with you how to implement push notifications using Firebase in Kotlin Multiplatform (targeting iOS and Android platforms).

Push notifications play a crucial role in keeping users engaged and informed about important updates in your Kotlin Multiplatform (KMP) applications. While Firebase provides a robust platform for handling push notifications, integrating it seamlessly across both Android and iOS platforms in a KMP project can be a challenging task since Firebase doesn’t yet support Kotlin Multiplatform. For this purpose we will use the KMPNotifier library. I developed this push notification library to serve as the bridge between your Kotlin Multiplatform codebase and the implementation of push notifications. Whether you’re aiming to send local notifications or push notifications, KMPNotifier provides a clean and efficient API for managing the entire notification lifecycle. With KMPNotifier you can listen for token changes, subscribe or unsubscribe to topics, get current user token, or just send local notifications for any events.

Zeroth Step — Basic setup using Firebase official guideline

Before starting you need to setup basic things using the Firebase official guidelines (like initializing project in Firebase, adding google-services.json to Android, and GoogleService-Info.plist to iOS).
Firebase setup for iOS — https://firebase.google.com/docs/ios/setup
Firebase setup for Android— https://firebase.google.com/docs/android/setup

Gradle Setup

KMPNotifier is available on Maven Central. In your root project build.gradle.kts file (or settings.gradle file) add mavenCentral() to repositories, and google-services plugin to plugins.

plugins {
  id("com.android.application") version "8.1.3" apply false
  id("org.jetbrains.kotlin.multiplatform") version "1.9.20" apply false
  id("com.google.gms.google-services") version "4.4.0" apply false
}

repositories { 
  mavenCentral()
}

Then in your shared module you add dependency with latest version in commonMain. Latest version(https://github.com/mirzemehdi/KMPNotifier/releases):

In iOS framework part you need to export this library as well.

sourceSets {
  commonMain.dependencies {
    api("io.github.mirzemehdi:kmpnotifier:<version>") // in iOS export this library
  }
}
listOf(
        iosX64(),
        iosArm64(),
        iosSimulatorArm64()
    ).forEach { iosTarget ->
        iosTarget.binaries.framework {
            export(project("io.github.mirzemehdi:kmpnotifier:<version>"))
            baseName = "shared"
            isStatic = true
        }
    }

And in androidApp build.gradle.kts file you apply google-services plugin

plugins {
  id("com.android.application")
  id("com.google.gms.google-services")
}

Platform Setup

In both platforms on Application Start you need to initialize library using initialize method :

NotifierManager.initialize(NotificationPlatformConfiguration) //passing android or ios configuration depending on the platform

Android Setup

class MyApplication : Application() {
   override fun onCreate() {
       super.onCreate()
       NotifierManager.initialize(
           configuration = NotificationPlatformConfiguration.Android(
               notificationIconResId = R.drawable.ic_launcher_foreground,
           )
       )
   }
}

Also starting from Android 13(API Level 33) you need to ask runtime POST_NOTIFICATIONS in activity. I created a utility function that you can use in the activity.

val permissionUtil by permissionUtil()
permissionUtil.askNotificationPermission() //this will ask permission in Android 13(API Level 33) or above, otherwise permission will be granted.

iOS Setup
First, you just need to include FirebaseMessaging library to your iOS app from Xcode. Then on application start you need to call both FirebaseApp initialization and NotifierManager initialization methods, and setting apnsToken as below. Don’t forget to add Push Notifications and Background Modes (Remote Notifications) signing capability in Xcode.

import SwiftUI
import shared
import FirebaseCore
import FirebaseMessaging

class AppDelegate: NSObject, UIApplicationDelegate {
  func application(_ application: UIApplication,
                   didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
      FirebaseApp.configure() //important
      NotifierManager.shared.initialize(configuration: NotificationPlatformConfigurationIos.shared)
      
    return true
  }
  func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
        Messaging.messaging().apnsToken = deviceToken
  }
    
}
@main
struct iOSApp: App {
    
    @UIApplicationDelegateAdaptor(AppDelegate.self) var delegate
    
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

Usage

You can send either local or push notification.

Local Notification

val notifier = NotifierManager.getLocalNotifier()
notifier.notify("Title", "Body") //Sends local notification

Push Notification

Listen for push notification token changes -> In this callback method you can send notification token to the server.

NotifierManager.addListener(object : NotifierManager.Listener {
  override fun onNewToken(token: String) {
    println("onNewToken: $token") //Update user token in the server if needed
  }
})

Other useful functions

NotifierManager.getPushNotifier().getToken() //Get current user push notification token
NotifierManager.getPushNotifier().deleteMyToken() //Delete user's token for example when user logs out 
NotifierManager.getPushNotifier().subscribeToTopic("new_users") 
NotifierManager.getPushNotifier().unSubscribeFromTopic("new_users")

How to implement Push Notifications in Kotlin Multiplatform was originally published in ProAndroidDev on Medium, where people are continuing the conversation by highlighting and responding to this story.