DEV Community: Sucipto

Build Queue Worker using Supabase Cron, Queue and Edge Function

Sucipto — Tue, 17 Dec 2024 07:16:00 +0000

As a developer, I've worked extensively with fullstack frameworks like Laravel and Phoenix Framework, both of which offer robust queue worker systems—Laravel Queue in Laravel and Oban in Phoenix. However, when building applications with Next.js or other JavaScript frameworks, I often found myself missing this essential feature.

Thankfully, Supabase recently introduced pgmq (a PostgreSQL-based message queue) and pg_cron integration into their platform. This release makes it possible to implement queue workers seamlessly.

In this post, I'll walk you through how to use Supabase as a queue worker backend by leveraging pgmq, Supabase Cron, and Edge Functions.

On many apps, there are situations where we need to send onboarding emails to users who have just signed up. (For email verification, Supabase Auth already handles this seamlessly.) For example, if a user signed up last week but has not yet created a product on our app, we might want to send a follow-up email with step-by-step guidance to help them get started.

Email Queue Worker

The main reason for putting emails on a queue is that some email providers enforce rate limits, and certain hosting providers (like Vercel) have execution timeouts (with the free tier only allowing a 10-second timeout). By putting email tasks in a queue, we can process them in the background without impacting the app's performance or user experience.

We will create an email queue worker using pgmq, pg_cron, and Supabase Edge Functions, which have a longer timeout limit (150 seconds on the free plan). You can find more details about the limits here.

Project Setup

Enable Queue and Cron Integration Go to the Supabase dashboard and navigate to the integrations page. Enable the Queue and Cron integrations for your project.

If you are enabling this on an older Supabase project, you may need to upgrade your Supabase instance.

This integration requires the pgmq extension, which is only available on PostgreSQL version 15.6.1.143 and higher.

Upgrade Your Supabase Instance If your project is running on an older PostgreSQL version, you will see a message prompting you to upgrade:

This integration requires the pgmq extension which is not available on this version of Postgres. The extension is available on version 15.6.1.143 and higher.

Simply click Upgrade and wait a few minutes. Once the upgrade is complete, you will be able to enable the Queue integration.

With the setup complete, we are now ready to implement our email queue worker.

Worker Function

Create a Supabase Edge Function using the Supabase CLI:

npx supabase functions new mail-worker

This command will generate a new file at ./supabase/functions/mail-worker/index.ts in your project directory. This file will serve as the foundation for our email queue worker.

Here is an example of the mail-worker function:

import { createClient } from "jsr:@supabase/supabase-js@2";

Deno.serve(async (req) => {
  const supabase = createClient(
    Deno.env.get("SUPABASE_URL") ?? "",
    Deno.env.get("SUPABASE_SERVICE_ROLE_KEY") ?? "",
    { db: { schema: "pgmq_public" } },
  );
  const queue_name = "emails";

  const { data, error } = await supabase.rpc("read", {
    queue_name,
    sleep_seconds: 60, // mark message invisible for 60 seconds
    n: 1, // number of messages to read
  });

  for (const q of data) {
    // Example processing queue message data
    await fetch("https://sandbox.api.mailtrap.io/api/send/22222", {
      method: "POST",
      headers: {
        Authorization: `Bearer YOUR_MAILTRAP_API_KEY`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        from: { name: "Supabase Worker", email: "system@yourapp.com" },
        to: [{ email: q.message.to }],
        subject: q.message.subject,
        text: q.message.content,
      }),
    })
      .then((r) => r.text())
      .then((r) => console.log("send result", r));

    const del = await supabase.rpc("delete", {
      queue_name,
      message_id: q.msg_id,
    });
  }

  return new Response("ok", {
    headers: { "Content-Type": "application/json" },
  });
});

Deploying Your Function

To deploy your function, use the Supabase CLI with the following command:

npx supabase functions deploy mail-worker --project-ref <your-supabase-project-ref>

Once the deployment is successful, your function will be listed on the Supabase dashboard. You can view and manage your deployed functions at:Supabase Functions Dashboard

Disabling JWT Verification

To allow the function to be triggered by pg_cron without requiring user authentication, you’ll need to disable JWT verification:

Select your deployed function from the dashboard.
Scroll down to the "Security" section and toggle off "Enforce JWT Verification".

This step ensures that the function can be triggered by pg_cron without needing user information.

Setup Queue

The next step is to create a mail queue:

