Forem: José Donato

My Journey with Hanko: How to Build a Financial App in Record Time

José Donato — Mon, 30 Oct 2023 12:25:43 +0000

TLDR:

Hanko.io was integrated into Budget Guru, enhancing security and accelerating overall development.
The ease of integration with Hanko.io allowed for a seamless and efficient implementation of a robust authentication system.
Hanko.io's customization options enabled alignment with the UI of Budget Guru, enhancing the overall aesthetic and user experience.
The synergy between Hanko.io, SvelteKit, and DrizzleORM was impressive, facilitating a smooth and efficient development process.
The use of Hanko.io allowed for a greater focus on the application's logic, leading to rapid development and implementation of numerous features.
Hanko.io's authentication solution significantly improved the user experience of Budget Guru, offering a revolutionary way of logging in - passkeys.
The decision to build Budget Guru as a web application ensured accessibility for all users, regardless of their device or location.
BudgetGuru is live on budgetguru.vercel.app and open source in here

1. Introduction

Welcome to the journey of building Budget Guru, an AI-powered personal finance mentor. This web application simplifies budgeting, tracking, and optimizing your finances, offering a unique and intelligent approach to personal finance management. This blog post serves as both an announcement of the open-source project and a testament to the ease of building it with Hanko.io, a modern open-source authentication solution. Currently, Budget Guru is in its proof-of-concept stage, with many exciting features and improvements in the pipeline.

Ever since I started managing my own finances, I've always felt a need for a budget-tracking application tailored to my own needs. The existing solutions I tried were helpful, but they always seemed to miss something. This personal experience, combined with my passion for web applications, led me to the idea of Budget Guru. I wanted to create an application that not only I could use, but anyone, anywhere, on any device with a web browser.

Write once, run anywhere.

2. The Challenge

Building a financial web application inherently comes with its unique set of complexities. The intricate nature of financial data and the need for precise calculations and projections demand a significant amount of time and attention. Ideally, you want to dedicate as much time as possible to the application logic, which is the heart of the application and directly impacts the user experience.

However, one cannot overlook the importance of a secure and reliable authentication system, especially in a financial application where sensitive data is involved. Implementing such a system can be a time-consuming and complex process, often diverting valuable resources away from the core logic of the application. Therefore, finding ways to streamline and simplify areas like authentication becomes crucial in order to maintain focus on enhancing the application's primary functionalities.

3. Discovering Hanko.io

My journey to Hanko.io began at the Web Summit 2022, where I had the pleasure of meeting Felix, the CEO of Hanko. Intrigued by the simplicity, security, and promise of integrating an authentication system with just a few lines of code, I was eager to explore what Hanko.io had to offer. The opportunity to build Budget Guru presented the perfect excuse to experiment with Hanko.io.
One of the standout features of Hanko.io is its free plan, a perfect launchpad for beginners. The paid plans, despite their extensive features, are priced affordably. Hanko.io also offers the flexibility of self-hosting, accommodating various needs.

In retrospect, I couldn't have made a better choice. Hanko.io's beautiful customizable components, SDKs, and APIs have not only powered the login and user management of Budget Guru but also exceeded my expectations.

4. Ease of Integration

Integrating Hanko.io into Budget Guru was both seamless and efficient. Even with no prior experience, I was able to implement a robust authentication system into our application with just a few lines of code, and in a matter of minutes. Here are some code snippets that illustrate this process.

// this is the code snippet that makes the login/register page

<script lang="ts">
  import { onMount } from "svelte";
  import { goto } from "$app/navigation";
  import { register } from "@teamhanko/hanko-elements";
  import { env } from "$env/dynamic/public";

  const hankoApi = env.PUBLIC_HANKO_API_URL;

  export let redirectUrl: string;

  const redirectAfterLogin = () => {
    goto(redirectUrl);
  };

  onMount(async () => {
    register(hankoApi).catch((error) => {
      // handle error
    });
  });
</script>

<hanko-auth on:onAuthFlowCompleted={redirectAfterLogin} />

