Forem: Kalama Ayubu

How to Add a Confetti Celebration Effect to Your Web App Using canvas-confetti🎉

Kalama Ayubu — Mon, 30 Jun 2025 07:25:10 +0000

Have you ever interacted with an app where, after a successful action, suddenly — PUHH!! 🎉🎉🎊🎊 — you're greeted with a celebratory confetti explosion and a congratulatory message modal? Just like a real-life celebration!

How did that make you feel?
Personaly, it makes me feel amazing! 🥰

Whether you're submitting a form, completing a task, or unlocking a new feature, these tiny UI animations add a layer of joy that transforms a basic action into an experience. And guess what?
You can easily implement that magic too, using a tiny JavaScript library called canvas-confetti. Let me show you how.

To Begin With...

Start by installing the canvas-confetti library:
npm i canvas-confetti.
Now let’s create a reusable confetti component to use across your app.

💡Note: In this guide, we're using Next.js, but canvas-confetti is framework-agnostic. You can use it in React, Vue, Svelte, plain HTML/JavaScript, or any other frontend setup. It works just as well anywhere you can access the browser's canvas API.

Reusable Confetti Component

📂/components/CongratsCard.jsx

'use client';

import { useEffect } from "react";
import confetti from "canvas-confetti";
import { Link as LinkIcon, X } from "lucide-react";
import Link from "next/link";

const CongratsCard = ({ title, message, action1, action2, onClose}) => {
  useEffect(() => {
    confetti({
// Confetti configuration options
      particleCount: 500,
      spread: 70,
      origin: { y: 0.6 },
      gravity: 0.6,
    });
  }, []);

  return (
    <div className="fixed inset-0 flex items-center justify-center backdrop-blur-sm bg-black bg-opacity-80 z-50">
      <div className="bg-white p-6 pt-4 rounded-xl shadow-xl text-center max-w-sm w-full">
        {/* Close button */}
        <button 
          onClick={onClose}
          className=" text-gray-500 p-0 m-0 bg-transparent hover:text-gray-800 transition translate-x-[164px]"
        >
          <X className="w-5 h-5" />
        </button>

        <h2 className="text-2xl font-bold text-green-600">{title}</h2>
        <p className="text-gray-500 mt-4">{message}</p>
        <div className="flex items-center justify-center gap-4 mt-6">
          <Link href={action1.href}>
            <button className="px-5 py-2 bg-green-500 text-white rounded-xl hover:bg-green-600">
              {action1.label}
            </button>
          </Link>

          <Link href={action2.href}>
            <button className="hover:scale-95 text-black bg-white border rounded-xl px-5">
              <span className="flex items-center gap-2">
                <LinkIcon className="w-[14px]"/> {action2.label}
              </span>
            </button>
          </Link>
        </div>
      </div>
    </div>
  );
};

export default CongratsCard;

Add the CongratsCard into your page

Now, import and use the CongratsCard component in your page, providing it with the required props requires.
📂 /page.js

'use client';

import CongratsCard from "@/components/CongratsCard"
import { useState } from "react";

const CongratsPage = () => {
    const [showCongrats, setShowCongrats] = useState(true);
  return (
    <div>
        {showCongrats && (
            <CongratsCard 
                title={"🎉 Congratulations!"}
                message={'Your portfolio has been published successfully!'} 
                action1={{label: 'View Portfolio', href: '/your-link-here'}}
                action2={{label: 'Copy Link', href: '/your-link-here'}}
                onClose={() => setShowCongrats(false)} // close handler
            />
        )}
    </div>
  )
}

export default CongratsPage

The Result

Why Use Confetti in Web Apps?

This tiny effect is not just visual fluff — it boosts the user experience and leaves an emotional impact. Here’s what confetti brings to the table:

Celebrates Success (e.g., form submission, purchase, level-up)
Delights Users Emotionally
Improves Engagement and Retention
Adds Personality to Your Brand
Instant, Positive UI Feedback
Lightweight & Easy to Use

Bonus: Customizing Your Confetti
The canvas-confetti library has dozens of configurable options you can tweak:

