nextjs-hasura-auth 0.1.0 → 0.1.2

package/APOLLO.md

@@ -1,52 +1,91 @@
 # Apollo Client Setup (`APOLLO.md`)
 
-This document describes the configured Apollo Client instance used in this project (`lib/apolloClient.ts` or similar) for interacting with the Hasura GraphQL API.
+This document describes the configured Apollo Client instance provided by this package (`lib/apollo.tsx` or similar) for interacting with your Hasura GraphQL API.
 
 ## Purpose
 
-The Apollo Client setup provides a unified interface for sending GraphQL queries, mutations, and subscriptions to Hasura, automatically handling authentication based on the user's session.
+The Apollo Client setup provides a unified interface for sending GraphQL queries, mutations, and subscriptions to Hasura, automatically handling authentication based on the provided JWT token or Hasura Admin Secret.
 
 ## Key Features
 
+*   **Direct Connection:** Connects directly to your Hasura GraphQL endpoint (`NEXT_PUBLIC_HASURA_GRAPHQL_URL`) for HTTP requests and WebSocket endpoint (`NEXT_PUBLIC_HASURA_WS_ENDPOINT` derived from the HTTP URL) for subscriptions.
 *   **Split Link:** Intelligently routes GraphQL operations:
-    *   **HTTP Requests (Queries/Mutations):** Sent via a secure Next.js API route (`/api/graphql-proxy` or equivalent). This proxy uses the user's session JWT to make authenticated requests to Hasura using the `HASURA_ADMIN_SECRET`, keeping the admin secret safe.
-    *   **WebSocket Connections (Subscriptions):** Establishes a direct WebSocket connection to the Hasura endpoint (`NEXT_PUBLIC_HASURA_WS_ENDPOINT`).
-*   **Automatic Authentication:**
-    *   **HTTP:** The proxy handles injecting appropriate `X-Hasura-*` headers based on the user's session JWT.
-    *   **WS:** The WebSocket link automatically includes the user's session JWT in the `connectionParams` for Hasura to authenticate the connection.
-*   **Server-Side Rendering (SSR) / Static Site Generation (SSG) Compatibility:** The client can be initialized and used server-side for pre-fetching data.
-*   **Client-Side Usage:** Seamless integration with Apollo Client's React hooks (`useQuery`, `useMutation`, `useSubscription`).
+    *   **HTTP Requests (Queries/Mutations):** Sent via standard HTTP.
+    *   **WebSocket Connections (Subscriptions):** Uses a WebSocket connection (`graphql-ws`). This requires `ws: true` during client creation and only works client-side.
+*   **Flexible Authentication:**
+    *   **JWT Token Priority:** If a `token` is provided during client creation, it's sent as a `Bearer` token in the `Authorization` header (for both HTTP and WS).
+    *   **Admin Secret Fallback:** If no `token` is provided, but the `HASURA_ADMIN_SECRET` environment variable is set (or a `secret` is passed explicitly), it's sent in the `x-hasura-admin-secret` header (for both HTTP and WS).
+    *   **Public Access:** If neither a token nor a secret is available, requests are sent without authentication headers.
+*   **Server-Side Rendering (SSR) / Client-Side Rendering (CSR) Compatibility:** The client can be created and used both on the server and the client.
+*   **Convenient Provider:** The `createApolloClient` function returns an enhanced client instance that includes a `.Provider` component (`ApolloClientWithProvider`) for easily wrapping parts of your React application.
+*   **Helper Hook:** Provides `useCreateApolloClient` hook for easily creating memoized client instances in React components, especially useful for integrating with authentication state.
+
+<details>
+<summary>Core Exports & Options (`lib/apollo.tsx`)</summary>
+
+*   `createApolloClient(options: ApolloOptions): ApolloClientWithProvider`: Creates a new Apollo Client instance.
+    *   `options.url`: Hasura GraphQL endpoint URL (defaults to `process.env.NEXT_PUBLIC_HASURA_GRAPHQL_URL`).
+    *   `options.ws`: Boolean, enable WebSocket link for subscriptions (defaults to `false`, only works client-side).
+    *   `options.token`: String, JWT token for Bearer authentication.
+    *   `options.secret`: String, Hasura Admin Secret (defaults to `process.env.HASURA_ADMIN_SECRET`).
+*   `useCreateApolloClient(options: ApolloOptions): ApolloClientWithProvider`: React hook to create a memoized Apollo Client instance. Recreates the client if `options` change.
+*   `getClient(options?: ApolloOptions): ApolloClient<any>`: Gets or creates a singleton Apollo Client instance. *Note: Using the singleton pattern might be tricky if the authentication token needs to change dynamically. `useCreateApolloClient` is often preferred in React components.*
+*   `checkConnection(client?): Promise<boolean>`: Sends a simple introspection query to check connectivity to the Hasura endpoint.
+*   `getJwtSecret(): Uint8Array`: Utility to get the Hasura JWT secret key from `process.env.HASURA_JWT_SECRET` (used internally by other parts of the auth system, not typically needed directly for Apollo client setup).
+
+</details>
 
 ## Usage
 