Go to Queue Settings and enable "Expose Queues via PostgREST" so that we can interact with it using the Supabase client SDK.
Navigate to the Queue Dashboard.
Click "Create a Queue" and provide a name, such as "emails".
Select "Basic" for the queue type, then click "Create Queue".

Setup Cron

Next, set up a cron job to trigger the function:

Go to the Cron Jobs Dashboard.
Click "Create Job".
Set the schedule (e.g., "30 seconds") or use the cron format.
For Type, select "Edge Function".
Choose POST as the method.
Select the Edge Function: "mail-worker" or your deployed function name.
Set the timeout to "5000" (in milliseconds), or adjust to a higher value if your job requires more time.
Click "Create Cron Job".

Put Message to Queue

To put message into queue from your app you can initialize supabase client with custom db schema:

  const queue = createClient(
    Deno.env.get("SUPABASE_URL") ?? "",
    Deno.env.get("SUPABASE_SERVICE_ROLE_KEY") ?? "",
    { db: { schema: "pgmq_public" } },
  );

And then call send rpc call with queue name and message payload

  await queue.rpc("send", {
    queue_name: "emails",
    message: {
      to: "testing@local.dev",
      subject: "Hello World",
      content: "Hello World",
    },
  });

Function Breakdown

The main idea behind this function is to handle queue processing in a way that ensures each message is only processed once at a time. Here's how it works:

Read from the Queue: The function starts by reading a message from the queue. It retrieves the next available item for processing.
Mark as Invisible: Once the message is fetched, the function marks it as "invisible" for a certain period. This ensures that no other worker can process the same message while it's being worked on. This temporary invisibility prevents duplicate processing and ensures that only one worker handles each message at a time.
Process the Queue Message: The main task of the function is to process the message data. In this case, the function sends an email using a mail provider. For this demo, Mailtrap is used as the email provider. The email content and recipient details are extracted from the message data, and the function sends the email.
Success Case: If the email is sent successfully, the function proceeds to delete the message from the queue. This marks the message as fully processed, and it is removed from the list of pending tasks.
Failure Case: If an error occurs while sending the email (for example, if the email provider fails), the function throws an error. In this case, the message is not deleted from the queue. Instead, it becomes available again for other workers to retry, ensuring that failed messages can be retried without being lost.

This approach ensures reliable and fault-tolerant processing of queue messages, where each task is only handled once, and failed tasks can be retried until successful.

Build Link Shortener with Supabase and Nuxt

Sucipto — Tue, 23 Apr 2024 14:17:34 +0000

Supabase recently announced the addition of aggregate functions to their PostgREST API, a feature I've been eagerly awaiting since creating my previous hackathon project, Supalytic. with this feature, we can reduce the amount of Postgres functions (called via RPC) and use aggregates directly from the client SDK.

In this blog post, we will create a link shortener app (similar to bit.ly or dub.co) using NuxtJS and Supabase as the backend, leveraging Supabase's auth and database features. The Nuxt ecosystem already has an official Supabase module, making it easier to integrate Supabase with NuxtJS.

TLDR;

Create Supabase & NuxtJS project
Install Supabase (@nuxtjs/supabase) & Nuxt UI (@nuxt/ui) module
Use new supabase feature: Aggregate function sum()
Source Code: suciptoid/supalink
Demo: spll.lat

Initialize Project

To initialize the project, we need to create a Supabase project and grab the anonKey and supabaseUrl.

After creating the project, you'll find the anonKey and supabaseUrl in the project's settings. We'll need these values to connect our NuxtJS application to the Supabase backend.

Next, we'll set up the NuxtJS project:

# Create a new NuxtJS project
npx nuxi init supalink

# Change to the project directory
cd supalink

# Install the Supabase NuxtJS module
npm install @nuxtjs/supabase

In the nuxt.config.js file, add the Supabase module and configure it with the anonKey and supabaseUrl from your Supabase project:

export default {
  // ...
  modules: [
    '@nuxtjs/supabase'
  ],
  supabase: {
    url: 'YOUR_SUPABASE_URL',
    key: 'YOUR_ANON_KEY'
  }
}

Or you can just put on environment variable as:

SUPABASE_KEY=yourAnonkey
SUPABASE_URL=yoursupabaseinstanceurl

With the project initialized and the Supabase module configured, we're ready to start building our link shortener application.

Database Migration

