One hour to your first submission.

// Innspel — the client in React Native (@innspel/react-native).
//
// Two peer dependencies you install yourself: react-native-safe-area-context and
// react-native-svg (see the guide). Storage is injected — the core knows nothing about
// AsyncStorage — and `identityProvider` calls YOUR token endpoint (guide, section 1).
//
// Complete: Innspel's CI type-checks this file against the published packages.

import AsyncStorage from '@react-native-async-storage/async-storage';
import { init } from '@innspel/core';
import { createStorage, InnspelPrivate, InnspelProvider, useInnspel } from '@innspel/react-native';
import { Pressable, Text, View } from 'react-native';

/** Calls YOUR token endpoint with your own session. Return null when nobody is signed in. */
async function getFeedbackToken(): Promise<string | null> {
  const res = await fetch('https://your-app.example/api/innspel-token', { headers: { Authorization: `Bearer ${yourSession()}` } });
  if (!res.ok) return null;
  return ((await res.json()) as { token: string }).token;
}

const innspel = init({
  baseUrl: 'https://api.innspel.no',
  tenantKey: 'innspel_pk_REPLACE_ME', // the SDK key — Settings → "SDK-nøkler" in the panel. Public, write-only
  identityProvider: getFeedbackToken, // or null = anonymous mode
  storage: createStorage(AsyncStorage), // the offline queue lives here
  context: { platform: 'ios', appVersion: '1.4.2' },
});

export default function App() {
  return (
    <InnspelProvider client={innspel}>
      <Home />
    </InnspelProvider>
  );
}

function Home() {
  const { open } = useInnspel();
  return (
    <View>
      {/* Never in a screenshot: masked before the submitter sees the preview, cannot be unmasked. */}
      <InnspelPrivate>
        <Text>Account 1234 56 78903</Text>
      </InnspelPrivate>
      <Pressable accessibilityRole="button" onPress={() => void open({ screen: 'Home' })}>
        <Text>Send feedback</Text>
      </Pressable>
    </View>
  );
}

function yourSession(): string {
  return 'your-own-session-token';
}

// Innspel — the client on the web (@innspel/web, no framework).
//
// Your button, your element, one call. `mount` renders the dialog into `el` when the
// button is pressed; `bindTrigger` gives the button `aria-haspopup="dialog"` and returns
// focus to it when the dialog closes. Innspel adds no floating button of its own.
//
// Complete and runnable: Innspel's own test suite calls `startInnspel` in a browser DOM,
// presses the button and expects the dialog. The third argument exists only for that —
// a real page passes two.

import { mount, type MountOptions, type Mounted } from '@innspel/web';

/** Calls YOUR token endpoint (see the guide, section 1) with your own session. */
export async function getFeedbackToken(): Promise<string | null> {
  const res = await fetch('/api/innspel-token', { credentials: 'include' });
  if (!res.ok) return null; // not signed in: this submission goes out anonymously
  return ((await res.json()) as { token: string }).token;
}

export function startInnspel(el: HTMLElement, button: HTMLElement, overrides: Partial<MountOptions> = {}): Mounted {
  const innspel = mount(el, {
    baseUrl: 'https://api.innspel.no',
    tenantKey: 'innspel_pk_REPLACE_ME', // the SDK key — Settings → "SDK-nøkler" in the panel. Public, write-only
    identityProvider: getFeedbackToken,
    appVersion: '2.4.1',
    ...overrides,
  });
  innspel.bindTrigger(button);
  return innspel;
}

// In your page:
//   <button id="send-feedback">Send feedback</button>
//   <div id="innspel"></div>
//   startInnspel(document.getElementById('innspel')!, document.getElementById('send-feedback')!);

// Innspel — anonymous mode (@innspel/web; the same option exists in @innspel/core).
//
// `identityProvider: null` is a choice, not a fallback: no token is ever asked for, there is
// no pseudonym, no "My submissions", and the submission never counts in any statistic of how
// many people are affected. The platform cannot reach the submitter, and neither can you.
// A provider that RETURNS null means "not signed in right now" — that is a different thing.