-### Client-Side (React Components)
+### Client-Side (React Components - Recommended)
 
-1.  **Wrap your application (or relevant layout) with `ApolloProvider`:**
-    This is typically done in your root layout file (`app/layout.tsx` or `pages/_app.tsx`). You'll need a way to get the initialized Apollo Client instance.
+1.  **Ensure `SessionProvider` is set up:** The Apollo client often relies on session data (like a JWT) for authentication. Make sure `next-auth/react`'s `SessionProvider` wraps your application, usually in the root layout.
+2.  **Wrap your application/layout with the client's Provider:** Use the `useCreateApolloClient` hook to create a client instance based on the session state and wrap your components using `client.Provider`.
 
     ```typescript
-    // Example in app/layout.tsx (simplified)
-    'use client' // ApolloProvider likely requires client-side context
+    // Example in app/layout.tsx
+    'use client'; // Layout needs to be client-side for providers and hooks
+
+    import { SessionProvider, useSession } from "next-auth/react";
+    import { useCreateApolloClient } from '@/lib/apollo'; // Adjust path
+    import { useMemo } from "react";
+    // Other imports (ThemeProvider, etc.)
+
+    // Wrapper component to manage Apollo client based on session
+    function ApolloWrapper({ children }: { children: React.ReactNode }) {
+      const { data: session } = useSession(); // Get session from next-auth
+
+      // Create Apollo Client, passing the Hasura JWT from the session
+      // The client will be recreated if the session changes
+      const client = useCreateApolloClient(useMemo(() => ({
+        // Make sure your next-auth session callback adds the correct
+        // Hasura-compatible JWT to the session object (e.g., session.accessToken)
+        token: session?.accessToken, // Pass the Hasura JWT
+        ws: true // Enable WebSocket support for subscriptions
+      }), [session]));
 
-    import { ApolloProvider } from '@apollo/client';
-    import { getClient } from '../lib/apolloClient'; // Adjust path as needed
-    import { SessionProvider } from 'next-auth/react'; // Needed for hooks to get session token
+      // Use the convenient Provider attached to the client instance
+      return (
+        <client.Provider>
+          {children}
+        </client.Provider>
+      );
+    }
 
     export default function RootLayout({ children }: { children: React.ReactNode }) {
-      // Create Apollo Client using the token from the session if it exists
-      const client = useClient(useMemo(() => ({
-        token: session?.accessToken, // Pass Hasura token from session
-        ws: true // Enable WebSocket support
-      }), [session]));
-
       return (
-        <html lang="en">
+        <html lang="en" suppressHydrationWarning>
+          <head />
           <body>
-            {/* SessionProvider needed for auth state access */}
+            {/* SessionProvider is required for useSession hook */}
             <SessionProvider>
-              <ApolloProvider client={client}>
-                {children}
-              </ApolloProvider>
+              {/* ApolloWrapper provides the Apollo client based on session */}
+              <ApolloWrapper>
+                {/* Other providers like ThemeProvider */}
+                {/* <ThemeProvider ...> */}
+                  {children}
+                {/* </ThemeProvider> */}
+              </ApolloWrapper>
             </SessionProvider>
           </body>
         </html>
@@ -54,26 +93,16 @@ The Apollo Client setup provides a unified interface for sending GraphQL queries
     }
     ```
 