// code snippet to logout users the application
<script>
  import { Hanko } from "@teamhanko/hanko-elements";
  import { goto } from "$app/navigation";
  import { env } from "$env/dynamic/public";
  import Icon from "./ui/Icon.svelte";
  const hankoApi = env.PUBLIC_HANKO_API_URL;

  const hanko = new Hanko(hankoApi);
  const logout = () => {
    hanko.user.logout().catch((error) => {
      // handle error
    });
    goto("/login");
  };
</script>

<button on:click={logout} class="_icon-btn">
  <Icon id="material-symbols-logout-rounded" class="w-6 h-6" />
</button>

The developer experience with Hanko.io is exceptional, largely due to their comprehensive documentation and guides. Despite using SvelteKit, I found their resources incredibly helpful, and it's worth noting they also provide guides for a wide range of other frameworks such as React, Next.js, and Angular. This accessibility and support truly underscore the top-notch quality of Hanko.io's offerings. You can find here all the integrations available Welcome to Hanko Docs - Hanko.

5. Focus on Logic

By leveraging Hanko.io for authentication, I was able to dedicate my attention entirely to the logical aspects of the application. Authentication is a complex process with many potential pitfalls, and getting it right is crucial for the security and reliability of any application. By entrusting this task to Hanko.io, a professional in this field, I was able to significantly reduce development times and complexity.

This decision allowed me to concentrate on creating the core features of Budget Guru, ensuring that the application is not only secure but also feature-rich and user-friendly. As we are still in the early stages of development, this focus on core functionality over backend complexities has been invaluable.

Moreover, it's important to note that handing off such a critical responsibility to professionals like Hanko.io is often a wise decision, especially when time and resources are limited. It not only ensures a high level of security for your application but also allows you to dedicate your efforts to enhancing the unique features of your product. With Hanko.io taking care of authentication, we can look forward to a lot more to come from Budget Guru.

Even though Budget Guru is just getting started, the use of Hanko has allowed me to focus more on the app's logic. In just a few days, I was able to implement a multitude of features:

A fully functional database system to save, edit, and insert transactions (either one by one or in bulk by uploading a CSV). This was largely due to the simplicity of DrizzleOrm. The deployment took less than 10 minutes, thanks to the excellent synergy between Drizzle and Turso database.
All pages widgets are now draggable and resizable, thanks to svelte-grid-extended. Click here for a demo of this.
The design is responsive for both desktop and mobile.
Accessible modals, toasts, and tabs have been implemented, thanks to melt-ui. I tried to follow a more mobile first approach since more than 95% of global users accessed the internet via mobile phones (ref). Therefore I tried to simulate the bottom modals that we are all used to in native mobile applications both for editing and adding transactions.
An extensive view of all transactions on a grid with sorting, pagination, filtering, and much more, has been made possible by ag-grid.
Multiple chart visualizations have been created using Chart.js.

This focus on the application's logic, made possible by Hanko.io, has allowed for rapid development and implementation of these features, and we can expect even more from Budget Guru in the future.

6. Customization

One of the standout features of using Hanko.io was the ability to customize the appearance of its components to align with the UI of Budget Guru. While Hanko provides several components with excellent default styling, it also offers extensive customization options, including font, colors, and much more. This demonstrates the system's versatility and adaptability to various design requirements. Here are some code snippets and screenshots that showcase this customization.

/* styling options you can customize with hanko directly from your CSS file */
hanko-auth,
hanko-profile {
  /* Color Scheme */
  --color: #ffffff;
  --color-shade-1: #707070;
  --color-shade-2: #1a1a1a;

  --brand-color: #D4AF37; /* Budget Guru Primary Color */
  --brand-color-shade-1: #C0A637;
  --brand-contrast-color: white;

  --background-color: transparent;
  --error-color: #ff4c4c;
  --link-color: #80b2ff;

  /* Font Styles */
  --font-weight: 400;
  --font-size: 16px;
  --font-family: Roboto, sans-serif; /* Budget Guru Font */

  /* Border Styles */
  --border-radius: 4px;
  --border-style: solid;
  --border-width: 1px;

  /* Item Styles */
  --item-height: 34px;
  --item-margin: 0.5rem 0;

  /* Container Styles */
  --container-padding: 30px;
  --container-max-width: 410px;

  /* Headline Styles */
  --headline1-font-size: 24px;
  --headline1-font-weight: 600;
  --headline1-margin: 0 0 1rem;

  --headline2-font-size: 16px;
  --headline2-font-weight: 600;
  --headline2-margin: 1rem 0 0.5rem;

  /* Divider Styles */
  --divider-padding: 0 42px;
  --divider-visibility: visible;

  /* Link Styles */
  --link-text-decoration: none;
  --link-text-decoration-hover: underline;

  /* Input Styles */
  --input-min-width: 14em;

  /* Button Styles */
  --button-min-width: max-content;
}

