Firebase Google Sign-In Integration with Kotlin/Wasm
How to integrate Firebase authentication into Kotlin/Wasm projects
1Kotlin/Wasm and Firebase Integration
Integrating Firebase authentication with Kotlin/Wasm projects turned out more complex than expected. The main challenge is that Firebase-Kotlin-SDK doesn't support Wasm target. There's an open issue since 2023 and an unmerged prototype PR. This situation forces developers to work directly with Firebase JS SDK. However, this process provides a great opportunity to learn Kotlin/Wasm JS interop mechanisms.
2Gradle Setup and Dependencies
The process starts by adding wasmJs target to the project. Firebase JS SDK is included directly from npm. Important note: If the project also has js target using Firebase-Kotlin-SDK, these dependencies must be moved from commonMain to jsMain, as they won't resolve for Wasm. This configuration highlights the importance of dependency management between targets in Kotlin multiplatform projects.
3Firebase JS SDK Bridge Structure
To use Firebase with Kotlin/Wasm, two essential files are created: one for firebase/app and another for firebase/auth modules. The @file:JsModule annotation indicates these declarations come from npm modules. All JavaScript values are represented with JsAny because in Kotlin/Wasm, JS values live across a strict boundary. This bridge structure can be created with minimal code using external interfaces.
4Firebase Initialization and Configuration
In Kotlin/Wasm, js() function is used to create JS objects. Required parameters for FirebaseOptions (apiKey, authDomain, projectId, appId) are taken from Firebase console. The initializeApp function is called with these options to create FirebaseApp instance. Then Auth instance is obtained via getAuth. This process can be optimized with lazy initialization.
5Google Sign-In Function
The signInWithGoogle function works with signInWithPopup and receives callbacks for success/failure cases. Unlike Kotlin/JS, Promise callbacks must return JsAny?, so null is explicitly returned. For error cases, an additional js() helper is used to extract message from JsAny error object. Upon successful sign-in, user information (displayName, email or uid) is passed to the callback.
6Cross-Platform Sharing
If UI code is shared between targets, signInWithGoogle function can be defined as expect in commonMain. The Wasm target uses the implementation above, while JS target can keep delegating to Firebase-Kotlin-SDK. This approach maximizes code sharing in multiplatform projects while allowing platform-specific implementations.
7Browser Compatibility Issues
Safari blocks popup-based sign-in by default, and Firebase's signInWithRedirect fallback doesn't work well with Safari's tracking prevention either. Developers are advised to test first in Chrome, then decide how much to invest in Safari support. This situation emphasizes the importance of cross-browser compatibility in web development.
8Developer Ecosystem and Future
While Firebase integration for Kotlin/Wasm is currently in its early stages, companies like GitLive with their Firebase-Kotlin-SDKs are paving the way. Based on community feedback, guides for other auth providers might be created. These developments show that Kotlin's multiplatform capabilities and Wasm support are maturing steadily.
Original article: ProAndroidDev - Medium — Kotlin/Wasm ile Firebase Google Giriş Entegrasyonu