Skip to main content

Firebase widget authentication

If your app already uses Firebase Auth, you can authenticate the Notification Center widget directly with a Firebase ID token. Notifizz verifies the token against the Firebase JWKS server-side — no additional backend work needed on your side.

TL;DR

  • Pass authType: 'firebase' and a Firebase ID token to the widget.
  • Notifizz verifies the token; you don’t need to send userId or userEmail (they’re extracted from the token).
  • Firebase tokens expire after 1 hour — re-mint the widget when the SDK refreshes the token.
If you don’t already use Firebase Auth, Backend Token or Publicly-Signed JWT are the right choices. PubliclySignedJwt works with Auth0, Clerk, Cognito, Supabase Auth, and any provider that publishes a JWKS endpoint.

How it works

1

User authenticates with Firebase

Your app signs the user in via any Firebase Auth provider (email/password, Google, GitHub, …).
2

Obtain the ID token

auth.currentUser.getIdToken() returns a fresh (or cached-still-valid) ID token.
3

Mount the widget

Pass the token to the widget as options.token with authType: "firebase".
4

Notifizz verifies

The Notifizz backend verifies the token against the Firebase JWKS, extracts the user identity, and opens the widget session.

Setup

import { getAuth } from "firebase/auth";
import NotifizzInbox from "@notifizz/react";

const auth = getAuth();
const idToken = await auth.currentUser.getIdToken();

<NotifizzInbox
  options={{
    apiKey: "YOUR_FRONT_API_KEY",
    authType: "firebase",
    token: idToken,
  }}
/>

Required fields

FieldTypeDescription
authType'firebase'Mandatory literal.
tokenstringA valid Firebase ID token for the current user.
In Firebase mode you do not pass userId or userEmail — Notifizz extracts the identity from the verified token. Passing them anyway is harmless (they’re ignored).

Token refresh

Firebase ID tokens expire after 1 hour. The Firebase SDK refreshes them automatically — auth.currentUser.getIdToken() returns a cached token when valid, and a fresh one when expired. To keep the widget happy across the refresh boundary:
  • Re-mount the widget on onIdTokenChanged so the new token reaches Notifizz immediately, or
  • Call getIdToken() proactively before mounting (the cached path is cheap), or
  • Let the widget surface state.hasError = true on expiry, then re-mount with a fresh token.
// Re-mount on token refresh (React)
useEffect(() => {
  return onIdTokenChanged(getAuth(), async (user) => {
    if (user) {
      const fresh = await user.getIdToken();
      setNotifizzToken(fresh);
    }
  });
}, []);

Firebase vs Backend Tokens

FirebaseBackend Tokens
Already use Firebase Authyes — zero extra workunnecessary overhead
Custom auth systemn/athe right choice
Backend involvementnonemint a token per user
Token managementFirebase handles refreshyou manage delivery and rotation

FAQ

Token expired. The Firebase SDK has a fresh one — call getIdToken() and re-mount the widget. The simplest pattern is to subscribe to onIdTokenChanged and re-mount whenever the token changes.
Yes — any token Firebase issues for the user works. The Notifizz backend verifies via the public JWKS, so the issuer (client SDK vs admin SDK) doesn’t matter as long as the JWT is valid for your Firebase project.
The dashboard environment settings include a Firebase project ID. Tokens issued for any other project are rejected. If you use multiple Firebase projects (e.g. dev / prod), point each Notifizz environment at its corresponding project.
Notifizz reads sub (user id) and email. Custom claims are visible in the campaign orchestrator if you forward them via event properties, but the widget does not consume them directly.
Don’t cache it manually — the Firebase SDK handles caching internally and knows when to refresh. Calling getIdToken() is cheap when the cached token is still valid.
Anonymous users have a stable uid and a valid ID token, so Firebase Auth mode works. The notification orchestrator may not have meaningful campaign data for an anonymous user — bridge to a real identity before depending on personalised content.

See also

Authentication overview

The four-mode model and when to pick each.

Backend tokens

Use this if you don’t already have Firebase Auth.

Publicly-signed JWT

Auth0, Clerk, Cognito, Supabase Auth — decouple widget auth from your backend.

Notification Center overview

Lifecycle, state model, custom bell, headless mode.