particleCount
spread
angle
gravity
origin
shapes, colors, ticks, and more...

Explore the full list of configuration options on canvas-confetti docs, play around with them and see what pleases you most.

🥂 Conclusion

And there you have it — a smooth and stylish celebration effect for your app that gives users real-time, surprising emotional feedback through UI. Who doesn’t love a good surprise?🎉🎉.

So now, it’s your turn...
Go make your users smile. 😊

What’s your favorite subtle UX effect? Drop it on the comments below.

HttpOnly Cookies 🍪

Kalama Ayubu — Sun, 15 Jun 2025 17:28:52 +0000

If you have looked at the banner above carefully, you probably already understand what HttpOnly cookies are 👌 — and this should be the end of this post 😂😂.
But let's break it down anyway...

What are HttpOnly Cookies?

HttpOnly cookies are cookies that cannot be accessed or modified by client-side javaScript(javaScript in the browser). They’re server-side only, which means only your backend can set, read or delete these cookies.

Why do HttpOnly Cookies Matter?

Security🔏
Cookies often hold sensitive data like:

Authentication tokens
Session IDs
Refresh tokens
User data

If this info is accessible via frontend JavaScript, opens the door to client-side threats like:

XSS (Cross-Site Scripting)
Malicious browser extensions
Session hijacking
Rogue scripts in your frontend

Using the HttpOnly flag prevents frontend access, reducing attack surfaces.

How to Set an HttpOnly Cookie

Let’s say you’re setting a cookie in a Next.js API route (or any backend framework):

cookieStore.set('your-cookie-name', cookieValue, {
  path: "/", // Available throughout the app
  httpOnly: true, // Keeps it hidden from client-side JS
  secure: process.env.NODE_ENV === "production",
  sameSite: 'lax',
  maxAge: 60 * 60 * 3, // Expires in 3 hours
});

Boom! You now have a cookie that’s:

scoped correctly
secure over HTTPS
immune to frontend peeking
and automatically expires

Now, try to access it from the frontend using document.cookie or js-cookie. library
Let me give you a hint: It won’t work. At all. 😏

Just to Be Clear...
I intentionally focused only on the HttpOnly way of doing things — not on how to work with cookies from scratch.

Why?
Because going too deep would make the post unnecessarily large and potentially boooring...
And I hate seeing myself bored 😩..

Wrapping up

So here’s your takeaway:
If your cookies store sensitive data, make them HttpOnly.
Keep them server-side, and sleep better at night 🛏️.

Thy cookies shall be safe.
happy coding 🚀

Want to share your thoughts or ask a question?
Drop a comment below — I’d love to keep the conversation going!

Supabase Triggers Explained (with Real Use Cases)

Kalama Ayubu — Thu, 22 May 2025 07:21:22 +0000

Wait, today, I learnt subapabe triggers. That's what has triggered🚀 me to do this post😂. Here is a guide on what triggers are, what they do and how to make them work.

What is a trigger
A trigger is a special function in a database that automatically execute when a certain event happens — like when a row is inserted, updated, or deleted. Think of a trigger as an event listener for your database.

Why triggers
Triggers offload repetitive logic from your application. Instead of your app manually checking if something changed and then acting on it, the database handles it automatically.

A simple use case
Suppose you have a _secondary _table that depends on data from a _primary _table.
Instead of manually checking the _primary _table every time a new row is inserted — and then querying/inserting into the _secondary _table — you can use a trigger to listen to inserts on the _primary _table and automatically populate the _secondary _table. Hope its not confusing😕.

Syntax of a trigger

-- Create the function
DROP FUNCTION IF EXISTS function_name() CASCADE;

CREATE FUNCTION function_name()
RETURN TRIGGER AS $$ -- This function will be attached to a trigger

DECLARE
-- Optional: Declare any variables that will be used
variable1 DATATYPE;
varibale2 DATATYPE;

BEGIN
-- The logic of your function goes here
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;

-- Create the trigger
CREATE TRIGGER ON trigger_name
AFTER INSERT ON schema.primary_table
FOR EACH ROW -- Runs once for each inserted row
EXECUTE FUNCTION function_name();