In this project we will create a few database migration using supabase cli command:

npx supabase migration new <migration_name>

Database migration in this porject will create table: links, analytics, orgs, org_users and create track_link database function. (source)

Nuxt UI

To make our development process easier and ensure a polished user interface, we'll use Nuxt UI, a comprehensive UI library designed specifically for NuxtJS applications. By incorporating Nuxt UI, we can rapidly build our link shortener app with pre-built, high-quality components, aligning with Supabase's motto: "Build in a weekend, scale to millions."

Authentication

For authentication, we will use Supabase Auth and need to enable some auth providers on the Supabase project dashboard. For this project, I will use GitHub and Google providers.

Nuxt Supabase already provides an auth middleware for protected routes, which we can configure in nuxt.config.ts.

supabase: {
  redirectOptions: {
    login: "/auth/login",
    callback: "/auth/redirect",
    include: ["/org(/*)?"],
  },
},

The redirectOptions configuration defines the behavior for authentication redirects:

login: The path to redirect to for login.
callback: The path to handle the redirect after successful authentication.
include: An array of paths that require authentication.

Detailed documentation can be found here.

With this configuration, Nuxt Supabase will handle the authentication flow and provide convenient methods to interact with the Supabase Auth API.

Create Link

This step involves creating a dedicated Nuxt page and a Vue component to manage link creation. We'll utilize Nuxt UI components like Modal, Form, useCopyToClipboard(), and Notification (Toast) to provide a user-friendly experience.

The form submission handler ensures data validation and informative feedback:

//...
const link = await supabase
  .from("links")
  .insert({
    org_id: orgId,
    url: state.link,
    slug: state.slug,
  })
  .select("id,slug")
  .single();

if (link.error) {
  if (link.error.code === "23505") {
    toast.add({
      id: "create_link_error",
      title: "Error creating link",
      description: "Link already in use",
    });
  } else {
    toast.add({
      id: "create_link_error",
      title: "Error creating link",
      description: link.error.message,
    });
  }
  return;
}
// ...

We need handle duplicate entry error to make sure slug is not used by another user with this code:

if (link.error.code === "23505")

Finally, the code copies the generated short URL to the clipboard using useCopyToClipboard(), displays a success toast notification, and closes the modal component.

const { copy } = useCopyToClipboard();
//...
copy(`${url.origin}/${link.data!.slug}`, {
  title: "Link Created",
  description: "Link created and copied to clipboard",
});

Link Redirect

When a user clicks a shortened URL, we need to send them to the original target URL. To handle this, we create a special Nuxt page at /pages/[link].vue.

This page component uses the [link] part of the URL to capture the shortened slug. It then queries the links table in Supabase using the slug (which is indexed for faster lookups).

If the slug is found, the code grabs the target URL and redirects the user there. Otherwise, the user is redirected to the homepage / our landing page.

<script setup lang="ts">
import type { Database } from "~/supabase/types";

const route = useRoute();

const supabase = useSupabaseClient<Database>();
const link = await supabase
  .from("links")
  .select("id,org_id,slug,url")
  .eq("slug", route.params.link)
  .single();

if (link.data) {
  // Navigating to link
  const track = await supabase.rpc("track_link", { link_id: link.data.id });
  await navigateTo(link.data.url, { external: true });
} else {
  await navigateTo("/");
}
</script>

<template>
  <div>Redirecting...</div>
</template>

Additionally, it calls a Supabase function using supabase.rpc("track_link", { link_id: link.data.id }) to track the link click and update an hourly click counter in the database.

Link Analytics

As mentioned earlier, Supabase now supports aggregate functions directly within the Supabase SDK (via PostgREST). We can leverage this feature to efficiently calculate total link clicks for our project.

The provided code snippet showcases how to achieve this:

let query = supabase
  .from("analytics")
  .select("total:clicks.sum(), links!inner(org_id)")
  .eq("links.org_id", route.params.org_id);

if (route.query.link) {
  query = query.eq("links.id", route.query.link);
}

return await query.single();

The provided code snippet queries the analytics table using the sum() function to calculate the total number of clicks on current Org. Additionally, if the URL contains a link query parameter, it further filters the results to include statistics for that specific link using route.query.link.

Deployment

For deployment we can use Cloudflare Pages or another deployment platform, you can read more deployment guide on Nuxt Docs.

Conclusion

