ReactJS & NextJS Setup

​

Overview

This guide explains how to integrate OneSignal push notifications into a ReactJS or NextJS application. It covers everything from installation to configuration and service worker management.

​

Requirements

• Configured OneSignal app and platform. See Web Push Setup to get started.

​

Installation

Choose your preferred package manager:

yarn add react-onesignal

​

Initialization

Import the OneSignal service and initialize it in your root component.

Replace YOUR_APP_ID with your OneSignal app ID found in Keys & IDs.

"use client";

import { useEffect } from 'react';
import OneSignal from 'react-onesignal';

export default function Page() {
useEffect(() => {
// Ensure this code runs only on the client side
if (typeof window !== 'undefined') {
OneSignal.init({
appId: 'YOUR_APP_ID',
// You can add other initialization options here
notifyButton: {
enable: true,
}
});
}
}, []);

  return (
    <div>
      <h1>Hello, world!</h1>
      {/* Rest of your page content */}
    </div>
  );

}

​

Customizing init options

You can customize your initialization with additional init parameters.

​

Service Worker Settings

If you haven’t done so already, you will need to download the OneSignal Service Worker file to add to your site.

The OneSignalSDKWorker.js file must be publicly accessible. You can put it in your public directory, top-level root, or a subdirectory. However, if you are placing the file in a subdirectory and/or have another service worker for your site, then make sure to specify the path. See OneSignal Service Worker for details.

​

Hosting the worker

• Public root (default): /OneSignalSDKWorker.js
• Custom folder (recommended): e.g., /onesignal/OneSignalSDKWorker.js as set in the previous step.

​

Verify service worker hosting

Visit the path in your browser to confirm it’s accessible.

If you used root:

https://your-site.com/OneSignalSDKWorker.js

If using the example path:

https://your-site.com/onesignal/OneSignalSDKWorker.js

It should return valid JavaScript.

​

Important notes

• Avoid Duplicate Initialization in Development
  • When testing in a development environment, you might see the OneSignal SDK initialize twice, which can cause console errors.
  • This happens due to <React.StrictMode> causing effects to run twice in development. To resolve it, remove <React.StrictMode> from your root component during development.

​

Testing the OneSignal SDK integration

This guide helps you verify that your OneSignal SDK integration is working correctly by testing push notifications and subscription registration.

​

Check web push subscriptions

​

Set up test subscriptions

Test subscriptions are helpful for testing a push notification before sending a message.

​

Send test push via API

curl -X \
POST --url 'https://api.onesignal.com/notifications' \
 --header 'content-type: application/json; charset=utf-8' \
 --header 'authorization: Key YOUR_APP_API_KEY' \
 --data \
 '{
  "app_id": "YOUR_APP_ID",
  "target_channel": "push",
  "name": "Testing basic setup",
  "headings": {
  	"en": "👋"
  },
  "contents": {
    "en": "Hello world!"
  },
  "included_segments": [
    "Test Users"
  ],
  "chrome_web_image": "https://avatars.githubusercontent.com/u/11823027?s=200&v=4"
}'

​

User identification

Previously, we demonstrated how to create web push Subscriptions. Now we’ll expand to identifying Users across all their subscriptions (including push, email, and SMS) using the OneSignal SDK. We’ll cover External IDs, tags, multi-channel subscriptions, privacy, and event tracking to help you unify and engage users across platforms.

​

Assign External ID

Use an External ID to identify users consistently across devices, email addresses, and phone numbers using your backend’s user identifier. This ensures your messaging stays unified across channels and 3rd party systems (especially important for Integrations).

Set the External ID with our SDK’s login method each time they are identified by your app.

​

Add data tags

Tags are key-value pairs of string data you can use to store user properties (like username, role, or preferences) and events (like purchase_date, game_level, or user interactions). Tags power advanced Message Personalization and Segmentation allowing for more advanced use cases.

Set tags with our SDK addTag and addTags methods as events occur in your app.

In this example, the user reached level 6 identifiable by the tag called current_level set to a value of 6.

We can create a segment of users that have a level of between 5 and 10, and use that to send targeted and personalized messages:

​

Add email and/or SMS subscriptions

Earlier we saw how our SDK creates web push subscriptions to send push. You can also reach users through emails and SMS channels by creating the corresponding subscriptions.

• Use the addEmail method to create email subscriptions.
• Use the addSms method to create SMS subscriptions.

If the email address and/or phone number already exist in the OneSignal app, the SDK will add it to the existing user, it will not create duplicates.

You can view unified users via Audience > Users in the dashboard or with the View user API.

​

Privacy & user consent

To control when OneSignal collects user data, use the SDK’s consent gating methods:

• setConsentRequired(true): Prevents data collection until consent is given.
• setConsentGiven(true): Enables data collection once consent is granted.

See our Privacy & security docs for more on:

• Data collected by the SDK
• Handling personal data

​

Listen to push, user, and in-app events

Use SDK listeners to react to user actions and state changes.

The SDK provides several event listeners for you to hook into. See our SDK reference guide for more details.

​

Push notification events

• Click event listener: Detect when a notification is tapped.
• Foreground lifecycle listener: Control how notifications behave in foreground.

​

User state changes

• User state change event listener: Detect when the External ID is set.
• Permission observer: Track the user’s specific interaction with the native push permission prompt.
• Push subscription change observer: Track when the push subscription status changes.

​

Advanced setup & capabilities

Explore more capabilities to enhance your integration:

• 🔁 Migrating to OneSignal from another service
• 🔌 Integrations
• 🛎️ Action buttons
• 🌐 Multi-language messaging
• 🛡️ Identity Verification
• 📊 Custom Outcomes

​

Web SDK setup & reference

Make sure you’ve enabled all key features by reviewing the Web push setup guide.

For full details on available methods and configuration options, visit the Web SDK reference.