Ban / pause / delete watcher

import {
  ElvixLifecycleWatcher,
  ElvixProvider,
} from "@elvix.is/sdk/react";

/**
 * Mount once in the root layout that wraps every authenticated page.
 * On ban / pause / delete / inactive, the watcher paints a full-screen
 * modal with a 9-second countdown, then signs the user out.
 */
export default function AppLayout({ children }: { children: React.ReactNode }) {
  return (
    <ElvixProvider clientId="your-app">
      <ElvixLifecycleWatcher signInUrl="/sign-in" />
      {children}
    </ElvixProvider>
  );
}

"use client";

import { ElvixLifecycleWatcher } from "@elvix.is/sdk/react";
import { useRouter } from "next/navigation";
import { toast } from "sonner";

export function SignedInChrome({ children }: { children: React.ReactNode }) {
  const router = useRouter();
  return (
    <>
      <ElvixLifecycleWatcher
        cookieName="elvix_token"
        onSignedOut={(reason) => {
          // Token + cookie already cleared. Host owns the next navigation.
          if (reason === "banned") toast.error("Your access was revoked.");
          if (reason === "paused") toast("Your access is paused.");
          if (reason === "deleted") toast("Your membership was removed.");
          router.replace("/sign-in");
        }}
      />
      {children}
    </>
  );
}