Line-by-line explanation of the syntax

DROP FUNCTION IF EXISTS function_name() CASCADE; - Drops any function named function_name to avoid the "duplicate function error" when the function is redefined or runed multiple times. CASCADE ensures that any trigger attached to this function is also droped.
CREATE FUNCTION function_name() - Creates the function
RETURN TRIGGER AS $$ - Its like saying "hey, his function will be attached to a trigger"
$$ LANGUAGE plpgsql SECURITY DEFINER;
- LANGUAGE plpgsql- The function is written in postgress sql procedural language.
- SECURITY DEFINER - Specifies that the function runs with the privilage of the user who created it, not the one who triggered it. For example, Let’s say: You have a table logs that normal users can't write to. You create a trigger function with SECURITY DEFINER that inserts into logs. When a user inserts data into another table, the trigger fires — and the log is saved, even though that user doesn’t have permission to write directly to logs table.

A real-world example
Let’s say you want to automatically add a user’s profile into a profiles table when they sign up via Supabase Auth.

-- Step 1: Drop old function if exists
DROP FUNCTION IF EXISTS handle_new_user() CASCADE; -- Here, cascade removes any trigger using this function

-- Step 2: Create the new function
CREATE FUNCTION handle_new_user()
RETURNS TRIGGER AS $$ -- This function will be attached to a trigger
-- Variables to hold the number of existing users and assign the appropriate role
DECLARE
  existing_users_count INTEGER;
  assigned_role TEXT;
BEGIN
  -- Debugging info
  RAISE NOTICE 'NEW.id: %, NEW.email: %', NEW.id, NEW.email;

  -- Raise an error if email is not recieved
  IF NEW.email IS NULL THEN
    RAISE EXCEPTION 'Email is null – cannot insert profile';
  END IF;

  -- Count existing users
  SELECT COUNT(*) INTO existing_users_count FROM auth.users;

  -- Role logic
  IF existing_users_count = 1 THEN
    assigned_role := 'admin';
  ELSE
    assigned_role := 'user';
  END IF;

  -- Insert into profiles
  INSERT INTO public.profiles(id, email, role)
  VALUES (NEW.id, NEW.email, assigned_role);

  RETURN NEW;

EXCEPTION
  WHEN OTHERS THEN
    RAISE;
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;

-- Step 3: Create the trigger
CREATE TRIGGER on_auth_user_created
AFTER INSERT ON auth.users -- Trigger fires after the action(insertion to the auth.users table)
FOR EACH ROW -- Runs once for each inserted raw
EXECUTE FUNCTION handle_new_user(); -- Connect the table to the trigger function

Isn't that amazing?
Now your database responds to events like a pro — automatically, securely, and efficiently.

Would you mind saying something before you leave?
Please say something 😂.
Anyway...
Have a beautiful day, my friend 🤗.

Rich text editor with React Quill in Next.js.

Kalama Ayubu — Sat, 05 Apr 2025 17:25:11 +0000

If you’ve ever used editors like Markdown, you probably know how frustrating it can become — editing in one format, then previewing something that looks completely different.

A rich text editor is an interface that allows advanced styling options like bold, italic, bullet points, font typefaces, and text sizing — plus the ability to embed images, hyperlinks, and other media — giving you a What You See Is What You Get (WYSIWYG) experience.

Why rich text editors

WYSIWYG: What you see is exactly what you get in the final output.
Media Embedding: Insert images, videos, and links easily.
User-Friendly: Intuitive for both technical and non-technical users.
Versatile: Ideal for blogs, emails, and documentation.

Rich text editors are widely used in content management systems for creating and formatting blog posts, articles, and other web content (e.g., WordPress, Drupal).

In this guide, we’ll use React Quill to create our rich text editor. The original react-quill package is no longer actively maintained — but luckily, there’s a forked and actively maintained version called react-quill-new, and is up to date.

Creating the editor

We’ll build the editor in a few simple steps.

Setting up a nextjs project
On your favorite code editor run npx create-next-app to bootstrap a nextjs project.
Install the required dependency
npm install react-quill-new

