I'm building a macOS app in a week with Tauri and Supabase.

I'm building a macOS app in a week with Tauri and Supabase.

Aris Ripandi's photo
Aris Ripandi
ยทAug 26, 2022ยท

2 min read

Play this article

The app was built only in 5 days within the Supabase Launch Week 5 Hackathon. The story begins with my small idea to create an authenticator application that can be synced to any device and any platform (macOS, iOS, Linux, Windows, and Android).

An authenticator is an application to generate TOTP or HOTP code used for securing online accounts with 2FA (two-factor authentication). Why? Because the combination of username or email with password is never enough.

The Story Begin

Many authenticator apps already exist on Google Play Store and Apple App Store. Most of them have synchronization features but are limited to backup only or sync with the same platform (ie: iOS or Android only). I'm using one of them for years and at this moment I'm feeling bothered when switching to a mobile device every time login into a website or online service. So, I created Otentik Authenticator. A Google authenticator compatible app built within Supabase Hackaton.

I want to make this app available on many platforms. Currently only support for macOS, other platforms will be released in the future. To realize synchronization capability I choose Supabase. I don't need to create an API for the backend because Supabase has an API, even better they have SDK. Because Supabase uses PostgreSQL for the database engine and is hosted at AWS, I have no worries about the API reliability.

SCR-20220826-l7o.jpeg

The Tech Stack

The desktop app of Otentik was built using Tauri. Tauri uses Rust and can be combined with various frontend libraries like React, Vue, Svelte, etc. In this case, I'm using React.js. For styling the UI Tailwind CSS, TailwindUI, and HeadlessUI are used. Otentik uses AES256 to encrypt sensitive data and uses the user's password for the encryption salt. So, I can't decrypt or see the user's data.

To maximize Rust, instead of using NPM packages for the encryption library I'm using Rust libraries from the Crates.io and creating some abstraction from that packages. This method can reduce the bundle size because "you know node_modules, huh"? ๐Ÿ˜„ Also, this can increase the security of the app, reversing engineering compiled binary much harder.

Final Result

This is resource usage of Otentik Authenticator.

image.png

Surprises

Hey man, Otentik Authenticator is a winner for Supabase Launch Week 5 Hackathon in the "Most Technically Impressive" category. I'm so glad! ๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰

image.png

You wanna try it? Check out at otentik.app. Also, this project is Open Sourced at Github.