7. Synergy with Other Tools

My decision to use SvelteKit for Budget Guru was driven by my growing interest in Svelte and my desire to learn more about it. I was delighted to find that Hanko.io had a comprehensive guide for SvelteKit, which made the integration process even smoother.

One of the key questions I had was how Hanko.io would interact with my own database. This is where DrizzleORM, hosted on Turso, came into play. DrizzleORM is a TypeScript ORM that enhances productivity and works seamlessly with SQLite.

The flow I followed to create a user in my database after the user signs up for the first time on my SvelteKit app using Hanko components is as follows:

The user signs up using Hanko on the /login page.
If successful, the user gets redirected to /app.
The following code is executed, which calls an internal API route /api/auth with the user's email:

// everytime a user logs in into the application, i make a request to an internal API to make sure I already created a user on my database system for the respective hanko user
// this is important because i need to keep a match between hanko users and my own database users
onMount(async () => {
        const hankoApi = env.PUBLIC_HANKO_API_URL;
    const hanko = new Hanko(hankoApi);

    const { id, email } = await hanko.user.getCurrent();

    fetch("/api/auth", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ id, email }),
    });
  });
});

On the API endpoint, I check if the user already exists. If not, a new user is created. I also create a cookie to avoid hitting the database every time the /app is visited.

// checking whether the user already exists and if not create them. also saving into cookies to not make a call everytime
export async function POST({
    request,
    cookies
}: RequestEvent) {
    const hanko = cookies.get("hanko");
    const data = await request.json();
    const payload = await decodeJwt(hanko ?? "");

    if (payload.sub !== data.id) {
        return new Response(null, {
            status: 403,
        });
    }

    const userCookie = cookies.get("user");

    if (!userCookie) {
        console.log("POST api/auth: no user cookie found")
        const user = await createUserOrGetUser(data.id, data.email);

        cookies.set("user", JSON.stringify(user), {
            path: "/",
            maxAge: 60 * 60 * 24 * 7, // 1 week
            httpOnly: true,
            sameSite: "lax",
        });

        return json(user)
    }
    console.log("POST api/auth: user cookie found")

    return json(userCookie)
}

const createUserOrGetUser = async (id: string, email: string) => {
    const user = await db.select().from(users).where(eq(users.id, id)).get()

    if (!user) {
        console.log("POST api/auth: creating new user")
        const newUser = await db.insert(users).values({
            id,
            email,
        }).returning().get();

        return newUser;
    }

    console.log("POST api/auth: retrieving existing user")
    return user;
}

The synergy between Hanko.io, SvelteKit, and DrizzleORM was impressive, making the development process smooth and efficient. This combination of tools allowed me to focus on the logic and features of Budget Guru, while also ensuring a secure and efficient authentication process.

8. User Experience

Hanko.io has significantly enhanced the user experience of Budget Guru by introducing a revolutionary way of logging in - passkeys. Passkeys are a secure authentication technology that allows users to sign in to their online accounts without entering a password. They are simple and in my opinion more secure than the traditional passwords.

In addition to passkeys, Hanko also supports Google and other OAuth providers, as well as traditional password-based authentication. This flexibility allows users to choose the method that best suits their needs and preferences.

Moreover, I implemented some utils in the application to redirect users back to the last page they were in before their session expired. This feature was incredibly easy to implement with SvelteKit and Hanko.io, enhancing the user experience by maintaining the user's context even after session expiration.

