Skip to content

Next.js app showcasing how you can implement push notification using OneSignal and Supabase

Notifications You must be signed in to change notification settings

elhaddajiOtmane/onesignal

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

OneSignal Next.js Push Notification Example

Simple ordering app to demonstrate how you can use OneSignal with your Supabase project to send push notifications when a new data is inserted in your database.

You can find the full guide here.

Screenshot

.
├── app         # Next.js app to place orders from
├── supabase    # Supabase directory containing functions to send push notifications
└── README.md

Get Started

  • Create a OneSignal app with Custom Code Setup
  • Rename app/.env.example to app/.env.local and add your Supabase URL, Anon Key, and OneSignal App ID.
  • Run supabase link --project-ref YOUR_SUPABASE_PROJECT_REF to link the edge functions to your Supabase project
  • Set environment variables for edge functions
    • Rename supabase/.env.example to supabase/.env
    • Add your OneSignal App ID, User Auth Key, and REST API Key
    • Run supabase secrets set --env-file ./supabase/.env
  • Deploy the notify edge function by running supabase functions deploy notify --no-verify-jwt
  • Run the SQL below to create the orders table
  • Setup Database Webhooks to call the edge function when a new row is inserted into orders table
create table if not exists public.orders (
    id uuid not null primary key default uuid_generate_v4(),
    created_at timestamptz not null default now(),
    user_id uuid not null default auth.uid(),
    price int8 not null
);

Running the app locally

Run the following command to start the Next.js app

cd app

npm install

npm run dev

About

Next.js app showcasing how you can implement push notification using OneSignal and Supabase

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 91.0%
  • JavaScript 8.0%
  • CSS 1.0%