import { mount, type MountOptions, type Mounted } from '@innspel/web';

export function startInnspelAnonymously(el: HTMLElement, button: HTMLElement, overrides: Partial<MountOptions> = {}): Mounted {
  const innspel = mount(el, {
    baseUrl: 'https://api.innspel.no',
    tenantKey: 'innspel_pk_REPLACE_ME',
    identityProvider: null, // anonymous mode
    appVersion: '2.4.1',
    ...overrides,
  });
  innspel.bindTrigger(button);
  return innspel;
}

// Innspel — feedback-token endpoint in Node (no dependencies, Node 24).
//
// Your app calls this endpoint with the user's own session, and hands the
// token to the SDK. Innspel verifies it against the PUBLIC key you registered
// in the panel (Organisation → Signing keys) and learns nothing about who the
// user is: `sub` is a pseudonym, never your user ID.
//
// This file is complete and runnable:
//   node token-endpoint.mjs            → HTTP server on $PORT (default 3000)
//   node token-endpoint.mjs --issue 42 → prints a token for user "42" (used by Innspel's CI)
//
// Configuration (environment):
//   INNSPEL_TENANT_ID         tenant ID — Organisation in the panel (`iss`)
//   INNSPEL_PRODUCT_ID        product ID — Products and SDK keys in the panel (`prd`)
//   INNSPEL_KEY_ID            `kid` of the key you registered
//   INNSPEL_PRIVATE_KEY       the PRIVATE key, EC P-256, PKCS#8 PEM — never leaves your server
//   INNSPEL_PSEUDONYM_SECRET  the HMAC secret behind the pseudonym — rotating it severs every
//                             user from their past submissions, so treat it as permanent
//
// Any JWT library (e.g. `jose`) does the same thing; the rules are what matters:
// ES256 only, `kid` in the header, `aud` = "innspel", `iss` = tenant ID, `prd` = product ID,
// `sub` = pseudonym, `exp` at most 15 minutes after `iat`.

import { createHmac, createPrivateKey, sign } from 'node:crypto';
import { createServer } from 'node:http';

export const AUDIENCE = 'innspel';
export const LIFETIME_SECONDS = 15 * 60; // the maximum Innspel accepts

/** Stable, irreversible pseudonym for a user. Use your internal user ID, never e-mail or phone. */
export function pseudonym(secret, userId) {
  return createHmac('sha256', secret).update(userId).digest('base64url');
}

/**
 * Issue a feedback token for `userId`.
 * `segment` is optional and may only carry attributes you allow-listed in the panel
 * (Organisation → Segment keys); anything else is discarded by Innspel.
 */
export function issueFeedbackToken(config, userId, segment = undefined, now = Date.now()) {
  const iat = Math.floor(now / 1000);
  const header = { alg: 'ES256', typ: 'JWT', kid: config.keyId };
  const payload = {
    iss: config.tenantId,
    aud: AUDIENCE,
    sub: pseudonym(config.pseudonymSecret, userId),
    prd: config.productId,
    iat,
    exp: iat + LIFETIME_SECONDS,
    ...(segment ? { seg: segment } : {}),
  };

  const signingInput = `${base64url(JSON.stringify(header))}.${base64url(JSON.stringify(payload))}`;
  // ES256 is ECDSA P-256 over SHA-256 with the raw r||s signature (IEEE P1363), not DER.
  const signature = sign('sha256', Buffer.from(signingInput), {
    key: createPrivateKey(config.privateKeyPem),
    dsaEncoding: 'ieee-p1363',
  });
  return `${signingInput}.${signature.toString('base64url')}`;
}

const base64url = (text) => Buffer.from(text, 'utf8').toString('base64url');

export function configFromEnv(env = process.env) {
  const read = (name) => {
    const value = env[name];
    if (!value) throw new Error(`${name} is not set`);
    return value;
  };
  return {
    tenantId: read('INNSPEL_TENANT_ID'),
    productId: read('INNSPEL_PRODUCT_ID'),
    keyId: read('INNSPEL_KEY_ID'),
    privateKeyPem: read('INNSPEL_PRIVATE_KEY'),
    pseudonymSecret: read('INNSPEL_PSEUDONYM_SECRET'),
  };
}