On our root layout of our next.js project, we import the css file for the react-quill-new editor in order to be accessed globally. Here we are going to use snow theme.

📁 layout.js

import 'react-quill-new/dist/quill.snow.css'; // snow theme

export const metadata = {
    title: 'React text editor',
    description: 'What you see is what you get text editor with react quill',
}

const RootLayout = ({children}) => {
  return (
    <html>
        <body>
            {children}
        </body>
    </html>
  )
}

export default RootLayout

The next thing is to create a component that will hold the editor, let's call it ReactEditor. Here, we are going to include only the common features of a rich text editor, but there is much more and you can find them on react quill documentation.

📁 components/ReactEditor.jsx

"use client";

import ReactQuill from "react-quill-new";

// This modules object configures editor features like toolbar
const modules = {
  // toolbar what tools appear in the UI
  toolbar: [
    [{ header: [1, 2, 3, 4, 5, false] }],
    ["bold", "italic", "underline"],
    [{ color: [] }, { background: [] }],
    ["blockquote", "code-block"],
    [{ list: "ordered" }, { list: "bullet" }],
    [{ align: [] }],
    [{ size: ["small", false, "large", "huge"] }],
    ["link", "image"],
  ],
};

// Defines what is preserved in the content when editing
// (The functionality of the toolbar tools)
const formats = [
  "header",
  "bold",
  "color",
  "background",
  "italic",
  "underline",
  "blockquote",
  "code-block",
  "list",
  "bullet",
  "align",
  "size",
  "link",
  "image",
];

const ReactEditor = () => {
  return (
    <div className="max-w-[1000px] mx-auto mt-10">
      <ReactQuill
        theme="snow"
        modules={modules}
        formats={formats}
        placeholder="Write something awesome..."
      />
    </div>
  );
};

export default ReactEditor;

Add the ReactEditor component into your desired page.

📁 page.js

import ReactEditor from "@/components/ReactEditor"

const Homepage = () => {
  return (
    <div>
        <h1 className="text-2xl text-center">Our awesome editor</h1>
        <ReactEditor/>
    </div>
  )
}

export default Homepage

With that, our awesome editor is ready — simple and effective.

If you're saving the editor’s content to a database or using it in a different page (like a preview page), consider using a state management library (such as Redux Toolkit, Zustand, or any other) to persist the content.

Also, if the editor or its content needs to be used in a server component, be sure to import react-quill-new dynamically and render it only on the client side — since react-quill-new relies on browser-specific features so as to escape that notorious SSR error. In that case, your import in the ReactEditor component would look like this:

import dynamic from "next/dynamic";
import "react-quill-new/dist/quill.snow.css"; // Import the snow theme styles
const ReactQuill = dynamic(() => import("react-quill-new"), { ssr: false }); // Only load this component on the client side, not on the server.

Conclusion
That’s it — a basic yet smooth and functional WYSIWYG editor using react-quill-new in Next.js. Feel free to expand the features as needed and integrate it into your content workflows.

Happy coding.

Push notifications with Next.js + FCM(Firebase Cloud Messaging)

Kalama Ayubu — Sat, 29 Mar 2025 05:33:25 +0000

Keeping users informed and engaged is crucial (of course, you know it 😂) for any great application, product or system. That’s where push notifications come in—delivering instant updates directly to users, even when the app is closed.

We are going to build our own(push notification) with nextjs and FCM. The brilliant point is that FCM is completely free to use, even for commercial applications... and yeah, I love free stuff😋.

Overview: What We’ll Do 👨🏼‍💻

Set up an FCM project: - Comprehensive guide on how to set up a Firebase Cloud Messaging project.
Ask for notification permission: - Prompt the user for permission; this step is crucial since notifications require explicit user consent.
Register a service worker: - If permission is granted, we register the service worker. This ensures that background push events can be handled even if the app is closed (not actively in use).
Retrieve the FCM token: – Once the service worker is registered, we request an FCM token.This token acts as the unique address for Firebase to deliver push notifications to this specific device(where the service worker is registered), even when the app is closed.
Store the token: - Store the token to your database sync with the client-side and be able to send notifications to the appropriate client. In this case we are going to use supabase, but feel free to use your favorite database.
Trigger notification: - Use a backend service to send push messages, which then delivers notifications to the subscribed users through the service worker.