-2.  **Use Apollo Hooks in Components:**
-    Import and use hooks like `useQuery`, `useMutation`, or `useSubscription` directly in your components. Combine with the `Generator` for dynamic queries (see [`GENERATOR.md`](GENERATOR.md)).
+3.  **Use Apollo Hooks in Components:** Import and use hooks like `useQuery`, `useMutation`, or `useSubscription` directly. The client provided by the context will handle authentication automatically based on the token passed during its creation.
 
     ```typescript
-    import { useQuery } from '@apollo/client';
-    import { Generator, GenerateOptions } from 'nextjs-hasura-auth'; // Assuming Generator is exported
-    // import schema from '...'; // Load schema
-
-    // const generate = Generator(schema);
-
-    function UserProfile({ userId }) {
-      // Example using Generator (assuming you have generate function)
-      // const { query, variables } = generate({
-      //   operation: 'query',
-      //   table: 'users',
-      //   pk_columns: { id: userId },
-      //   returning: ['id', 'name', 'email']
-      // });
+    import { useQuery, gql } from '@apollo/client';
+    // import { Generator } from 'nextjs-hasura-auth'; // Optional: Use with Generator
+
+    function UserProfile() {
+      // Assume user ID is available, e.g., from session or props
+      const userId = '...';
 
-      // Or use a manually written query
       const GET_USER = gql`
         query GetUser($userId: uuid!) {
           users_by_pk(id: $userId) {
@@ -83,46 +112,50 @@ The Apollo Client setup provides a unified interface for sending GraphQL queries
           }
         }
       `;
+
+      // The client from ApolloWrapper's context is used automatically
       const { loading, error, data } = useQuery(GET_USER, {
          variables: { userId }
       });
 
-      if (loading) return <p>Loading...</p>;
-      if (error) return <p>Error: {error.message}</p>;
-
-      return (
-        <div>
-          <h1>{data.users_by_pk.name}</h1>
-          <p>{data.users_by_pk.email}</p>
-        </div>
-      );
+      // ... render logic ...
     }
     ```
 
-### Server-Side (SSR/SSG/Server Components)
+### Server-Side (SSR/SSG/Server Components/API Routes)
 
-1.  **Get Client Instance:** Obtain the Apollo Client instance, potentially re-initializing it for server-side scope if necessary.
-2.  **Fetch Data:** Use `client.query(...)` or `client.mutate(...)` directly.
+1.  **Create Client Instance:** Use `createApolloClient` directly. You need to decide how to authenticate:
+    *   **Admin Access:** Pass the admin secret (e.g., from environment variables) using the `secret` option if you need privileged access.
+    *   **User Access:** If running in the context of a specific user request, obtain their Hasura JWT (e.g., from session data, request headers) and pass it using the `token` option.
 
     ```typescript
-    // Example in a Server Component or getStaticProps/getServerSideProps
-    import { getClient } from '../lib/apolloClient'; // Adjust path
-    // import { Generator } from 'nextjs-hasura-auth';
-    // import schema from '...';
-    // const generate = Generator(schema);
+    // Example in an API Route or Server Component
+    import { createApolloClient } from '@/lib/apollo'; // Adjust path
+    import { gql } from '@apollo/client';
+    // import { getToken } from "next-auth/jwt"
+
+    async function getUserDataOnServer(userId: string, request?: Request) {
+      // Option 1: Use Admin Secret for privileged access
+      // const client = createApolloClient({
+      //   secret: process.env.HASURA_ADMIN_SECRET // Ensure secret is available server-side
+      // });
 
-    async function getUserData(userId) {
-      const client = getClient(); // Get client instance
+      // Option 2: Use User Token (if available from request/session)
+      // Example: const sessionToken = await getToken({ req: request, secret: process.env.NEXTAUTH_SECRET });
+      // const hasuraToken = sessionToken?.accessToken;
+      const client = createApolloClient({
+        token: process.env.SOME_SERVICE_ACCOUNT_TOKEN_IF_NEEDED // Or fetch user token if applicable
+        // url: process.env.NEXT_PUBLIC_HASURA_GRAPHQL_URL // URL can also be passed explicitly
+      });
 
-      // const { query, variables } = generate({ ... });
       const GET_USER = gql`...`; // Your query
 
       try {
         const { data } = await client.query({
-          query: GET_USER, // Use generated or manual query
+          query: GET_USER,
           variables: { userId },
-          // Ensure proper fetch policy for server-side needs
-          fetchPolicy: 'network-only', 
+          // Important for server-side: Avoid using client-side cache
+          fetchPolicy: 'network-only',
         });
         return data.users_by_pk;
       } catch (error) {
@@ -132,17 +165,10 @@ The Apollo Client setup provides a unified interface for sending GraphQL queries
     }
     ```
 