/**
 * Replace with your own session check. Return the signed-in user, or null — the SDK then
 * submits anonymously instead of blocking.
 */
function authenticate(req) {
  const session = req.headers.authorization?.replace(/^Bearer /, '');
  if (!session) return null;
  return { id: session, plan: 'standard' }; // look the session up in your own store
}

function serve(config) {
  const server = createServer((req, res) => {
    if (req.method !== 'GET' || req.url !== '/api/innspel-token') {
      res.writeHead(404).end();
      return;
    }
    const user = authenticate(req);
    if (!user) {
      res.writeHead(401).end();
      return;
    }
    const token = issueFeedbackToken(config, user.id, { plan: user.plan });
    // Never cache: the token is short-lived on purpose.
    res.writeHead(200, { 'content-type': 'application/json', 'cache-control': 'no-store' });
    res.end(JSON.stringify({ token }));
  });
  server.listen(Number(process.env.PORT ?? 3000));
}

if (process.argv[1] && import.meta.url === new URL(`file://${process.argv[1]}`).href) {
  const config = configFromEnv();
  const issueAt = process.argv.indexOf('--issue');
  if (issueAt !== -1) {
    process.stdout.write(issueFeedbackToken(config, process.argv[issueAt + 1] ?? 'user-1'));
  } else {
    serve(config);
  }
}

// Innspel — webhook receiver in Node (no dependencies, Node 24).
//
// Innspel never sends push and never holds push tokens: it tells YOUR server that
// something happened, and you notify the user. The payload carries IDs, the
// pseudonym and the status — never the submission text, never a screenshot.
//
// This file is complete and runnable:
//   node webhook-receiver.mjs            → HTTP server on $PORT (default 3000)
//   node webhook-receiver.mjs --verify   → reads {secret, header, body, now?} as JSON on stdin,
//                                          prints "valid" or "invalid" (used by Innspel's CI)
//
// Configuration (environment):
//   INNSPEL_WEBHOOK_SECRET    shown ONCE when the webhook is created or rotated, prefix included

import { createHmac, timingSafeEqual } from 'node:crypto';
import { createServer } from 'node:http';

/** Innspel rejects anything older or newer than this; so should you — a valid signature on a stale request is a replay. */
export const TOLERANCE_SECONDS = 5 * 60;

/**
 * Verify `X-Innspel-Signature` (`t=<unix seconds>,v1=<hex HMAC-SHA256>`) over the raw body.
 *
 * `rawBody` is the body EXACTLY as received (Buffer or string) — not an object you parsed
 * and re-serialised. One space more or less gives a different signature. The key is the
 * secret's characters as you pasted them, `innspel_whsec_` prefix included; no decoding.
 */
export function verifySignature(rawBody, header, secret, nowSeconds = Date.now() / 1000) {
  const parts = Object.fromEntries(String(header ?? '').split(',').map((p) => p.split('=', 2)));
  const t = Number(parts.t);
  if (!Number.isFinite(t) || Math.abs(nowSeconds - t) > TOLERANCE_SECONDS) return false;

  const expected = createHmac('sha256', secret).update(`${t}.`).update(rawBody).digest();
  const actual = Buffer.from(parts.v1 ?? '', 'hex');
  // Constant-time: `===` on hex strings leaks how many characters matched.
  return expected.length === actual.length && timingSafeEqual(expected, actual);
}

/** Your own storage. Mark an event handled only AFTER handling succeeded (see below). */
const handled = new Set();

async function handle(event) {
  // Do the real work here — e.g. notify the user whose pseudonym is event.data.subject.
  // Keep it fast or hand it to a queue: Innspel waits 10 seconds for your 2xx.
}