// on every request inside the application I'm saving in the cookie the last page the user visited
const saveLastUrl = async (event: RequestEvent) => {
    const { cookies } = event;
    const lastUrl = cookies.get("lastUrl");
    if (event.url.pathname.startsWith("/app") && lastUrl !== event.url.pathname) {
        console.log("hooks: saving lastUrl", event.url.pathname, "previous", lastUrl)
        cookies.set("lastUrl", event.url.pathname, {
            path: "/",
            maxAge: 60 * 60 * 24 * 7, // 1 week
        });
    }
}

// after the user logs in I'm redirecting to this URL instead of the usual app homepage
export let redirectUrl: string;

  const redirectAfterLogin = () => {
    goto(redirectUrl);
  };

  onMount(async () => {
    // register or login the user
    register(hankoApi).catch((error) => {
      // handle error
    });
  });

Hanko also provides elements for managing your account, such as changing the passkey or the email associated with it. This makes account management a breeze for users, further improving the overall user experience.

The value of passkeys is evident in the case of Dashlane, a password manager that saw a 70% increase in conversion rate for signing-in with passkeys compared to passwords (ref). This demonstrates how adopting passkeys can significantly improve user engagement and satisfaction, making it a valuable addition to any business.

With Hanko.io, you're not just getting a secure and convenient authentication solution, you're also providing your users with a seamless and enjoyable user experience.

9. Conclusion

Incorporating Hanko.io into Budget Guru has enhanced security and accelerated overall development. The ease of integration, customization, and synergy with other tools makes Hanko.io an excellent choice for any modern web app development.

To summarize, here are the key takeaways from the blog post:

Hanko.io was integrated into Budget Guru, enhancing security and accelerating overall development.
The ease of integration with Hanko.io allowed for a seamless and efficient implementation of a robust authentication system.
Hanko.io's customization options enabled alignment with the UI of Budget Guru, enhancing the overall aesthetic and user experience.
The synergy between Hanko.io, SvelteKit, and DrizzleORM was impressive, facilitating a smooth and efficient development process.
The use of Hanko.io allowed for a greater focus on the application's logic, leading to rapid development and implementation of numerous features.
Hanko.io's authentication solution significantly improved the user experience of Budget Guru, offering a revolutionary way of logging in - passkeys.
The decision to build Budget Guru as a web application ensured accessibility for all users, regardless of their device or location.

Incorporating Hanko.io into Budget Guru has proven to be an excellent choice for modern web app development, offering a secure, convenient, and user-friendly authentication solution.

10. Future Plans

Starting today, Budget Guru is an open-source project under the MIT license, hosted on GitHub. I am committed to building this project in public and I invite anyone interested in contributing to join me in this endeavor.

While we are starting with simple transactions such as income and expenses, I am already working on expanding the functionality to include debt and investment tracking. This will allow users to have a comprehensive overview of their personal finances in one place.