-## Configuration (`lib/apolloClient.ts`)
-
-The core logic resides in `lib/apolloClient.ts` (or a similar file). It typically involves:
+2.  **Fetch Data:** Use `client.query(...)` or `client.mutate(...)`.
 
-1.  **Creating an `HttpLink`:** Points to the Next.js GraphQL proxy (e.g., `/api/graphql-proxy`).
-2.  **Creating a `WebSocketLink`:**
-    *   Uses the `graphql-ws` library.
-    *   Connects to `NEXT_PUBLIC_HASURA_WS_ENDPOINT`.
-    *   Configures `connectionParams` to dynamically fetch the session JWT (e.g., using `getSession()` from `next-auth/react` or a similar mechanism) and include it as `{ headers: { Authorization: Bearer <token> } }`.
-3.  **Using `split`:** Combines the HTTP and WebSocket links, directing operations based on their type (queries/mutations vs. subscriptions).
-4.  **Creating the `ApolloClient` instance:** Initializes the client with the combined link and a cache (e.g., `InMemoryCache`).
-5.  **Handling Singleton Pattern:** Often uses a singleton pattern to avoid creating multiple client instances, especially on the server.
+## Important Considerations
 
-*(Refer to the actual `lib/apolloClient.ts` file for the precise implementation details.)* 
+*   **JWT Token:** Ensure your authentication system (like `next-auth`) generates a Hasura-compatible JWT containing the necessary `https://hasura.io/jwt/claims` and includes it in the session data (e.g., as `session.accessToken`) for the client-side integration to work.
+*   **Environment Variables:** Securely manage `HASURA_ADMIN_SECRET`, `NEXTAUTH_SECRET`, and potentially `HASURA_JWT_SECRET` using environment variable configuration in your hosting provider (e.g., Vercel). `NEXT_PUBLIC_HASURA_GRAPHQL_URL` needs to be accessible client-side.
+*   **WebSocket Security:** WebSocket connections initiated from the client include the token/secret directly in the `connectionParams`. Ensure your Hasura endpoint is properly secured (e.g., using HTTPS/WSS). 

package/GENERATOR.md

@@ -2,7 +2,7 @@
 
 ## Purpose
 
-This document describes the `Generator` function located in `lib/generator.ts`. Its purpose is to dynamically generate GraphQL query strings, `DocumentNode` objects (compatible with Apollo Client), and corresponding variables based on a provided set of options and a Hasura-like schema (`schema.json`). This simplifies the process of constructing GraphQL operations (queries, mutations, subscriptions) within the application.
+This document describes the `Generator` function located in `lib/generator.ts`. Its purpose is to dynamically generate GraphQL query strings, `DocumentNode` objects (compatible with Apollo Client), and corresponding variables based on a provided set of options and a Hasura-like schema (`public/hasura-schema.json`). This simplifies the process of constructing GraphQL operations (queries, mutations, subscriptions) within the application.
 
 ## Usage
 
@@ -14,11 +14,10 @@ This document describes the `Generator` function located in `lib/generator.ts`.
 // Assuming 'nextjs-hasura-auth' is your published package name
 import { Generator, GenerateOptions, GenerateResult } from 'nextjs-hasura-auth'; 
 // Assuming schema is correctly loaded (you might need to handle schema loading differently when using the package)
-// import schema from './schema.json'; 
+import schema from './public/hasura-schema.json'; 
 
 // Initialize the generator (Schema needs to be passed)