function serve(secret) {
  const server = createServer(async (req, res) => {
    if (req.method !== 'POST' || req.url !== '/webhooks/innspel') {
      res.writeHead(404).end();
      return;
    }
    const chunks = [];
    for await (const chunk of req) chunks.push(chunk);
    const raw = Buffer.concat(chunks);

    if (!verifySignature(raw, req.headers['x-innspel-signature'], secret)) {
      res.writeHead(401).end();
      return;
    }

    const event = JSON.parse(raw.toString('utf8'));

    // "Verify" in the panel: answer with the challenge. Nothing is delivered until you do.
    if (event.type === 'webhook.verify') {
      res.writeHead(200, { 'content-type': 'application/json' });
      res.end(JSON.stringify({ challenge: event.data.challenge }));
      return;
    }
    // "Send test" in the panel: one attempt, no retry, nothing to do.
    if (event.type === 'webhook.test') {
      res.writeHead(200).end();
      return;
    }

    // Idempotent on the event ID (also in X-Innspel-Event-Id): the same event may arrive again.
    // A duplicate you already handled gets 2xx — that is what stops the retries.
    if (!handled.has(event.id)) {
      try {
        await handle(event);
        handled.add(event.id); // only now: marking on receipt would lose a failed attempt
      } catch {
        res.writeHead(500).end(); // Innspel retries: after 1 min, 5 min, 30 min and 2 h
        return;
      }
    }
    res.writeHead(200).end();
  });
  server.listen(Number(process.env.PORT ?? 3000));
}

if (process.argv[1] && import.meta.url === new URL(`file://${process.argv[1]}`).href) {
  if (process.argv.includes('--verify')) {
    const chunks = [];
    for await (const chunk of process.stdin) chunks.push(chunk);
    const input = JSON.parse(Buffer.concat(chunks).toString('utf8'));
    const ok = verifySignature(input.body, input.header, input.secret, input.now ?? Date.now() / 1000);
    process.stdout.write(ok ? 'valid' : 'invalid');
  } else {
    const secret = process.env.INNSPEL_WEBHOOK_SECRET;
    if (!secret) throw new Error('INNSPEL_WEBHOOK_SECRET is not set');
    serve(secret);
  }
}

using System.Security.Cryptography;
using System.Text;

using Microsoft.IdentityModel.JsonWebTokens;
using Microsoft.IdentityModel.Tokens;

namespace Innspel.Examples;

/// <summary>
/// What the token endpoint needs. Tenant ID is under Organisation in the panel, product ID
/// under Products and SDK keys, and <c>KeyId</c> is the <c>kid</c> of the public key you
/// registered there. The private key never leaves your server; the pseudonym secret is
/// permanent — rotating it severs every user from their past submissions.
/// </summary>
public sealed record FeedbackTokenOptions(
    string TenantId,
    string ProductId,
    string KeyId,
    string PrivateKeyPem,
    string PseudonymSecret);

/// <summary>
/// Issues the feedback token your app hands to the Innspel SDK. The rules Innspel enforces:
/// ES256 only, <c>kid</c> in the header, <c>aud</c> = <c>innspel</c>, <c>iss</c> = tenant ID,
/// <c>prd</c> = product ID, <c>sub</c> = pseudonym, <c>exp</c> at most 15 minutes after <c>iat</c>.
/// </summary>
public static class FeedbackTokens
{
    public const string Audience = "innspel";

    /// <summary>The maximum lifetime Innspel accepts.</summary>
    public static readonly TimeSpan Lifetime = TimeSpan.FromMinutes(15);

    private static readonly JsonWebTokenHandler Handler = new() { SetDefaultTimesOnTokenCreation = false };

    /// <summary>Stable, irreversible pseudonym for a user. Use your internal user ID, never e-mail or phone.</summary>
    public static string Pseudonym(string secret, string userId)
    {
        ArgumentException.ThrowIfNullOrEmpty(secret);
        ArgumentException.ThrowIfNullOrEmpty(userId);
        var mac = HMACSHA256.HashData(Encoding.UTF8.GetBytes(secret), Encoding.UTF8.GetBytes(userId));
        return Base64UrlEncoder.Encode(mac);
    }