With these steps, our push notification system will be ready to roll.

Enough talk, let's build 🚀

Setting up a FCM project

Head over to your firebase console and "Create a firebase project", continue with the other steps and ensure to disable google analytics(unless you really need it). Then hit "Create project" its all pretty straight foward.
Enable Cloud messaging and choose web as you platform, add a nickname for your project, add firebase SDK to your project using npm install firebase.
Copy the configuration code and paste it in your firebaseConfig file and ensure that it only runs on the client-side, like this:

/lib/firebase/firebaseConfig.js

// Initialize Firebase for the frontend (Client-Side)
import { getMessaging, getToken, onMessage } from "@firebase/messaging";
import { initializeApp } from "firebase/app";

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

// Ensure to initialize Firebase only when in the client-side
let messaging;
if (typeof window !== "undefined" && "navigator" in window) {
  const app = initializeApp(firebaseConfig);
  messaging = getMessaging(app);
}

export {messaging, getToken, onMessage }

Environment variables

Create a .env.local file at the root directory and add the environment variables. We will walk step-by-step on where to get them. Get the first 6 variables from the firebaseConfig file.
Next, go to your project settings in firebase and navigate to service account, scroll down to "Generate new private key" then "Generate key". This will download a json file with authentication credentials that allow secure interactions with firebase messaging services.
Don't save the json file anywhere in your project, I would recommend you to copy the values that are relevant for our project i.e., "private_key_id", "private_key" and "client_email" then safely delete it.
The last variables are the VAPID keys (public and private). Back to your project settings(hope this is the last time 🤗), navigate to cloud messaging and scroll down to web configuration, copy the "key pair"(this is the public key), click the more horizontal icon to generate the private key and copy it too.

Double check that every variable is present(should be 12 in number) and they are consistent to nextjs conventions. Your final .env.local should look like this:


# Firebase SDK credentails for front-end interactions
NEXT_PUBLIC_FIREBASE_API_KEY="YOUR_API_KEY"
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="YOUR_AUTH_DOMAIN"
NEXT_PUBLIC_FIREBASE_PROJECT_ID="YOUR_PROJECT_ID"
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET="YOUR_STORAGE_BUCKET"
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID="YOUR_MESSAGING_SENDER_ID"
NEXT_PUBLIC_FIREBASE_APP_ID="YOUR_APP_ID"
NEXT_PUBLIC_FIREBASE_PRIVATE_KEY_ID="YOUR_VAPID_PUBLIC_KEY"
NEXT_PUBLIC_FIREBASE_VAPID_PUBLIC_KEY="YOUR_VAPID_PUBLIC_KEY"

# Firebase Admin SDK Private Key (for server authentication)
FIREBASE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\nYOUR_PRIVATE_KEY_HERE\n-----END PRIVATE KEY-----\n"

# Firebase SDK credentials for server-side interactions
FIREBASE_VAPID_PRIVATE_KEY="YOUR_VAPID_PRIVATE_KEY"
FIREBASE_PROJECT_ID="YOUR_PROJECT_ID"
FIREBASE_CLIENT_EMAIL="YOUR_CLIENT_EMAIL"

Ensure to replace every placeholder with your actual credentials.
Having that in place, you can now close your firebase tab, close your .env.local file, and lets continue 🚶🏼‍♂️‍➡️.

Service worker file

On the public directory, create a service worker file.
⚠️ Important: Service workers run on a separate thread and cannot directly access environment variables. Ensure you hardcode your actual credentials in this file instead of relying on environment variables.

/firebase-messaging-sw.js

// Purpose: Handle incoming push notifications with firebase

importScripts("https://www.gstatic.com/firebasejs/10.11.1/firebase-app-compat.js");
importScripts("https://www.gstatic.com/firebasejs/10.11.1/firebase-messaging-compat.js");

// Initialize Firebase with your project credentials
firebase.initializeApp({
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    appId: "YOUR_APP_ID",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID"
})