-// const generate = Generator(schema); 
-// TODO: Document how schema should be provided when using the package
+const generate = Generator(schema); 
 
 // Define options for your query
 const options: GenerateOptions = {
@@ -77,7 +76,7 @@ The `generate` function accepts an object with the following properties:
 
 ## Examples
 
-*(Note: Variable types like `users_bool_exp`, `[users_order_by!]`, `uuid!`, `users_pk_columns_input!`, `users_set_input!`, `[users_insert_input!]!` are inferred based on schema structure and conventions. Ensure your `schema.json` reflects the actual types used by Hasura.)*
+*(Note: Variable types like `users_bool_exp`, `[users_order_by!]`, `uuid!`, `users_pk_columns_input!`, `users_set_input!`, `[users_insert_input!]!` are inferred based on schema structure and conventions. Ensure your `public/hasura-schema.json` reflects the actual types used by Hasura.)*
 
 **Navigation**
 

package/README.md

@@ -3,11 +3,19 @@
 This project provides a robust starting point for building applications using Next.js (App Router), Hasura, and strong authentication patterns. It features JWT-based authentication with NextAuth.js, a secure GraphQL proxy to Hasura, direct WebSocket support for subscriptions, and a powerful dynamic query generator.
 
 [![Generator Documentation](https://img.shields.io/badge/Generator%20Docs-MD-blue)](GENERATOR.md) [![Apollo Client Documentation](https://img.shields.io/badge/Apollo%20Client%20Docs-MD-orange)](APOLLO.md)
+[![Authentication Helpers Documentation](https://img.shields.io/badge/Auth%20Helpers%20Docs-MD-green)](AUTH.md) [![Hasura Admin Client Documentation](https://img.shields.io/badge/Hasura%20Client%20Docs-MD-purple)](HASURA.md)
+[![Generated Client Documentation](https://img.shields.io/badge/Generated%20Client%20Docs-MD-cyan)](CLIENT.md)
 
 See [`GENERATOR.md`](GENERATOR.md) for detailed documentation on the dynamic GraphQL query generator, which simplifies creating queries, mutations, and subscriptions based on your Hasura schema.
 
 See [`APOLLO.md`](APOLLO.md) for details on the configured Apollo Client instance and how it handles authenticated requests and subscriptions.
 
+See [`AUTH.md`](AUTH.md) for documentation on WebSocket and request authentication helpers.
+
+See [`HASURA.md`](HASURA.md) for details on the Hasura Admin API client used for migrations.
+
+See [`CLIENT.md`](CLIENT.md) for details on the `Client` class and React hooks that combine the Generator and Apollo Client for easy data operations.
+
 ## ✨ Features Checklist
 
 **Implemented:**
@@ -17,16 +25,17 @@ See [`APOLLO.md`](APOLLO.md) for details on the configured Apollo Client instanc
 *   [x] **Unified Apollo Client:** A configured Apollo Client instance handles both authenticated HTTP requests (via the proxy) and direct, authenticated WebSocket connections for subscriptions.
 *   [x] **Dynamic Query Generator:** A versatile query generator (`lib/generator.ts`) allows dynamic creation of GraphQL operations based on options and schema, suitable for client/server use.
 *   [x] **WebSocket Authentication:** Real-time subscriptions connect directly to Hasura via WebSockets, authenticated using the user's session JWT.
+*   [x] **Generated Client Wrapper:** A `Client` class and associated React hooks (`useQuery`, `useSubscription`) that combine the Generator and Apollo Client for simplified data fetching and mutations (`lib/client.tsx`).
 
 **Planned / Future Ideas:**
 
-*   [ ] **Convenience Hooks:** Create easy-to-use React hooks (`useQuery`, `useSubscription`, potentially a `useCRUD` hook/class) that integrate the `Generator` with Apollo Client for streamlined data fetching in components.
+*   [ ] **Advanced Convenience Hooks:** Potentially create a more advanced `useCRUD` hook/class built on top of the existing `Client` or hooks for even more streamlined common CRUD operations in components.
 *   [ ] **Multi-Platform Builds:** Native builders for Android, iOS, MacOS, Windows, Linux, Oculus (e.g., using Tauri, Capacitor, or Electron).
 *   [ ] **Unique Environment Builders:** Specific builds for Chrome Extensions, Firefox Extensions, and VSCode Extensions (including custom UI elements).
 *   [ ] Additional Authentication Providers (OAuth: Google, GitHub, etc.).
 *   [ ] Role-based access control examples.
 *   [ ] Advanced caching strategies.
-*   [ ] Comprehensive end-to-end testing setup.
+*   [ ] Comprehensive end-to-end testing setup for UI and hooks.
 
 ## 🚀 Core Concepts
 
@@ -62,7 +71,7 @@ Interaction with the Hasura GraphQL Engine is handled in two primary ways:
 
 ### 4. Dynamic Query Generation (`GENERATOR.md`)
 
-*   The core `Generator` function in `lib/generator.ts` allows you to build complex GraphQL operations dynamically based on a simple options object and your `schema.json`.
+*   The core `Generator` function in `lib/generator.ts` allows you to build complex GraphQL operations dynamically based on a simple options object and your `public/hasura-schema.json`.
 *   This avoids writing lengthy GraphQL query strings manually.
 *   See [`GENERATOR.md`](GENERATOR.md) for full usage details and examples.
 *   *Convenience hooks (like `useQuery`, `useSubscription`, `useCRUD`) are planned to further simplify using the generator within React components.*
@@ -84,10 +93,10 @@ Interaction with the Hasura GraphQL Engine is handled in two primary ways:
 │   ├── debug.ts          # Debug utility
 │   └── ...
 ├── public/               # Static assets
+│   ├── hasura-schema.json # Hasura GraphQL schema (for Generator)
 ├── styles/               # Global styles
-├── .env.local            # Environment variables (Gitignored)
+├── .env                  # Environment variables (Gitignored)
 ├── GENERATOR.md          # Query Generator Documentation
-├── schema.json           # Hasura GraphQL schema (for Generator)
 ├── next.config.js        # Next.js configuration
 ├── package.json          # Project dependencies and scripts
 └── tsconfig.json         # TypeScript configuration
@@ -95,23 +104,47 @@ Interaction with the Hasura GraphQL Engine is handled in two primary ways:
 
 ## 🛠️ Getting Started
 
+### As package
+
+1.  **Install the package:**
+    ```bash
+    npm install nextjs-hasura-auth
+    ```
+
+2.  **Import the package:**
+    ```ts
+    import { ... } from 'nextjs-hasura-auth';
+    ```
+
+
+### As boilerplate
+
 1.  **Clone the repository:**
     ```bash
     git clone <repository-url>
     cd <repository-directory>
+    git remote add <your-project-name> <your-project-url>
+    git push <your-project-name> main
+    ```
+
+    Sync updates from the original repository:
+    ```bash
+    git fetch origin
+    git checkout main
+    git merge origin/main
+    # solve conflicts
+    git push origin main
     ```
 
 2.  **Install dependencies:**
     ```bash
-    npm install
-    # or
-    yarn install
-    # or
-    pnpm install
+    npm ci
     ```
 
 3.  **Set up Environment Variables:**
-    Create a `.env.local` file in the root directory and add the following variables:
+    Create a `.env` file in the root directory and add the following variables:
+
+    > Create Hasura instance in [Hasura Cloud](https://hasura.io/cloud) or [Hasura Self-Hosted](https://hasura.io/docs/latest/graphql/core/deployment/hasura-cli/hasura-cli-install/)
 
     ```env
     # Hasura Configuration
@@ -130,7 +163,7 @@ Interaction with the Hasura GraphQL Engine is handled in two primary ways:
     *   Ensure `NEXTAUTH_URL` points to your application's base URL.
 
 4.  **Update Hasura Schema:**
-    Make sure the `schema.json` file in the root is up-to-date with your Hasura instance's schema. You might need to fetch this from Hasura if you've made changes.
+    Make sure the `public/hasura-schema.json` file in the root is up-to-date with your Hasura instance's schema. You might need to fetch this from Hasura if you've made changes.
 
 5.  **Run the development server:**
     ```bash
@@ -143,6 +176,36 @@ Interaction with the Hasura GraphQL Engine is handled in two primary ways:
 
 6.  Open [http://localhost:3000](http://localhost:3000) (or your `NEXTAUTH_URL`) in your browser.
 
+7. Configure Google OAuth
+    - Go to [Google Cloud Console](https://console.cloud.google.com/)
+    - Create a new project
+    - Enable Google OAuth API
+    - Create credentials
+    - Add `http://localhost:3000/api/auth/callback/google` as a redirect URI
+    - Copy the client ID and client secret
+    - Add them to the `.env` file or vercel environment variables
+    ```env
+    GOOGLE_CLIENT_ID="<your-google-client-id>"
+    GOOGLE_CLIENT_SECRET="<your-google-client-secret>"
+    ```
+
+8. Configure Yandex OAuth
+    - Go to [Yandex Cloud Console](https://oauth.yandex.com/client/new)
+    - Create a new application
+    - Add `http://localhost:3000/api/auth/callback/yandex` as a redirect URI
+    - Copy the client ID and client secret
+    - Add them to the `.env` file or vercel environment variables
+    ```env
+    YANDEX_CLIENT_ID="<your-yandex-client-id>"
+    YANDEX_CLIENT_SECRET="<your-yandex-client-secret>"  
+    ```
+
+9. Configure Vercel
+    - Go to [Vercel](https://vercel.com/)
+    - Create a new project
+    - Add vercel environment variables from `.env` file
+    - Deploy the project
+
 ## Environment Variables Summary
 
 *   `NEXT_PUBLIC_HASURA_GRAPHQL_ENDPOINT`: Public URL for Hasura GraphQL HTTP endpoint.
@@ -150,5 +213,3 @@ Interaction with the Hasura GraphQL Engine is handled in two primary ways:
 *   `HASURA_ADMIN_SECRET`: Your Hasura admin secret (kept server-side).
 *   `NEXTAUTH_URL`: The canonical URL of your Next.js application.
 *   `NEXTAUTH_SECRET`: A secret key used by NextAuth.js to sign JWTs, etc.
-
-Let me know what you think!

package/dist/lib/apollo.d.ts

@@ -1,15 +1,15 @@
 import { ApolloClient } from '@apollo/client';
-/**
- * Get JWT secret from environment variables
- * @returns {Uint8Array} Secret key for JWT signing
- */
-export declare const getJwtSecret: () => Uint8Array;
-interface ApolloOptions {
+export interface ApolloOptions {
     url?: string;
     ws?: boolean;
     token?: string;
     secret?: string;
 }
+export interface ApolloClientWithProvider extends ApolloClient<any> {
+    Provider: React.ComponentType<{
+        children: React.ReactNode;
+    }>;
+}
 /**
  * Create Apollo Client
  *
@@ -19,7 +19,7 @@ interface ApolloOptions {
  * @param {string} options.secret - Admin secret for Hasura
  * @returns {ApolloClient} Apollo Client
  */
-export declare function createClient(options?: ApolloOptions): ApolloClient<import("@apollo/client").NormalizedCacheObject>;
+export declare function createApolloClient(options?: ApolloOptions): ApolloClientWithProvider;
 /**
  * Get or create Apollo client instance
  * @param options Client options
@@ -30,14 +30,14 @@ export declare function getClient(options?: {}): ApolloClient<any>;
  * React hook to get Apollo client instance
  * @returns Apollo client instance
  */
-export declare function useClient(options: ApolloOptions): ApolloClient<import("@apollo/client").NormalizedCacheObject>;
+export declare function useCreateApolloClient(options: ApolloOptions): ApolloClientWithProvider;
 /**
  * Check connection to Hasura GraphQL endpoint
  * @returns {Promise<boolean>} True if connection is successful
  */
 export declare function checkConnection(client?: ApolloClient<any>): Promise<boolean>;
 declare const _default: {
-    createClient: typeof createClient;
+    createApolloClient: typeof createApolloClient;
     getClient: typeof getClient;
     getJwtSecret: () => Uint8Array;
     checkConnection: typeof checkConnection;

package/dist/lib/{apollo.js → apollo.jsx}

@@ -12,10 +12,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getJwtSecret = void 0;
-exports.createClient = createClient;
+exports.createApolloClient = createApolloClient;
 exports.getClient = getClient;
-exports.useClient = useClient;
+exports.useCreateApolloClient = useCreateApolloClient;
 exports.checkConnection = checkConnection;
 const client_1 = require("@apollo/client");
 const context_1 = require("@apollo/client/link/context");
@@ -25,39 +24,11 @@ const graphql_ws_1 = require("graphql-ws");
 const cross_fetch_1 = __importDefault(require("cross-fetch"));
 const debug_1 = __importDefault(require("./debug"));
 const react_1 = require("react");
+const jwt_1 = require("./jwt");
 // Create a debug logger for this module
 const debug = (0, debug_1.default)('apollo');
 // Determine if running on client
 const isClient = typeof window !== 'undefined';
-/**
- * Get JWT secret from environment variables
- * @returns {Uint8Array} Secret key for JWT signing
- */
-const getJwtSecret = () => {
-    try {
-        const jwtSecret = process.env.HASURA_JWT_SECRET || '{"type":"HS256","key":"your-secret-key"}';
-        // Parse JWT configuration (may be in JSON format)
-        let secretKey;
-        try {
-            const jwtConfig = typeof jwtSecret === 'string' ? JSON.parse(jwtSecret) : jwtSecret;
-            secretKey = jwtConfig.key;
-            if (!secretKey) {
-                throw new Error('JWT key not found in configuration');
-            }
-        }
-        catch (e) {
-            // If failed to parse as JSON, use as string
-            secretKey = jwtSecret;
-        }
-        // Convert key to Uint8Array (required for jose)
-        return new TextEncoder().encode(secretKey);
-    }
-    catch (error) {
-        debug('apollo', '❌ Error getting JWT secret:', error);
-        throw error;
-    }
-};
-exports.getJwtSecret = getJwtSecret;
 /**
  * Create Apollo Client
  *
@@ -67,7 +38,7 @@ exports.getJwtSecret = getJwtSecret;
  * @param {string} options.secret - Admin secret for Hasura
  * @returns {ApolloClient} Apollo Client
  */
-function createClient(options = {}) {
+function createApolloClient(options = {}) {
     // Default values
     const { url = process.env.NEXT_PUBLIC_HASURA_GRAPHQL_URL, ws = false, token = undefined, secret = process.env.HASURA_ADMIN_SECRET } = options;
     if (!url) {
@@ -140,7 +111,7 @@ function createClient(options = {}) {
         }, wsLink, httpLink);
     }
     // Create Apollo Client
-    return new client_1.ApolloClient({
+    const apolloClient = new client_1.ApolloClient({
         link: splitLink,
         cache: new client_1.InMemoryCache(),
         defaultOptions: {
@@ -157,6 +128,10 @@ function createClient(options = {}) {
             },
         }
     });
+    apolloClient.Provider = function Provider({ children }) {
+        return <client_1.ApolloProvider client={apolloClient}>{children}</client_1.ApolloProvider>;
+    };
+    return apolloClient;
 }
 // Default client instance
 let clientInstance = null;
@@ -167,7 +142,7 @@ let clientInstance = null;
  */
 function getClient(options = {}) {
     if (!clientInstance) {
-        clientInstance = createClient(options);
+        clientInstance = createApolloClient(options);
     }
     return clientInstance;
 }
@@ -175,8 +150,8 @@ function getClient(options = {}) {
  * React hook to get Apollo client instance
  * @returns Apollo client instance
  */
-function useClient(options) {
-    return (0, react_1.useMemo)(() => createClient(options), [options]);
+function useCreateApolloClient(options) {
+    return (0, react_1.useMemo)(() => createApolloClient(options), [options]);
 }
 const CHECK_CONNECTION = (0, client_1.gql) `
 query CheckConnection {
@@ -199,8 +174,8 @@ function checkConnection() {
     });
 }
 exports.default = {
-    createClient,
+    createApolloClient,
     getClient,
-    getJwtSecret: exports.getJwtSecret,
+    getJwtSecret: jwt_1.getJwtSecret,
     checkConnection
 };

package/dist/lib/auth.d.ts

@@ -0,0 +1,16 @@
+import { NextRequest } from "next/server";
+import { IncomingMessage } from "http";
+import { JWT } from 'next-auth/jwt';
+import WebSocket from "ws";
+export declare function getTokenFromRequest(request: NextRequest): Promise<JWT | null>;
+export declare function WsClientsManager(route?: string): {
+    Client: (client: WebSocket) => string;
+    getToken(request: IncomingMessage, clientId: string): Promise<string | JWT | null>;
+    parseUser(request: IncomingMessage, clientId: string): Promise<any>;
+    delete(clientId: string): void;
+    getClient(clientId: string): {
+        ws: WebSocket;
+        userId?: string;
+        user?: any;
+    } | undefined;
+};