Auth-Gated UI

Gate ggui sessions behind your app’s authentication. Pass user tokens to GguiSession and use the auth tool in data bindings to control access.

Frontend: Auth-Aware Session

import { GguiProvider, GguiSession, StackItemRenderer } from "@ggui-ai/react";
import type { StackItem, EventContext } from "@ggui-ai/react";

function App() {
  const { user, isAuthenticated } = useAuth(); // Your auth provider

  if (!isAuthenticated) {
    return <LoginPage />;
  }

  return (
    <GguiProvider appId="app_..." wsEndpoint="wss://ws.guuey.com">
      <GguiSession
        sessionId="session_..."
        userId={user.id}
        userToken={user.accessToken}
        onBeforeSubmit={(data, context: EventContext) => {
          // Inject auth context into every submission
          return {
            ...data,
            _auth: { userId: context.userId, timestamp: Date.now() },
          };
        }}
        onError={(error) => {
          if (error.message.includes("unauthorized")) {
            window.location.href = "/login";
          }
        }}
      >
        {(api) => <StackItemRenderer stackItem={currentItem} />}
      </GguiSession>
    </GguiProvider>
  );
}

Data Bindings with Auth

Controllers can use the auth tool to gate data access:

import { useBindings } from "@ggui-ai/react";

function ProtectedDashboard() {
  const { data, loading, errors } = useBindings({
    bindings: {
      auth: { tool: "auth", config: { field: "isAuthenticated" } },
      user: {
        tool: "auth",
        config: { field: "currentUser" },
        dependsOn: ["auth"],
      },
      dashboard: {
        tool: "fetch",
        config: { endpoint: "/api/dashboard/{user.id}" },
        dependsOn: ["user"],
      },
    },
  });

  if (loading) return <p>Loading...</p>;
  if (!data.auth) return <p>Please log in to view this content.</p>;
  if (errors.dashboard) return <p>Failed to load: {errors.dashboard.message}</p>;

  return <div>Welcome, {(data.user as { name: string })?.name}!</div>;
}

Agent-Side: Passing User Context

const { sessionId, url } = await ggui.push({
  story: {
    intent: "Personalized dashboard for authenticated user",
    prompt: `Show a personalized dashboard for the authenticated user.
             Display their name, recent activity, and account settings.`,
    context: {
      userId: authenticatedUserId,
      permissions: userPermissions,
    },
  },
});