    /// <summary>
    /// Issue a token for <paramref name="userId"/>. <paramref name="segment"/> is optional and may
    /// only carry attributes you allow-listed in the panel (Organisation → Segment keys).
    /// </summary>
    public static string Issue(FeedbackTokenOptions options, string userId, IReadOnlyDictionary<string, string>? segment = null, DateTimeOffset? now = null)
    {
        ArgumentNullException.ThrowIfNull(options);
        var issuedAt = (now ?? DateTimeOffset.UtcNow).UtcDateTime;

        using var ecdsa = ECDsa.Create();
        ecdsa.ImportFromPem(options.PrivateKeyPem);
        var key = new ECDsaSecurityKey(ecdsa) { KeyId = options.KeyId };

        var claims = new Dictionary<string, object> { ["prd"] = options.ProductId };
        if (segment is { Count: > 0 })
        {
            claims["seg"] = segment;
        }

        return Handler.CreateToken(new SecurityTokenDescriptor
        {
            Issuer = options.TenantId,
            Audience = Audience,
            Subject = new System.Security.Claims.ClaimsIdentity([new System.Security.Claims.Claim("sub", Pseudonym(options.PseudonymSecret, userId))]),
            Claims = claims,
            IssuedAt = issuedAt,
            NotBefore = issuedAt,
            Expires = issuedAt + Lifetime,
            SigningCredentials = new SigningCredentials(key, SecurityAlgorithms.EcdsaSha256),
        });
    }
}

using System.Globalization;
using System.Security.Cryptography;
using System.Text;

namespace Innspel.Examples;

/// <summary>
/// Verifies <c>X-Innspel-Signature</c> (<c>t=&lt;unix seconds&gt;,v1=&lt;hex HMAC-SHA256&gt;</c>)
/// over the raw body. The key is the secret's characters as you pasted them,
/// <c>innspel_whsec_</c> prefix included — no decoding.
/// </summary>
public static class WebhookSignatures
{
    public const string Header = "X-Innspel-Signature";

    /// <summary>Innspel rejects anything older or newer than this; so should you — a valid signature on a stale request is a replay.</summary>
    public static readonly TimeSpan Tolerance = TimeSpan.FromMinutes(5);

    /// <param name="rawBody">The body EXACTLY as received — not an object you parsed and re-serialised.</param>
    /// <param name="header">The value of <see cref="Header"/>.</param>
    /// <param name="secret">The webhook secret, shown once when created or rotated.</param>
    /// <param name="now">Your clock; defaults to UTC now.</param>
    public static bool IsValid(string rawBody, string? header, string secret, DateTimeOffset? now = null)
    {
        ArgumentNullException.ThrowIfNull(rawBody);
        ArgumentException.ThrowIfNullOrEmpty(secret);
        if (string.IsNullOrEmpty(header))
        {
            return false;
        }

        long? timestamp = null;
        string? signature = null;
        foreach (var part in header.Split(','))
        {
            var eq = part.IndexOf('=', StringComparison.Ordinal);
            if (eq < 0)
            {
                continue;
            }

            var name = part[..eq];
            var value = part[(eq + 1)..];
            if (name == "t" && long.TryParse(value, NumberStyles.None, CultureInfo.InvariantCulture, out var t))
            {
                timestamp = t;
            }
            else if (name == "v1")
            {
                signature = value;
            }
        }

        if (timestamp is not { } ts || signature is null)
        {
            return false;
        }

        var age = (now ?? DateTimeOffset.UtcNow) - DateTimeOffset.FromUnixTimeSeconds(ts);
        if (age.Duration() > Tolerance)
        {
            return false;
        }

        var signed = quot;{ts.ToString(CultureInfo.InvariantCulture)}.{rawBody}";
        var expected = HMACSHA256.HashData(Encoding.UTF8.GetBytes(secret), Encoding.UTF8.GetBytes(signed));
        byte[] actual;
        try
        {
            actual = Convert.FromHexString(signature);
        }
        catch (FormatException)
        {
            return false;
        }

        // Constant-time: a plain string comparison leaks how many characters matched.
        return CryptographicOperations.FixedTimeEquals(expected, actual);
    }
}

