Bill Panda

A simple application that helps you keep track of your recurring bills

Comment

Inspiration

This project was created for my need to have a bill reminder system. I called it BillPanda, and it simply lets me check my recurring bills in a Google-Calendar like way.

What it does

You can easily add recurring bills, expenses, budgets, and create projections.

How we built it

I've had this project running for at least a year now. it's something I built during my down time at work and it has served me well so far. I saw this hackathon and realized it would be a good opportunity to learn about Okta. At my day job (Leasecake) we are looking at security more and more. Currently, our app is running our own type of authentication, but ultimately we'd like to switch to something more robust. However, my main goal wasn't work-related. I just thought it would be awesome to learn about OAuth a bit more, and have fun.

Challenges we ran into

The documentation for the Okta Identity Engine could be significantly improved. I often spent time reading through Okta source code. I read the ASP.net, Go Lang, Node, PHP, and Vue source code just so I could learn more about the different authentication flows. Here's how I learned the system:

  1. Created my Okta account and became familiar with the admin panel.
  2. There was no Laravel (PHP framework) tool I could use to begin integrating Okta Identity Engine, so I pulled down the PHP example.
  3. The PHP example had a simple redirect flow, so I integrated that into BillPanda.
  4. I noticed the experience of a Okta-hosted login page was...not my favorite. I didn't have control over what it looked like, and it didn't feel polished.
  5. However, this was the quickest path, so now I wanted to learn how to add user sign ups. Finding this documentation was difficult, as I often ran into documentation about other APIs. Eventually, I found that it was through the ProfileEnrollment.
  6. Once that was set up, my app worked. But I still wanted a more polished feel, so I looked into the Okta Sign In Widget.
  7. The sign in widget was a joy to use at first. The login worked using the implicit OAuth flow (at the time I had no idea what implicit vs PKCE was).
  8. I found that the sign in widget didn't provide a registration form. Whenever I clicked on it, it would fail to load a form. I submitted a GitHub bug report for this here: https://github.com/okta/okta-signin-widget/issues/2188
  9. The guidance of the contributors and Okta mentioned that I had to use something called interactionCodeFlow. I went ahead and integrated this.
  10. This taught me about PKCE, since interactionCodeFlow requires PKCE. Boy was that a hassle to integrated, but very well worth the effort.
  11. The login form and registration work just fine now. It's all integrated into my app, and it looks great :). Feel free to check it out here: https://billpanda.app

Accomplishments that we're proud of

What we learned

Learning more about OAuth 2.0 than I ever thought I wanted to know. Turns out, I really did enjoy the lessons along the way. Still, after learning about authorization flows, claims, and PKCE, I know I've just scratched the surface. I really want to learn how to add authorization with Okta, as this is the last piece missing to really considering Okta as a full-fledge solution for all my authentication and authorization needs. I know the system supports it, just a matter of learning it.

What's next for Bill Panda

I'd like to write a post on DEV.to regarding this experience. I also want to create a Laravel package for integrating OktaAuth. A lot of the code I've written can be easily extract into a package so other developers can use this.

Regarding Bill Panda though, I'd eventually like to add email notification support. It's not much of a reminders system if you have to constantly log into it to check your bills. That, and some polish. Eventually, a native app. I currently am working on one using SwiftUI.

Share this project:

Updates