Sending a notification in the Next.js Supabase Starter Kit

Learn how to send a notification in the Next.js Supabase Starter Kit.

Makerkit allows you to send notifications using the @kit/notifications package. The package provides a simple API to send notifications.

Notifications

Learn how to send notifications in the Next.js Supabase Starter Kit.

Notifications API

The createNotificationsApi provides an easy to use API to send notifications. You can send notifications to users after they sign up, create a task, or perform any other action.

The service is a server-side service, so you can use it in your server actions or route handlers. This service cannot be used from the client-side since the only role who can insert notifications is the service_role role.

Here is a super simple example of how you can send a notification after a user signs up.

import { createNotificationsApi } from '@kit/notifications/api';
import { getSupabaseServerAdminClient } from '@kit/supabase/server-admin-client';
async function sendNotificationAfterSignup(
accountId: string,
) {
const client = getSupabaseServerAdminClient();
const api = createNotificationsApi(client);
await api.createNotification({
account_id: accountId,
body: 'You have successfully signed up!',
});
}

In this example, we are sending a notification to the user after they sign up. The account_id is the ID of the user who signed up, and the body is the message that will be displayed in the notification.

Users will see the notifications if:

  1. they're sent to their own account
  2. they're sent to a team they're a member of

Notification channels

You can send notifications to different channels using the channel field. For example, you can send a notification to the email or in_app. In-app notifications will be displayed in the app, while email notifications will be sent to the user's email. By default, notifications are sent to the in_app channel.

The createNotificationsApi function takes the client parameter - eg. the Supabase client.

import { createNotificationsApi } from '@kit/notifications/api';
import { getSupabaseServerAdminClient } from '@kit/supabase/server-admin-client';
async function sendNotificationAfterSignup(
accountId: string,
) {
const client = getSupabaseServerAdminClient();
const api = createNotificationsApi(client);
await api.createNotification({
account_id: accountId,
body: 'You have successfully signed up!',
channel: 'email',
});
}

The example above sends an email notification to the user after they sign up.

NB: this require a Database trigger to send the email notification! Please dont't forget to add the trigger in your database.


NB: at the time of writing, this is not yet implemented in the Next.js Supabase Starter Kit. It is a feature that is planned for the future.

Notification types

You can send different types of notifications using the type field. For example, you can send a info, warning, or error notification.

By default, notifications are sent as info.

import { createNotificationsApi } from '@kit/notifications/api';
import { getSupabaseServerAdminClient } from '@kit/supabase/server-admin-client';
async function sendNotificationAfterSignup(
accountId: string,
) {
const client = getSupabaseServerAdminClient();
const api = createNotificationsApi(client);
await api.createNotification({
account_id: accountId,
body: 'You have successfully signed up!',
type: 'info', // this is the default type, no need to specify it
});
}

Warning notifications

To send a warning notification, you can use the warning type.

api.createNotification({
account_id: accountId,
body: 'Your credit card is about to expire!',
type: 'warning',
});

Error notifications

To send an error notification, you can use the error type.

api.createNotification({
account_id: accountId,
body: 'There was an error processing your payment.',
type: 'error',
});

You can also include a link in the notification using the link field. This will create a clickable link in the notification.

api.createNotification({
account_id: accountId,
body: 'You have created a task!',
link: '/tasks/123',
});

The example above sends a notification to the user after they create a task. The notification will include a link to the task.