This exploration showcased the smooth integration of Supabase with NuxtJS 3. Supabase + Supabase Nuxt modules proved invaluable, saving development time.

Shoutout to Supabase! Huge congratulations to @supabase_io for being Generally Available (GA) on this week and also release some anouncement about new features including: Anonymous Login and S3 Compatible Storage API.

Build Multiplayer Cursors with Supabase & SvelteKit

Sucipto — Fri, 22 Dec 2023 07:35:00 +0000

As an open-source alternative to Firebase, Supabase has excellent features for building multiplayer real-time applications (which firebase doesn't have). Alongside the capability to listen to data changes in real-time, Supabase also has broadcast and presence features that can be used without involving the database at all.

Thanks to the Phoenix framework that powers the Supabase Realtime feature. Phoenix, an Elixir web framework, comes equipped with built-in broadcast (channel) and presence features.

With this feature, I can build real-time multiplayer apps without worrying about the backend handling websocket complexities. In this blog post, I will create a demo showcasing the utilization of Supabase Realtime features using SvelteKit.

Create SvelteKit Project

For a quick demo, I won't go into the tiny details of project setup (spoiler alert: the source code is included at the end of the post). In this project, I followed these steps:

Create Svelte Kit Project
Install Supabase JS SDK
Install TailwindCSS for styling

The objective is to build a real-time multiplayer typing racer game, where players can type together and witness multiple cursors on the screen.

Player Presence

In this game, even guests (anonymous players) can join, and users can also log in using their Google accounts, thanks once again to Supabase for its Auth system. In this scenario, I need to generate a presence ID to assign to player data for more control, if we don't specify presence id, supabase will generate it randomly for you.

import { readable } from 'svelte/store';
export const presenceId = readable<string>(crypto.randomUUID());
export const room = writable<string>('global');

This presence ID will be utilized in channel creation using the presence key configuration:

$channel = supabase.channel(`room:${$room}`, {
  config: {
    presence: {
      key: $presenceId,
    },
    broadcast: {
      self: true,
    },
  },
});

I've also set the room ID in the global store, currently defaulting to global for now.

After channel initialized, we can setup event handler and then subscribe to channel.

$channel
  ?.on("presence", { event: "sync" }, () => {
    const presences = $channel!.presenceState();

    const presencePlayers = Object.entries(presences).map(([id, presence]) => {
      const p = presence.at(0);

      return {
        id,
        is_me: $presenceId == id,
        ...p,
      } as Player;
    });

    players.set(presencePlayers);
  })
  .on("broadcast", { event: "typing" }, ({ payload }) => {
    players.update((old) => {
      return old.map((player) => {
        if (player.id == payload.id) {
          return {
            ...player,
            wpm: payload.wpm,
            word_index: payload.word_index,
            letter_index: payload.letter_index,
          };
        }
        return player;
      });
    });
  })
  .subscribe(async (status) => {
    if (status == "SUBSCRIBED") {
      const track = await $channel?.track({
        online: new Date().toISOString(),
        user_id: $user?.id,
        user_name: $user?.user_metadata.full_name,
      });
    }
  });

When the application loads, it subscribes to the $room channel and tracks presence. Player names will appear to other players if they are already logged in; otherwise, they will be shown as guests.

During the presence sync event (when a new player joins the game), the player list will be updated.

When the typing event is broadcasted, player data will be updated, including words per minute (WPM), word index, and letter index.

This realtime updated data will update the cursor UI, here is the snippet:

{#each display as { word, typed, correct, passed }, i}
    <span
        class="relative {correct && passed
            ? 'text-blue-500'
            : !passed
                ? 'text-gray-500'
                : 'text-red-500'}"
    >
        {#if currentWordIndex === i}
            <Cursor {word} {typed} {wpm} name={$user?.user_metadata.full_name || 'Me'} />
        {:else if playerIndex[i]}
            <Cursor
                {word}
                typed={word}
                me={false}
                wpm={playerIndex[i].wpm ?? '~'}
                name={playerIndex[i].user_name}
            />
        {:else}
            {word}
        {/if}
    </span>
{/each}

This will display both our cursor and another player's cursor. Here's the screenshot:

This demo project can be found at: Github Repository - Demo

Create AI Embedding app using Supabase & SvelteKit

Sucipto — Tue, 10 Oct 2023 05:53:16 +0000

A few weeks back, Supabase shared an exciting customer story about the Quivr app. Quivr allows users to have dynamic conversations with their second brain or knowledge base, effortlessly importing content from various formats like text, PDFs, web page URLs, and audio. Quivr’s backend runs on Python, utilizing FastAPI and Langchain, while the frontend is powered by Next.js. In this post, we’ll simplify the process by creating a Quivr-like app using SvelteKit and Supabase.

We’ll kick off with my previous Supabase project, Supalytic (a runner-up in the Supabase hackathon, check it out here). It’s already configured with Supabase auth and a database tailored for SvelteKit SSR.

For a foundational understanding of pg_vector and embedding integration with Supabase, refer to the informative blog post by Supabase. It’s an excellent resource to get started.

Feature Plan

In building this app, our aim is a simple knowledge base. Users can input and store text, generate embeddings using OpenAI, save the vectors on Supabase, and use them later for contextual chat. To keep things straightforward, we’re focusing on text content for now.

Building App

As mentioned earlier, I’m utilizing the starter project from Supalytic. This saves me from setting up the web app portion since it already comes equipped with Tailwind CSS, Supabase authentication, and a pre-configured database. I’ve streamlined the code by removing any unrelated components from Supalytic.

The next step involves creating a migration using the Supabase CLI. You can find detailed instructions in the Supabase documentation here. Below is our finalized migration script for the app:

-- Enable the pgvector extension to work with embedding vectors
CREATE EXTENSION IF NOT EXISTS vector;

-- Create a table to store your documents
CREATE TABLE documents (
 id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
 knowledge_id UUID,
 content TEXT, 
 embedding VECTOR(1536) -- 1536 works for OpenAI embeddings, change if needed
);

-- Add a HNSW index for the inner product distance function
CREATE INDEX ON documents
USING hnsw (embedding vector_ip_ops);

-- Create a table to store knowledge entries
CREATE TABLE knowledges (
 id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
 user_id UUID,
 title VARCHAR,
 created_at TIMESTAMP DEFAULT NOW()
);

-- Create or replace a function to match documents with knowledge references
CREATE OR REPLACE FUNCTION match_documents (
 knowledge_id UUID,
 query_embedding VECTOR(1536),
 match_threshold FLOAT,
 match_count INT
)
RETURNS TABLE (
 id UUID,
 knowledge_id UUID,
 content TEXT,
 similarity FLOAT
)
LANGUAGE SQL STABLE
AS $$
 SELECT
 documents.id,
 documents.knowledge_id,
 documents.content,
 1 - (documents.embedding <=> query_embedding) AS similarity
 FROM documents
 WHERE documents.knowledge_id = knowledge_id
 AND 1 - (documents.embedding <=> query_embedding) > match_threshold
 ORDER BY similarity DESC
 LIMIT match_count;
$$;

With the recent release of HNSW index support by Supabase (check it out here), we’re excited to implement it in our app for enhanced performance. Let’s leverage this feature to optimize the efficiency of our application.

The next crucial step is to generate embeddings when content is added to the knowledge base. Here’s a snippet of the action handler from our project:

import type { Actions } from './$types';
import OpenAI from 'openai';
import { env } from '$env/dynamic/private';

export const actions = {
 default: async ({ request, params, locals: { db } }) => {
 const form = await request.formData();
 const content = form.get('content')?.toString() ?? '';

 const openai = new OpenAI({ apiKey: env.OPENAI_KEY });

 const embeds = await openai.embeddings.create({
 input: content,
 model: 'text-embedding-ada-002'
 });

 const [{ embedding }] = embeds.data;

 const response = await db.from('documents').insert({
 content,
 embedding,
 knowledge_id: params.id
 });
 }
} satisfies Actions;

At this stage, we’ve successfully stored knowledge base content with embedding vectors in the Supabase database. Moving forward, our next step is to incorporate queries from the knowledge base into the user’s chat context. Let’s seamlessly integrate these elements for a more dynamic and interactive experience.

To enhance interactivity, we’ll utilize the OpenAI stream response. Luckily, SvelteKit simplifies the handling of such streams through Server-Sent Events (SSE), facilitating the seamless transmission of streamed responses from the server to the client UI. Here’s how it looks in TypeScript:

import OpenAI from 'openai';
import type { RequestHandler } from './$types';
import { encode } from 'gpt-tokenizer/esm/model/gpt-3.5-turbo';
import { env } from '$env/dynamic/private';

export const POST: RequestHandler = async ({ request, params, locals: { db } }) => {
 const form = await request.json();
 const content = form.prompt;

 const openai = new OpenAI({ apiKey: env.OPENAI_KEY });

 const embeds = await openai.embeddings.create({
 input: content,
 model: 'text-embedding-ada-002'
 });

 const [{ embedding }] = embeds.data;

 const { data: documents, error } = await db.rpc('match_documents', {
 knowledge_id: params.id,
 query_embedding: embedding,
 match_threshold: 0.78, // Choose an appropriate threshold for your data
 match_count: 10 // Choose the number of matches
 });
 console.log('error', error);

 const maxToken = 1500;
 let tokenCount = 0;
 let contextText = '';

 console.log('documents count', documents?.length);

 if (documents) {
 for (let i = 0; i < documents.length; i++) {
 const doc = documents[i];
 const encoded = encode(doc.content);
 console.log('doc id', doc.id, 'token length:', encoded.length);
 tokenCount += encoded.length;

 if (tokenCount > maxToken) {
 break;
 }

 contextText += `${doc.content.trim()}\n---\n`;
 }
 }

 console.log('context', contextText);
 console.log('----\n\n');

 let prompt = `You are a very enthusiastic Assistant who loves to help people! Given the following sections from the personal knowledge base, answer the question using only that information, outputted in markdown format. If you are unsure and the answer is not explicitly written in the documentation, say "Sorry, I don't know how to help with that".`;
 prompt += `

 Context sections: 
 ${contextText}

 Question: """
 ${content}
 """

 Answer as markdown (including related code snippets if available) and use same language as question language event if you dont know:
 `;

 const complete = await openai.completions.create({
 model: 'gpt-3.5-turbo-instruct',
 prompt,
 max_tokens: 1500,
 temperature: 0,
 stream: true
 });

 const stream = new ReadableStream({
 async start(controller) {
 for await (const part of complete) {
 const line = part.choices[0]?.text || '';
 controller.enqueue(line);
 }
 controller.close();
 },
 cancel() {
 console.log('abort stream');
 complete.controller.abort();
 }
 });

 return new Response(stream, {
 headers: {
 'Content-Type': 'text/event-stream'
 }
 });
};

And that concludes the overview. Delving into detailed code explanations would exceed the scope of a single post. However, if you’re keen on exploring the nitty-gritty details, feel free to explore the GitHub repository: Knowledge AI. Also, check out this snapshot of my interaction with the notes:

Happy coding!

Migrating to Server Side Supabase Auth

Sucipto — Tue, 25 Apr 2023 11:34:05 +0000

My winning hackathon project, Supaque, is a http queue & schedule service built on top of Supabase's PostgreSQL database and function. The project was built using the Deno Fresh framework and deployed on Deno Deploy platform. While building the project, I initially used the authentication flow on the client side, using supabase auth SDK.

During Supabase Launch Week 7, a new feature was released for the Supabase Auth PKCE flow. This new flow allows for more secure authentication on the server side of applications. With this release, I decided to migrate the authentication flow of my Supaque project to use the new PKCE flow on the server side.

There is a new Auth helper available for handling the PKCE flow on the server side, which can be found at https://github.com/supabase/auth-helpers. This helper is currently available for Next.js, SvelteKit, and Remix applications. Although I was using the Deno Fresh framework for my project, I was able to leverage the available documentation to write my own helper to integrate the PKCE flow into my server-side authentication process. Despite not having an official helper for Fresh framework, the process was still relatively straightforward and the documentation was helpful in guiding me through the integration.

Show me the Code

Here is my previous callback handler on client side:

  useEffect(() => {
    const url = new URL(window.location.href);
    const param = new URLSearchParams(url.hash);

    const token = param.get("#access_token");
    param.delete("#access_token");
    if (token) {
      param.set("access_token", token);
      globalThis.location.replace(`/auth?${param.toString()}`);
    } else if (param.get("error_code")) {
      setMessage(param.get("error_description") || "Unable to login");
      setIsError(true);
    }
  }, []);

And now, using PKCE auth flow, it's can handled on backend code

const code = url.searchParams.get("code");
const { data, error } = await supabase.auth.exchangeCodeForSession(code);

And this is my custom helper for Deno Fresh Framework

export const supabaseSSR = (req: Request, res: Response) =>
  createClient<Database>(
    Deno.env.get("SUPABASE_URL") as string,
    Deno.env.get("SUPABASE_KEY") as string,
    {
      auth: {
        detectSessionInUrl: false,
        flowType: "pkce",
        storageKey: "pkce",
        storage: {
          setItem: (key, value) => {
            const val = encode(value);
            setCookie(res.headers, {
              name: key,
              value: val,
              sameSite: "Lax",
              maxAge: 60 * 60 * 24 * 7 * 1000,
              path: "/",
            });
          },
          getItem: (key) => {
            const cok = getCookies(req.headers);
            const val = cok[key];
            if (!val) {
              return null;
            }
            const decoded = decode(val);
            const decodedStr = new TextDecoder("utf-8").decode(decoded);
            return decodedStr;
          },
          removeItem: (key) => {
            setCookie(res.headers, {
              name: key,
              value: "",
              sameSite: "Lax",
              expires: new Date(0),
              path: "/",
            });
          },
        },
      },
    }
  );

For those who are interested, the source code for Supaque is available on my GitHub repository at https://github.com/suciptoid/supaque. You can see how I integrated the new PKCE flow into the server-side authentication process and explore the codebase to learn more about how the project works. Feel free to leave any feedback or suggestions in the repository's issues section.

Originally published at https://sucipto.id.

Use HJKL as navigation globally

Sucipto — Fri, 20 Sep 2019 11:18:48 +0000

Previously i’m using xmodmap to re-map shortcut CapsLock + HJKL to navigate using vim mode globally. But, it’s don’t work anymore on Wayland. And then, I found some answer on askubuntu to modify xkbd keymap.

Edit following file :

/usr/share/X11/xkb/symbols/us

Make sure create a backup first. And add this code on first block

 # replace Caps with AltGr
 key <CAPS> { [ISO_Level3_Shift] };
 # Add vim cursor keys to be accessed with AltGr
 key <AB02> { [x, X, Delete, Delete] };
 key <AC02> { [s, S, KP_Enter, KP_Enter] };
 key <AC03> { [d, D, Next, Next] };
 key <AC04> { [f, F, BackSpace, BackSpace] };
 key <AC06> { [h, H , Left, Left] };
 key <AC07> { [j, J, Down, Down] };
 key <AC08> { [k, K, Up, Up] };
 key <AC09> { [l, L, Right, Right] };
 key <AD07> { [u, U, Prior, Prior] };
 key <AE03> { [3, numbersign, Home, Home] };
 key <AE04> { [4, dollar, End, End] };

Re-Login to take effect.

My Vue + TailwindCSS Configuration

Sucipto — Fri, 03 May 2019 15:35:42 +0000

Tailwind is "A utility-first CSS framework for rapidly building custom user interfaces", and it's not UI kit. So you need to build your own ui based on Tailwind css class.

For example, in bootstrap if we need to style button,

<button class="btn btn-primary">
    Button
</button>

In Tailwind,

<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
    Button
</button>

Hmm, it's looks bootstrap win in this case. But wait, if you need customize button theme tailwind will win. Or you can see the button example in tailwind documentation site to see more case.

Vue + Tailwind + PurgeCSS

npm install tailwindcss @fullhuman/postcss-purgecss --save-dev
npx tailwind init tailwind.js
mkdir src/assets/css
touch src/assets/css/tailwind.css fill with

@tailwind preflight;
@tailwind components;
@tailwind utilities;

Edit src/main.js and import your tailwindcss

// Tailwind CSS
import '@/assets/css/tailwind.css'

By default, tailwind file size is bigger than bootstrap, you can see the explanation here. So we need PurgeCSS to remove unused css class in our production compiled css.

Edit postcss.config.js

const tailwindcss = require('tailwindcss')

const autoprefixer = require('autoprefixer')

const purgecss = require('@fullhuman/postcss-purgecss')

class TailwindExtractor {
  static extract (content) {
    return content.match(/[A-Za-z0-9-_:\/]+/g) || []
  }
}

module.exports = {
  plugins: [
    tailwindcss('./tailwind.js'),

    autoprefixer({
      add: true,
      grid: true
    }),

    purgecss({
      content: [
        './src/**/*.html',
        './src/**/*.vue',
        './src/**/*.js',
        './public/**/*.html'
      ],
      extractors: [
        {
          extractor: TailwindExtractor,
          extensions: ['html', 'vue', 'js']
        }
      ]
    })
  ]
}

Originaly posted on: My Blog Post