The problem vocalis solves

Most digital tools require lots of clicking, typing, and reading screens, which makes them hard or impossible for visually impaired people to use on their own. Vocalis solves this by letting anyone control tasks like creating documents, managing calendars, or handling code with just their voice—removing the need for visual navigation and making complex workflows truly accessible and independent.

People can use it for: Vocalis lets anyone control their development and productivity tools using just their voice. You can create and update Notion documents, manage your calendar and reminders, perform GitHub operations like creating branches or pull requests, send team updates on Slack or Discord, and even automate documentation—all without typing or clicking. This makes it especially useful for visually impaired users or anyone who wants to save time by automating complex workflows with a single voice command.

Challenges we ran into

The Challenge:
Building Vocalis, a voice-controlled platform for DevOps automation, presented unique security challenges. Our most critical hurdle came when integrating Civic Auth to secure our voice command system.

During early testing, we discovered our authentication flow was completely broken. Despite users successfully completing the Civic Auth process, our app couldn't detect their authenticated status and kept showing the login screen. Worse yet, this authentication failure created a security vulnerability where voice commands could potentially execute without proper verification.

After hours of debugging, we traced the issue to a seemingly simple mistake: we were using incorrect property names from Civic Auth's API. Our code was looking for user and loading properties, but Civic's useUser() hook actually provides authStatus and isLoading.

The Solution:
Once we identified the issue, the fix was straightforward but impactful. We updated our code to correctly destructure the properties:

// Before: Incorrect properties causing auth failures
const { user, loading } = useUser()
const isAuthenticated = user !== null

// After: Correctly using Civic Auth's API
const { authStatus, isLoading } = useUser()
const isLoaded = !isLoading
const isSignedIn = authStatus === 'authenticated'

We also added detailed logging to verify authentication status in real-time, which proved invaluable during testing.

This seemingly small fix transformed our platform's security model. Now, users authenticate once through Civic's accessible interface, and their voice commands are properly validated against their authenticated session.