// Initialize FCM to enable this(sw) to receive push notifications from firebase servers
const messaging = firebase.messaging()

// Listen to background messages from firebase servers
messaging.onBackgroundMessage((payload) => {
    // Extract the required details from the payload
    const notificationTitle = payload.notification?.title || "Notification";
    const notificationOptions = {
        body: payload.notification?.body || "You have a new message. Please check it out",
        icon: "/assets/icon.webp" || payload.notification?.icon ,
        data: { url: payload.fcmOptions?.link || "/" }, // The notification will redirect to the homepage("/") when clicked. Fell free to redirect to whatever page you want to.
    };

    // Display push notification
    self.registration.showNotification(notificationTitle, notificationOptions);
});

// Handle notification click events
self.addEventListener("notificationclick", (event) => {
    event.notification.close();
    const targetUrl = event.notification.data?.url || "/";

    event.waitUntil( 
        clients.matchAll({ type: "window", includeUncontrolled: true }) /* Get all open browser tabs controlled by this service worker */
        .then((clientList) => {
            // Loop through each open tab/window
            for (const client of clientList) {
                if (client.url.includes(targetUrl) && "focus" in client) {
                    return client.focus(); // If a matching tab exists, bring it to the front
                }
            }
            // If no matching tab is found, open a new one
            return clients.openWindow(targetUrl);
        })
    );
});

Ask for notification permission

/lib/firebase/requestNotificationPermission.js

// Purpose: Request notification permission, retrieve FCM token and save it
import { getToken, messaging, } from "./firebaseConfig";
import { saveFcmToken } from "@/actions/notification/firebase/saveFcmToken";

export const requestNotificationPermission = async () => {
    try {
        const permission = await Notification.requestPermission() // Request notification permission

        if (permission !== "granted") {
            console.warn("Notification permission denied.");
            return;
        }

        // Register the service worker from firebase-messaging-sw.js
        const registration = await navigator.serviceWorker.register("/firebase-messaging-sw.js")
        console.log("Service Worker registered:", registration);

        // Request FCM token for the browser/device & link to the service worker
        const token = await getToken(messaging, {
            vapidKey: process.env.NEXT_PUBLIC_FIREBASE_VAPID_KEY,
            serviceWorkerRegistration: registration // Link to service worker, allowing FCM to deliver notifications properly
        })

        if (!token) {
            console.warn("Failed to retrieve FCM token.");
            return;
        }

        // Save the token to supabase
        const res = await saveFcmToken(token)
        if (!res.success) {
            console.error("Error saving token:", res.error);
            return
        }
    } catch (error) {
        console.error('Error requesting permission:', error)
    }
}

Create a component that will call the requestNotificationPermission function.

/utils/notification/firebase/NotificationPermission.jsx

"use client";
import { useEffect } from "react";
import { usePathname } from "next/navigation";
import { requestNotificationPermission } from "@/lib/firebase/requestNotificationPermission";

const NotificationPermission = () => {
  // Ask notification permission only if user is a student
  const pathname = usePathname();

  useEffect(() => {
    if (pathname.includes("student")) {
      const subscribeUser = async () => {
        await requestNotificationPermission();
      };

      subscribeUser();
    }
  }, [pathname]);

  return null; // No UI, just runs logic
};

export default NotificationPermission;

Add the component (NotificationPermission) to the homepage of your project or whenever you would like the notification permission to be asked from.

/app/layout.js

import "../styles/globals.css"
import NotificationPermission from "@/utils/notification/firebase/NotificationPermission"

const RootLayout = ({ children }) => {
  return (
    <html lang="en">
          <body>
              { children }
              <NotificationPermission/>
          </body>
    </html>
  )
}

export default RootLayout

Store FCM token

Let's now create the saveFcmToken file. We previously called this function when permission was granted inside requestNotificationPermission. Here, we will use next.js Server Actions with Subapase to store the FCM token. However, feel free to use your preferred storage solution.

/actions/notification/firebase/saveFcmToken.js

'use server'

import { createClient } from "@/lib/supabase/server"

