LoginSignupGithub

Inbox Notifications

SuprSend SDK for Flutter applications for integrating inbox functionality using flutter hooks

Suggest Edits

SuprSend uses flutter hooks to provide inbox functionality in flutter applications.

Installation

Step-1: Project’s pubspec.yaml changes

Add the following line of code inside dependencies in the pubspec.yaml file under the dependencies section

dependencies:
  flutter:
  	sdk: flutter
  suprsend_flutter_inbox: "^0.0.1"

Step-2: Run flutter pub get in the terminal

$ flutter pub get

Initialization

Enclose your Material App inside SuprSendProvider and pass the workspace key, workspace secret, distinct_id, and subscriber_id.

import 'package:suprsend_flutter_inbox/main.dart';

SuprSendProvider(
    workspaceKey: <your workspace key>,
    workspaceSecret:  <your workspace secret>,
    distinctId: distinct_id,
    subscriberId: subscriber_id,
    child: YourAppComponent()
)

NOTE: SuprSend hooks can only be used inside of SuprSendProvider.


Usage

useBell hook

This hook is used to get unSeenCount, and markAllSeen.

markAllSeen should be called when the user clicks on the bell icon so that the notification count can be reset to 0.

import 'package:suprsend_flutter_inbox/main.dart';

final bellData = useBell();


// bellData structure:
{
  "unSeenCount": int,
  "markAllSeen": ()=>void
}

useNotifications hook

This hook is used to get a notifications list, unSeenCount, markAllSeen, and markClicked. markClicked needs to be called when the user clicks on any of the notification items.

import 'package:suprsend_flutter_inbox/main.dart';

final notifData = useNotifications();


// notifData structure:
{
  "notifications": List<Noticication>,
  "unSeenCount": int,
  "markAllSeen": ()=>void
  "markClicked":(n_id)=>void
}

// Noticication structure:
{
  "n_id": string,
  "created_on": int,
  "seen_on": int,
  "message": {
    "header": string,
    "text": string,
    "url": string,
    "actions:[
      {
        "name": string,
        "url": string
      }
    ]
  }
}

NOTE: Example implementation can be found here: https://github.com/suprsend/suprsend-flutter-sdk/blob/main/example/lib/main.dart

Generating Subscriber_id

Use the below function in your server-side code to generate a unique unguessable subscriber_id using your distinct_id and inbox-secret (picked from the Inbox Vendor Integration page).

  • subscriber_id is unique to each distinct_id and should be generated for each user.
  • Inbox Secret is the Shared Secret key available in your Inbox vendor page. This key is unique to your workspace and should not be shared with anyone for security purposes
import base64
import hashlib
import hmac

def hmac_rawurlsafe_base64_string(distinct_id: str, secret: str):
    digest = hmac.HMAC(secret.encode(), msg=distinct_id.encode(), digestmod=hashlib.sha256).digest()
    encoded = base64.urlsafe_b64encode(digest).decode()
    return encoded.rstrip("=")

package main

import (
	"crypto/hmac"
	"crypto/sha256"
	"encoding/base64"
)

func HmacRawURLSafeBase64String(message, secret string) string {
	hash := hmac.New(sha256.New, []byte(secret))
	hash.Write([]byte(message))
	return base64.RawURLEncoding.EncodeToString(hash.Sum(nil))
}

import crypto from "crypto";

function hmac_rawurlsafe_base64_string(distinct_id, secret) {
  const hash = crypto
    .createHmac("sha256", secret)
    .update(distinct_id)
    .digest("base64");
  return hash.trimEnd("=");
}

package test;

import java.nio.charset.StandardCharsets;
import java.security.InvalidKeyException;
import java.security.NoSuchAlgorithmException;
import java.util.Base64;

import javax.crypto.Mac;
import javax.crypto.spec.SecretKeySpec;

public class TestHmacGeneratation {
	public static void main(String[] args) throws Exception {
		String distinct_id = "b8278572-2929-4af6-be2b-cdc2bc1f6256";
		String secret = "IG-J8Wvf7M-w4ll13h53NJAMQQNHdUqFTSJ2JVAZl0s";
		TestHmacGeneratation instance = new TestHmacGeneratation();
		String output = instance.hmacRawURLSafeBase64String(distinct_id, secret);
		System.out.println(output);
		// prints dHBWYF4oV190o4j-e3eYxB-SCkeHnoaiofe8EmGk9JQ
	}
	
	private String hmacRawURLSafeBase64String(String distinctId, String secret) throws InvalidKeyException, NoSuchAlgorithmException {
		Mac sha256mac = getSha256macInstance(secret);
		byte[] macData = sha256mac.doFinal(distinctId.getBytes(StandardCharsets.UTF_8));
		String hmacString = Base64.getUrlEncoder().withoutPadding().encodeToString(macData);
		return hmacString;
	}

	private Mac getSha256macInstance(String secret) throws NoSuchAlgorithmException, InvalidKeyException {
		final byte[] secretBytes = secret.getBytes(StandardCharsets.UTF_8);
		SecretKeySpec keySpec = new SecretKeySpec(secretBytes, "HmacSHA256");
		Mac sha256mac;
		try {
			sha256mac = Mac.getInstance("HmacSHA256");
			sha256mac.init(keySpec);
		} catch (NoSuchAlgorithmException e) {
			throw e;
		} catch (InvalidKeyException e) {
			throw e;
		}
		return sha256mac;
	}
}

CREATE EXTENSION "pgcryto";

CREATE OR REPLACE FUNCTION hmac_rawurlsafe_base64_string(distinct_id VARCHAR, secret VARCHAR) RETURNS VARCHAR
LANGUAGE PLPGSQL AS $func$
DECLARE
    hmac_string VARCHAR;
BEGIN
    hmac_string = encode(hmac(distinct_id::TEXT, secret, 'SHA256'), 'base64');
    hmac_string = replace(replace(hmac_string, '+', '-'), '/', '_'); 
    hmac_string = RTRIM(hmac_string, '='); 
    RETURN hmac_string;
END;
$func$;

Why Subscriber id is needed?

subscriber_id is raw-URL-safe-base64 encoded string of SHA-256 HMAC of your distinct_id. Its purpose is to prevent unauthorized access to Inbox service by just spoofing distinct_id. To generate the subscriber_id with respect to a distinct_id, use the inbox secret (from Vendor page) and generation function provided above. It is imperative that the inbox secret is stored safely on your server side and not exposed to client-side code.

🚧

Note

The subscriber_id must be generated by server-side code (not in client app)


Even after setting up the inbox, if you are not able to see notifications then cross-check if your subscriber_id mentioned is exactly correct by opening the subscriber's tab in the Suprsend dashboard and searching for distinct_id like below. In most cases mismatch of subscriber_id with distinct_id causes notifications not getting displayed.

Updated about 1 year ago