One of the exciting features in the pipeline is the integration of AI-powered financial insights. I am particularly interested in incorporating open-source models (Nixtla's TimeGPT i’m looking at you 👀) to forecast expenses for example. This will enable Budget Guru to provide users with recommendations and advice based on their spending patterns and financial goals.

Another feature I am looking forward to implementing is image capabilities. This will allow users to scan a receipt, and the transaction details will be automatically added to their account. This feature aims to make tracking expenses even more effortless and accurate.

The issue of financial literacy is a global challenge, not confined to any one country. However, in light of the fact that Portugal ranks as one of the worst countries in Europe for financial literacy (ref), the importance of improving this becomes even more evident. It's my hope that Budget Guru, with its user-friendly tools and features, can contribute to improving financial literacy not just in Portugal, but all over the world, empowering individuals to take control of their financial future.

I am thrilled about the potential of Budget Guru and eagerly anticipate sharing more updates as the project progresses. This is just the beginning, and I am confident that with the support of the open-source community, we can transform Budget Guru into a valuable tool for personal finance management.

If you want to join me on this journey and stay updated with the progress of Budget Guru, make sure to follow me on Twitter or connect with me on LinkedIn. Your support and feedback will be invaluable in making this project a success.

Adding a service worker into your Next.js application

José Donato — Tue, 13 Oct 2020 19:26:26 +0000

I will start by doing a service worker (the brains behind progressive web applications) intro but if you already know all of that just skip to the next.js part (Section 2.)

Section 1. PWA and SW intro

Nowadays, users install in average zero mobile applications per months. Which means users install less native applications on their mobile devices. Since the web has a reach of three times more than native applications without compromising and requiring the users to install them, the perfect solution would be something that users can access with their web browser and if they want install it on their devices (if they don't they can always access it with their browser). This is what Progressive Web Applications (introduced by Google) try to achieve. They are just web applications that try to behave like native applications: work offline, receive push notifications, have good performance, etc.

The brain behind this new concept are the service workers: javascript files that act as a proxy in your web application. They can intercept the requests (and cache them), listen for events and do something when they happen. For example, we can cache certain assets when the service worker is installed and serve it directly through the service worker instead of making a trip to grab those assets every time they are needed.

This image from https://blog.clairvoyantsoft.com/service-workers-in-javascript-simple-demo-app-81efcdf2f2c4?gi=abbe01a65fba explains well what a service worker does:

Section 2. Adding a service worker to next.js

In the past years, to add a service worker to next.js application we had to use third party plugins such as next-pwa (https://github.com/shadowwalker/next-pwa) or next-offline (https://github.com/hanford/next-offline) or use a custom server. Don't take me wrong next-pwa and next-offline are great plugins but for certain situations we don't want/need all that abstraction.

About a year ago, Next.js 9.1 introduced the public directory support where we can store the files that will be mapped to the root of the domain. For example, if I'm running my application locally at http://localhost:3000 and store a file called sw.js inside public (public/sw.js) it will available at http://localhost:3000/sw.js. Therefore, we can reference it in our application and install the service worker without the need of a custom server.

The most simple service worker file can be:



//public/sw.js
self.addEventListener("install", function (event) {
  console.log("Hello world from the Service Worker 🤙");
});

Of course this service worker does nothing, only logs when it is installed, for more examples of service worker capabilities check here: https://serviceworke.rs/

After we have our service worker in place, we need to install it and we can do that when the page mounts. Next.js allows us to change the custom root document that involves all pages inside the pages directory by creating the file _app.js inside the same folder:



//pages/_app.js
import { useEffect } from "react"
function MyApp({ Component, pageProps }) {
  useEffect(() => {
    if("serviceWorker" in navigator) {
      window.addEventListener("load", function () {
       navigator.serviceWorker.register("/sw.js").then(
          function (registration) {
            console.log("Service Worker registration successful with scope: ", registration.scope);
          },
          function (err) {
            console.log("Service Worker registration failed: ", err);
          }
        );
      });
    }
  }, [])

  return <Component {...pageProps} />
}

export default MyApp

And that's it! The service worker will install in your next.js application the first time you visit the website.

Source code: https://github.com/jose-donato/with-service-worker
Demo (plan to add more SW features in the future): https://with-service-worker.vercel.app/

Any questions just ask me and if you want to know more about me visit https://jose-donato.me

Minimalist Approach to send Push Notifications with Expo

José Donato — Tue, 28 Jan 2020 04:09:28 +0000

Small tutorial to help you understand and send push notifications with Expo.

I developed a simple open source web application that helps sending push notifications with Expo. React and Material-UI were used and all the source code is available on github. Live demo: https://expo-notifications-tool.now.sh/.

Before diving into the web application, we need to understand push notifications and setup the backend server.

Reading expo documentation we need two main things to use Expo Push Notifications:

Getting a user's Expo Push Token: We achieve this by calling an endpoint (/token) on our server (explained below) when the expo mobile app is launched.
Calling Expo's Push API with the token when you want to send a notification: It was to facilitate the process in this step that I developed the web app. This web app calls another endpoint (/message) of the backend server and the backend server sends the notifications for all the devices.

The backend developed with NodeJS and expo-server-sdk-node is running in https://glitch.com/~easy-soup. Note that we need the endpoint available in a public URL to send the notifications. Glitch (❤️) makes this as simple as it gets.

const express = require("express");
const { Expo } = require("expo-server-sdk");
const app = express();
const expo = new Expo();
const cors = require("cors");

app.use(cors());
let savedPushTokens = [];
const PORT_NUMBER = 3000;

const handlePushTokens = ({ title, body }) => {
  let notifications = [];
  for (let pushToken of savedPushTokens) {
    if (!Expo.isExpoPushToken(pushToken)) {
      console.error(`Push token ${pushToken} is not a valid Expo push token`);
      continue;
    }

    notifications.push({
      to: pushToken,
      sound: "default",
      title: title,
      body: body,
      data: { body }
    });
  }

  let chunks = expo.chunkPushNotifications(notifications);

  (async () => {
    for (let chunk of chunks) {
      try {
        let receipts = await expo.sendPushNotificationsAsync(chunk);
        console.log(receipts);
      } catch (error) {
        console.error(error);
      }
    }
  })();
};

const saveToken = token => {
  console.log(token, savedPushTokens);
  const exists = savedPushTokens.find(t => t === token);
  if (!exists) {
    savedPushTokens.push(token);
  }
};

app.use(express.json());

app.get("/", (req, res) => {
  res.send("Push Notification Server Running");
});

app.post("/token", (req, res) => {
  saveToken(req.body.token.value);
  console.log(`Received push token, ${req.body.token.value}`);
  res.send(`Received push token, ${req.body.token.value}`);
});

app.post("/message", (req, res) => {
  handlePushTokens(req.body);
  console.log(`Received message, with title: ${req.body.title}`);
  res.send(`Received message, with title: ${req.body.title}`);
});

app.listen(PORT_NUMBER, () => {
  console.log(`Server Online on Port ${PORT_NUMBER}`);
});

Basically, on the server we have two endpoints listening to POST requests:

The first one receives and saves the tokens sent from each device running the expo app.
The second one handles the requests that will be received from the expo notifications tool, i.e., receives the title and body of the notification from the web app and sends the notification with this content for each device.

Now that we have the endpoints up and running on the URL https://easy-soup.glitch.me we can set it up on expo mobile app and expo notification tool.

Configuring expo mobile app to register the tokens:

First we need to create the function that will push the token when the app is started. Note that the PUSH_ENDPOINT contains the URL of the glitch endpoint.

//registerForPushNotifications.js
import { Notifications } from 'expo';
import * as Permissions from 'expo-permissions';

const PUSH_ENDPOINT = 'https://easy-soup.glitch.me/token';

const registerForPushNotifications = async () => {
  const { status } = await Permissions.askAsync(Permissions.NOTIFICATIONS);
  if (status !== 'granted') {
    alert('No notification permissions!');
    return;
  }

  // Get the token that identifies this device
  let token = await Notifications.getExpoPushTokenAsync();

  // POST the token to your backend server from where you can retrieve it to send push notifications.
  return fetch(PUSH_ENDPOINT, {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      token: {
        value: token,
      }
    }),
  });
}
export default registerForPushNotifications;

After, we need to call the function we created when the application mounts.

//App.js
import React, {useEffect} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import registerForPushNotifications from './registerForPushNotifications';


const App = () => {
  useEffect(() => {
    registerForPushNotifications()
  }, []);
  return (
    <View style={styles.container}>
      <Text>Notifications Example</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;

Snack containing the application code (also available in the github repo).

When the application is started and mounts, the glitch endpoint will be called and the token will be saved in the glitch server. The following image is a log in the glitch server telling that received the push token from the expo app.

Now we are ready to launch the expo notifications tool and start sending some notifications.

In the web app we just need to input the title and the body that we want to appear in the notification.

After we press the "send notifications" button, the web app will send a post request to the glitch endpoint /message with the title and the body. The glitch server goes through all the tokens saved and sends the notification for each one.

If everything works as expected, the notification will be received in all mobile phones that launched the expo application.

Please note that the server code hosted on glitch is minimalist and needs some improvement to be used in real applications.
I tried to make it as simple as possible because the main goal is to focus on how to send the notifications (with the web app tool) and not on how the tokens are stored.

It was my first "tutorial", hope you guys like it and help me improve it 😀