// Purpose: Save the retrieved FCM token into Supabase database
export const saveFcmToken = async (token) => {
    const supabase = await createClient()

    const { error } = await supabase
        .from('push_subscriptions')
        .upsert({ endpoint: token });

    if (error) {
        console.log('Error saving FCM token:', error)
        return { success: false, error: error.message}
    } 

    return{ success: true, message: 'FCM Token saved successfully' }
}

Trigger notification

Now, what remains is an event to trigger the pushing of notifications. Since pushing of notifications happens in the server-side, we will start by creating a firebaseAdmin file to enables server-side interactions. Install firebase admin sdk npm i firebase-admin.

/lib/firebase/firebaseAdmin.js

// Purpose: Initialize Firebase Admin SDK for the backend (Server-Side)
import admin from 'firebase-admin'

const serviceAccount = {
    type: "service_account",
    project_id: process.env.FIREBASE_PROJECT_ID,
    private_key: process.env.FIREBASE_PRIVATE_KEY.replace(/\\n/g, '\n'), // ".replace()" Converts escaped "\n" back into actual newlines for proper parsing
    client_email: process.env.FIREBASE_CLIENT_EMAIL,
}

// Ensure that firebase is initialized once
if (!admin.apps.length) {
    try {
        admin.initializeApp({
            credential: admin.credential.cert(serviceAccount),
        });
        console.log('Firebase Admin Initialized Successfully');
    } catch (error) {
        console.error('Firebase Admin Initialization Failed:', error);
    }
}

export default admin;

Create the function to send notifications

/lib/firebase/sendNotification.js

import admin from "@/lib/firebase/firebaseAdmin";

// Purpose: Send push notification when an event occurs in Supabase
export const sendNotification = async (title, body, recipients) => {
    try {
        const response = await admin.messaging().sendEachForMulticast({
            tokens: recipients.map(recipient => recipient.endpoint),
            notification: { title, body }
        });

        console.log(`Notification sent! Success: ${response.successCount}, Failures: ${response.failureCount}`);

        if (response.failureCount > 0) {
            response.responses.forEach((res, index) => {
                if (!res.success && res.error.code === 'messaging/registration-token-not-registered') {
                    console.warn(`⚠️ Invalid token found: ${recipients[index].endpoint}`);
                }
            });
        }
    } catch (error) {
        console.error('Error sending notifications:', error)
    }
}

At this point, you can call sendNotification function whenever there is a need for notifying users. Think of real-world scenarios where notifying users is necessary. Keep in mind that this must be done on the server-side.
For example, a blog platform may need to notify the users whenever there is a new blog, it would look like this:

/actions/blog/create-blog

'use server'

export async function createNewBlog() {
   // Your logic for creating new blog here

   // Get subscribers' tokens (the ones we store using _saveToken()_)

   // Notify the users of the new blog
      await sendNotification("New content", "A new blog has been 
      posted. Check it out", tokens)
}

And just like that, our push notification is good to go.
This implementation works fine both for development and production environment.

Recap of what we did

In this post, we walked through the implementation of Firebase Cloud Messaging (FCM) in a Next.js + Supabase app. Here’s a quick summary of what we covered:

Setting Up FCM – Configured Firebase, generated an API keys and created .env.local file.
Registering User Devices – Stored push notification tokens in Supabase when users subscribed.
Sending Push Notifications – Implemented a server-side function to send notifications via the FCM HTTP v1 API.
Handling Notifications in the Client – We set up event listeners to handle background notifications.

Handling Failures

While this implementation covers the essentials, real-world applications should account for token expiration and invalidation(which would have been overwhelming and heavy to include it in this post).

Expired or Invalid Tokens

FCM tokens may expire or become invalid if a user reinstalls the app, logs out, or disables notifications.
If an FCM response returns a 410 (NotRegistered) error, the token should be removed from the database.

Permission Revocation

Users might disable notifications in browser settings.
Implement a way to prompt re-enabling if necessary.

For more details on handling failures, check out firebase documentation on token management.

Here comes the end

I’d love to hear your thoughts on this post—drop them in the comments section below!

Follow me to get a 😍 "push notification" whenever I publish something new!

Cheers 🎉🎉