// Innspel — token endpoint and webhook receiver in .NET (minimal API).
//
// `dotnet run` serves both. Configuration (environment):
//   INNSPEL_TENANT_ID         tenant ID — Organisation in the panel (`iss`)
//   INNSPEL_PRODUCT_ID        product ID — Products and SDK keys in the panel (`prd`)
//   INNSPEL_KEY_ID            `kid` of the key you registered
//   INNSPEL_PRIVATE_KEY       the PRIVATE key, EC P-256, PKCS#8 PEM — never leaves your server
//   INNSPEL_PSEUDONYM_SECRET  the HMAC secret behind the pseudonym — permanent
//   INNSPEL_WEBHOOK_SECRET    shown ONCE when the webhook is created or rotated, prefix included

using System.Text.Json;

namespace Innspel.Examples;

public static class Program
{
    public static void Main(string[] args)
    {
        var builder = WebApplication.CreateBuilder(args);
        var app = builder.Build();

        var tokenOptions = new FeedbackTokenOptions(
            TenantId: Required("INNSPEL_TENANT_ID"),
            ProductId: Required("INNSPEL_PRODUCT_ID"),
            KeyId: Required("INNSPEL_KEY_ID"),
            PrivateKeyPem: Required("INNSPEL_PRIVATE_KEY"),
            PseudonymSecret: Required("INNSPEL_PSEUDONYM_SECRET"));
        var webhookSecret = Required("INNSPEL_WEBHOOK_SECRET");

        app.MapGet("/api/innspel-token", (HttpRequest request, HttpResponse response) =>
        {
            if (Authenticate(request) is not { } user)
            {
                return Results.Unauthorized(); // the SDK then submits anonymously instead of blocking
            }

            var token = FeedbackTokens.Issue(tokenOptions, user.Id, new Dictionary<string, string> { ["plan"] = user.Plan });
            response.Headers.CacheControl = "no-store"; // never cache: the token is short-lived on purpose
            return Results.Json(new { token });
        });

        // Your own storage. Mark an event handled only AFTER handling succeeded.
        var handled = new HashSet<string>();

        app.MapPost("/webhooks/innspel", async (HttpRequest request) =>
        {
            using var reader = new StreamReader(request.Body);
            var raw = await reader.ReadToEndAsync(); // the body exactly as received

            if (!WebhookSignatures.IsValid(raw, request.Headers[WebhookSignatures.Header], webhookSecret))
            {
                return Results.Unauthorized();
            }

            using var json = JsonDocument.Parse(raw);
            var root = json.RootElement;
            var type = root.GetProperty("type").GetString();

            // "Verify" in the panel: answer with the challenge. Nothing is delivered until you do.
            if (type == "webhook.verify")
            {
                return Results.Json(new { challenge = root.GetProperty("data").GetProperty("challenge").GetString() });
            }

            // "Send test" in the panel: one attempt, no retry, nothing to do.
            if (type == "webhook.test")
            {
                return Results.Ok();
            }

            // Idempotent on the event ID (also in X-Innspel-Event-Id): the same event may arrive
            // again. Add is false for a duplicate you already handled — answer 2xx without doing it
            // again; that is what stops the retries.
            var id = root.GetProperty("id").GetString()!;
            if (handled.Add(id))
            {
                // Do the real work here — e.g. notify the user whose pseudonym is data.subject.
                // Keep it fast or hand it to a queue: Innspel waits 10 seconds for your 2xx. If the
                // work fails, remove the ID again and return 500 — Innspel retries after 1 min,
                // 5 min, 30 min and 2 h, and an ID marked on receipt would make that retry a "duplicate".
            }

            return Results.Ok();
        });

        app.Run();
    }

    private static string Required(string name) =>
        Environment.GetEnvironmentVariable(name) ?? throw new InvalidOperationException(quot;{name} is not set");

    /// <summary>Replace with your own session check. Null means not signed in.</summary>
    private static (string Id, string Plan)? Authenticate(HttpRequest request)
    {
        var session = request.Headers.Authorization.ToString().Replace("Bearer ", "", StringComparison.Ordinal);
        return string.IsNullOrEmpty(session) ? null : (session, "standard"); // look the session up in your own store
    }
}