Building a Modern Authentication System with Supabase, Ballerina, and Next.js

In this article, I'll share my journey of integrating Supabase with Ballerina as a backend and Next.js as the frontend framework to create a modern authentication system. This approach not only allows for a streamlined user experience but also leverages the power of JWT (JSON Web Tokens) for secure authentication.

Overview of the Tech Stack

Supabase: An open-source Firebase alternative that provides a backend-as-a-service, including authentication, database management, and real-time functionalities.
Ballerina: A programming language specifically designed for cloud-native application development, making it perfect for handling API integrations and microservices.
Next.js: A React-based framework that enables server-side rendering and static site generation, providing an excellent user experience.

Setting Up the Project

1. Initializing Supabase

I started by creating a Supabase project and setting up the database. I defined a users table with fields for the username and password. The password would be stored securely as a hash.

2. Connecting Ballerina to Supabase

In Ballerina, I created a service to handle user registration and login. Here’s a snippet of the code to establish a connection to the Supabase PostgreSQL database:

import ballerina/http;
import ballerinax/postgresql;

// Supabase DB connection config
configurable string host = "your_host";
configurable int port = 5432;
configurable string username = "your_username";
configurable string password = "your_password";
configurable string databaseName = "your_database";

service /auth on new http:Listener(9090) {
    final postgresql:Client dbClient;

    public function init() returns error? {
        self.dbClient = check new (host, username, password, databaseName, port);
    }
}

3. User Registration and Hashing Passwords

For user registration, I utilized the crypto module in Ballerina to hash the passwords securely. Here's how I handled user registration:

resource function post register(http:Caller caller, http:Request req) returns error? {
    json payload = check req.getJsonPayload();
    string username = (check payload.username).toString();
    string plainPassword = (check payload.password).toString();

    // Hash the password
    byte[] hashedPassword = check crypto:hashSha256(plainPassword.toBytes());

    // Insert the user into the database
    sql:ExecutionResult result = check self.dbClient->execute(
        `INSERT INTO users (username, password) VALUES (${username}, ${hashedPassword.toBase16String()})`
    );

    if result.affectedRowCount == 1 {
        check caller->respond({ message: "Registration successful" });
    } else {
        check caller->respond({ message: "Registration failed" });
    }
}

4. User Login and JWT Generation

For the login functionality, I queried the database to retrieve the hashed password, compared it with the entered password, and generated a JWT token upon successful authentication:

resource function post login(http:Caller caller, http:Request req) returns error {
    json payload = check req.getJsonPayload();
    string username = (check payload.username).toString();
    string plainPassword = (check payload.password).toString();

    // Retrieve the user from the database
    stream<record {|anydata...;|}, sql:Error?> resultStream = self.dbClient->query(
        `SELECT password FROM users WHERE username = ${username}`
    );

    // Verify the password and generate JWT token
    // (Code to validate the password and generate JWT)
}

5. Implementing the Frontend with Next.js

On the frontend, I built a registration page using React and styled it with Tailwind CSS. The form captures the username and password, sending the data to the Ballerina backend for processing.

Here’s a snippet of the registration form component:

import React, { useState } from 'react';

const RegisterPage = () => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  const handleSubmit = async (event) => {
    event.preventDefault();
    const response = await fetch('/auth/register', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username, password }),
    });
    const data = await response.json();
    // Handle response...
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} placeholder="Username" />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
      <button type="submit">Register</button>
    </form>
  );
};

export default RegisterPage;

Conclusion

This project has taught me the intricacies of handling authentication securely and effectively using modern technologies. Integrating Supabase with Ballerina and Next.js has provided me with a robust solution for user management.

I hope this article inspires you to explore similar integrations and improve your skills in building modern web applications. If you have any questions or feedback, feel free to reach out!

Blog