@drmhse/authos-react 0.1.0 → 0.1.2

package/README.md

@@ -0,0 +1,277 @@
+# @drmhse/authos-react
+
+[![npm version](https://img.shields.io/npm/v/@drmhse/authos-react)](https://www.npmjs.com/package/@drmhse/authos-react)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+
+React adapter for [AuthOS](https://authos.dev) - the multi-tenant authentication platform. Provides React hooks, components, and Next.js integration.
+
+## Installation
+
+```bash
+npm install @drmhse/authos-react
+```
+
+Peer dependencies:
+```bash
+npm install react react-dom
+```
+
+## Quick Start
+
+Wrap your app with `AuthOSProvider`, then use the hooks and components throughout your app.
+
+```tsx
+import { AuthOSProvider } from '@drmhse/authos-react';
+
+function App() {
+  return (
+    <AuthOSProvider
+      config={{
+        baseURL: 'https://sso.example.com'
+      }}
+    >
+      <YourApp />
+    </AuthOSProvider>
+  );
+}
+```
+
+## Components
+
+### SignIn
+
+Pre-built sign-in form with email/password and OAuth provider buttons.
+
+```tsx
+import { SignIn } from '@drmhse/authos-react';
+
+function LoginPage() {
+  return (
+    <SignIn
+      onSuccess={() => console.log('Logged in!')}
+      onError={(err) => console.error(err)}
+    />
+  );
+}
+```
+
+**Props:**
+| Prop | Type | Description |
+|------|------|-------------|
+| `onSuccess` | `() => void` | Callback after successful login |
+| `onError` | `(error: Error) => void` | Callback on login error |
+
+### SignUp
+
+Registration form for new users.
+
+```tsx
+import { SignUp } from '@drmhse/authos-react';
+
+function RegisterPage() {
+  return (
+    <SignUp
+      onSuccess={() => console.log('Registered!')}
+      onError={(err) => console.error(err)}
+    />
+  );
+}
+```
+
+**Props:** Same as `SignIn`
+
+### UserButton
+
+User menu button that shows avatar/name and dropdown with profile/signout.
+
+```tsx
+import { UserButton } from '@drmhse/authos-react';
+
+function Header() {
+  return <UserButton />;
+}
+```
+
+### OrganizationSwitcher
+
+Dropdown to switch between organizations (for multi-tenant users).
+
+```tsx
+import { OrganizationSwitcher } from '@drmhse/authos-react';
+
+function Sidebar() {
+  return <OrganizationSwitcher />;
+}
+```
+
+### Protect
+
+Conditional rendering based on user permissions.
+
+```tsx
+import { Protect } from '@drmhse/authos-react';
+
+function AdminPanel() {
+  return (
+    <Protect
+      permission="admin:access"
+      fallback={<p>Access denied. Admins only.</p>}
+    >
+      <AdminDashboard />
+    </Protect>
+  );
+}
+```
+
+**Props:**
+| Prop | Type | Description |
+|------|------|-------------|
+| `permission` | `string` | Required permission to access content |
+| `fallback` | `ReactNode` | Shown when user lacks permission |
+| `children` | `ReactNode` | Protected content |
+
+## Hooks
+
+### useAuthOS
+
+Access the AuthOS client directly.
+
+```tsx
+import { useAuthOS } from '@drmhse/authos-react';
+
+function Profile() {
+  const { client, isAuthenticated, isLoading } = useAuthOS();
+
+  if (isLoading) return <div>Loading...</div>;
+  if (!isAuthenticated) return <div>Please log in</div>;
+
+  const handleLogout = async () => {
+    await client.auth.logout();
+  };
+
+  return (
+    <div>
+      <button onClick={handleLogout}>Logout</button>
+    </div>
+  );
+}
+```
+
+### useUser
+
+Get the current user's profile.
+
+```tsx
+import { useUser } from '@drmhse/authos-react';
+
+function UserProfile() {
+  const { user, isLoading } = useUser();
+
+  if (isLoading) return <div>Loading...</div>;
+  return <div>Welcome, {user?.email}</div>;
+}
+```
+
+### useOrganization
+
+Get the current organization and list of organizations.
+
+```tsx
+import { useOrganization } from '@drmhse/authos-react';
+
+function OrgInfo() {
+  const { currentOrganization, organizations } = useOrganization();
+
+  return (
+    <div>
+      <h3>{currentOrganization?.name}</h3>
+      <ul>
+        {organizations.map((org) => (
+          <li key={org.id}>{org.name}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+```
+
+### usePermission, useAnyPermission, useAllPermissions
+
+Check user permissions.
+
+```tsx
+import { usePermission } from '@drmhse/authos-react';
+
+function AdminButton() {
+  const canAccessAdmin = usePermission('admin:access');
+
+  if (!canAccessAdmin) return null;
+
+  return <button>Admin Panel</button>;
+}
+```
+
+## Next.js Integration
+
+For Next.js App Router, use the middleware and server utilities:
+
+```tsx
+// middleware.ts
+import { authMiddleware } from '@drmhse/authos-react/nextjs';
+
+export default authMiddleware();
+```
+
+```tsx
+// app/dashboard/page.tsx
+import { currentUser } from '@drmhse/authos-react/nextjs';
+
+export default async function Dashboard() {
+  const user = await currentUser();
+
+  if (!user) {
+    return <div>Please log in</div>;
+  }
+
+  return <div>Welcome, {user.email}</div>;
+}
+```
+
+## API Reference
+
+### AuthOSProvider Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `config.baseURL` | `string` | **required** | AuthOS API URL |
+| `config.storage` | `TokenStorage` | `localStorage` | Custom token storage |
+| `config.autoRefresh` | `boolean` | `true` | Auto-refresh expired tokens |
+| `config.onAuthStateChange` | `(user) => void` | - | Callback when auth state changes |
+
+### SsoClient
+
+The underlying client from `@drmhse/sso-sdk`. See [SDK docs](https://www.npmjs.com/package/@drmhse/sso-sdk) for full API.
+
+```tsx
+const { client } = useAuthOS();
+
+// Authentication
+await client.auth.login({ email, password });
+await client.auth.logout();
+await client.auth.register({ email, password, org_slug });
+
+// User
+await client.user.getProfile();
+await client.user.updateProfile({ name });
+await client.user.changePassword({ old, new });
+
+// Organizations
+await client.organizations.list();
+await client.organizations.get(slug);
+
+// And more...
+```
+
+## License
+
+MIT © DRM HSE

package/dist/index.d.mts

@@ -19,6 +19,12 @@ interface AuthOSProviderProps {
      * Optional: Provide an existing SsoClient instance instead of creating a new one
      */
     client?: SsoClient;
+    /**
+     * Optional: Initial session token from server-side (for SSR hydration).
+     * When provided, skips the initial loading state on the client.
+     * Typically passed from cookies() in Next.js server components.
+     */
+    initialSessionToken?: string;
 }
 /**
  * Authentication context state
@@ -122,8 +128,28 @@ interface ProtectProps {
  *   );
  * }
  * ```
+ *
+ * @example With SSR token (Next.js App Router)
+ * ```tsx
+ * import { cookies } from 'next/headers';
+ * import { AuthOSProvider } from '@drmhse/authos-react';
+ *
+ * export default async function RootLayout({ children }) {
+ *   const cookieStore = cookies();
+ *   const token = cookieStore.get('authos_token')?.value;
+ *
+ *   return (
+ *     <AuthOSProvider
+ *       config={{ baseURL: 'https://auth.example.com' }}
+ *       initialSessionToken={token}
+ *     >
+ *       {children}
+ *     </AuthOSProvider>
+ *   );
+ * }
+ * ```
  */
-declare function AuthOSProvider({ config, children, client: externalClient }: AuthOSProviderProps): react_jsx_runtime.JSX.Element;
+declare function AuthOSProvider({ config, children, client: externalClient, initialSessionToken }: AuthOSProviderProps): react_jsx_runtime.JSX.Element;
 /**
  * Hook to access the AuthOS context.
  * Must be used within an AuthOSProvider.

package/dist/index.d.ts

@@ -19,6 +19,12 @@ interface AuthOSProviderProps {
      * Optional: Provide an existing SsoClient instance instead of creating a new one
      */
     client?: SsoClient;
+    /**
+     * Optional: Initial session token from server-side (for SSR hydration).
+     * When provided, skips the initial loading state on the client.
+     * Typically passed from cookies() in Next.js server components.
+     */
+    initialSessionToken?: string;
 }
 /**
  * Authentication context state
@@ -122,8 +128,28 @@ interface ProtectProps {
  *   );
  * }
  * ```
+ *
+ * @example With SSR token (Next.js App Router)
+ * ```tsx
+ * import { cookies } from 'next/headers';
+ * import { AuthOSProvider } from '@drmhse/authos-react';
+ *
+ * export default async function RootLayout({ children }) {
+ *   const cookieStore = cookies();
+ *   const token = cookieStore.get('authos_token')?.value;
+ *
+ *   return (
+ *     <AuthOSProvider
+ *       config={{ baseURL: 'https://auth.example.com' }}
+ *       initialSessionToken={token}
+ *     >
+ *       {children}
+ *     </AuthOSProvider>
+ *   );
+ * }
+ * ```
  */
-declare function AuthOSProvider({ config, children, client: externalClient }: AuthOSProviderProps): react_jsx_runtime.JSX.Element;
+declare function AuthOSProvider({ config, children, client: externalClient, initialSessionToken }: AuthOSProviderProps): react_jsx_runtime.JSX.Element;
 /**
  * Hook to access the AuthOS context.
  * Must be used within an AuthOSProvider.

package/dist/index.js

@@ -6,15 +6,22 @@ var jsxRuntime = require('react/jsx-runtime');
 
 // src/context.tsx
 var AuthOSContext = react.createContext(null);
-function AuthOSProvider({ config, children, client: externalClient }) {
+function AuthOSProvider({ config, children, client: externalClient, initialSessionToken }) {
   const clientRef = react.useRef(null);
   if (!clientRef.current) {
     clientRef.current = externalClient ?? new ssoSdk.SsoClient(config);
   }
   const client = clientRef.current;
+  const hasInitialToken = react.useRef(!!initialSessionToken);
+  react.useEffect(() => {
+    if (initialSessionToken && hasInitialToken.current) {
+      client.setSession({ access_token: initialSessionToken });
+      hasInitialToken.current = false;
+    }
+  }, [client, initialSessionToken]);
   const [user, setUser] = react.useState(null);
   const [organization, setOrganization] = react.useState(null);
-  const [isLoading, setIsLoading] = react.useState(true);
+  const [isLoading, setIsLoading] = react.useState(!initialSessionToken);
   const refreshUser = react.useCallback(async () => {
     try {
       const profile = await client.user.getProfile();

package/dist/index.mjs

@@ -1,19 +1,26 @@
-import { createContext, useRef, useState, useCallback, useEffect, useMemo, useContext } from 'react';
+import { createContext, useRef, useEffect, useState, useCallback, useMemo, useContext } from 'react';
 import { SsoClient, SsoApiError } from '@drmhse/sso-sdk';
 export { AuthErrorCodes, SsoApiError, SsoClient } from '@drmhse/sso-sdk';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/context.tsx
 var AuthOSContext = createContext(null);
-function AuthOSProvider({ config, children, client: externalClient }) {
+function AuthOSProvider({ config, children, client: externalClient, initialSessionToken }) {
   const clientRef = useRef(null);
   if (!clientRef.current) {
     clientRef.current = externalClient ?? new SsoClient(config);
   }
   const client = clientRef.current;
+  const hasInitialToken = useRef(!!initialSessionToken);
+  useEffect(() => {
+    if (initialSessionToken && hasInitialToken.current) {
+      client.setSession({ access_token: initialSessionToken });
+      hasInitialToken.current = false;
+    }
+  }, [client, initialSessionToken]);
   const [user, setUser] = useState(null);
   const [organization, setOrganization] = useState(null);
-  const [isLoading, setIsLoading] = useState(true);
+  const [isLoading, setIsLoading] = useState(!initialSessionToken);
   const refreshUser = useCallback(async () => {
     try {
       const profile = await client.user.getProfile();

package/dist/nextjs.d.mts

@@ -1,4 +1,5 @@
 import { NextRequest, NextResponse } from 'next/server';
+import { SsoClient } from '@drmhse/sso-sdk';
 
 interface AuthMiddlewareConfig {
     /**
@@ -143,4 +144,86 @@ declare function auth(): Promise<AuthState>;
  */
 declare function getToken(cookieName?: string): Promise<string | null>;
 
-export { type AuthMiddlewareConfig, type AuthState, type AuthUser, auth, authMiddleware, currentUser, getToken };
+/**
+ * Configuration for creating an AuthOS client optimized for Next.js
+ */
+interface CreateAuthOSClientOptions {
+    /**
+     * Base URL of the SSO API service
+     */
+    baseURL: string;
+    /**
+     * Cookie name for storing the access token
+     * @default 'authos_token'
+     */
+    tokenCookie?: string;
+    /**
+     * Cookie domain (optional)
+     * Use this for subdomain-wide auth
+     */
+    domain?: string;
+    /**
+     * Cookie path
+     * @default '/'
+     */
+    path?: string;
+    /**
+     * SameSite cookie attribute
+     * @default 'lax'
+     */
+    sameSite?: 'strict' | 'lax' | 'none';
+}
+/**
+ * Create an SSO client optimized for Next.js with cookie storage.
+ *
+ * This client uses cookies instead of localStorage, which enables:
+ * - Server-side middleware auth checks
+ * - SSR hydration without loading flash
+ * - Shared auth state across tabs
+ *
+ * @example
+ * ```tsx
+ * // lib/authos.ts
+ * import { createAuthOSClient } from '@drmhse/authos-react/nextjs';
+ *
+ * export const authos = createAuthOSClient({
+ *   baseURL: process.env.NEXT_PUBLIC_AUTHOS_URL!,
+ * });
+ * ```
+ *
+ * @example With custom cookie settings
+ * ```tsx
+ * import { createAuthOSClient } from '@drmhse/authos-react/nextjs';
+ *
+ * export const authos = createAuthOSClient({
+ *   baseURL: 'https://auth.example.com',
+ *   tokenCookie: 'my_app_token',
+ *   domain: '.example.com', // Share across subdomains
+ * });
+ * ```
+ */
+declare function createAuthOSClient(options: CreateAuthOSClientOptions): SsoClient;
+/**
+ * Create an SSO client for use with SSR token fetching.
+ * Use this in server components where you need to make API calls
+ * with a token from cookies.
+ *
+ * @example
+ * ```tsx
+ * // app/dashboard/page.tsx
+ * import { createServerClient } from '@drmhse/authos-react/nextjs';
+ * import { getToken } from '@drmhse/authos-react/nextjs';
+ *
+ * export default async function DashboardPage() {
+ *   const token = await getToken();
+ *   const client = createServerClient(token);
+ *
+ *   const user = token ? await client.user.getProfile() : null;
+ *
+ *   return <div>Welcome, {user?.email}!</div>;
+ * }
+ * ```
+ */
+declare function createServerClient(token: string, baseURL: string): SsoClient;
+
+export { type AuthMiddlewareConfig, type AuthState, type AuthUser, type CreateAuthOSClientOptions, auth, authMiddleware, createAuthOSClient, createServerClient, currentUser, getToken };

package/dist/nextjs.d.ts

@@ -1,4 +1,5 @@
 import { NextRequest, NextResponse } from 'next/server';
+import { SsoClient } from '@drmhse/sso-sdk';
 
 interface AuthMiddlewareConfig {
     /**
@@ -143,4 +144,86 @@ declare function auth(): Promise<AuthState>;
  */
 declare function getToken(cookieName?: string): Promise<string | null>;
 
-export { type AuthMiddlewareConfig, type AuthState, type AuthUser, auth, authMiddleware, currentUser, getToken };
+/**
+ * Configuration for creating an AuthOS client optimized for Next.js
+ */
+interface CreateAuthOSClientOptions {
+    /**
+     * Base URL of the SSO API service
+     */
+    baseURL: string;
+    /**
+     * Cookie name for storing the access token
+     * @default 'authos_token'
+     */
+    tokenCookie?: string;
+    /**
+     * Cookie domain (optional)
+     * Use this for subdomain-wide auth
+     */
+    domain?: string;
+    /**
+     * Cookie path
+     * @default '/'
+     */
+    path?: string;
+    /**
+     * SameSite cookie attribute
+     * @default 'lax'
+     */
+    sameSite?: 'strict' | 'lax' | 'none';
+}
+/**
+ * Create an SSO client optimized for Next.js with cookie storage.
+ *
+ * This client uses cookies instead of localStorage, which enables:
+ * - Server-side middleware auth checks
+ * - SSR hydration without loading flash
+ * - Shared auth state across tabs
+ *
+ * @example
+ * ```tsx
+ * // lib/authos.ts
+ * import { createAuthOSClient } from '@drmhse/authos-react/nextjs';
+ *
+ * export const authos = createAuthOSClient({
+ *   baseURL: process.env.NEXT_PUBLIC_AUTHOS_URL!,
+ * });
+ * ```
+ *
+ * @example With custom cookie settings
+ * ```tsx
+ * import { createAuthOSClient } from '@drmhse/authos-react/nextjs';
+ *
+ * export const authos = createAuthOSClient({
+ *   baseURL: 'https://auth.example.com',
+ *   tokenCookie: 'my_app_token',
+ *   domain: '.example.com', // Share across subdomains
+ * });
+ * ```
+ */
+declare function createAuthOSClient(options: CreateAuthOSClientOptions): SsoClient;
+/**
+ * Create an SSO client for use with SSR token fetching.
+ * Use this in server components where you need to make API calls
+ * with a token from cookies.
+ *
+ * @example
+ * ```tsx
+ * // app/dashboard/page.tsx
+ * import { createServerClient } from '@drmhse/authos-react/nextjs';
+ * import { getToken } from '@drmhse/authos-react/nextjs';
+ *
+ * export default async function DashboardPage() {
+ *   const token = await getToken();
+ *   const client = createServerClient(token);
+ *
+ *   const user = token ? await client.user.getProfile() : null;
+ *
+ *   return <div>Welcome, {user?.email}!</div>;
+ * }
+ * ```
+ */
+declare function createServerClient(token: string, baseURL: string): SsoClient;
+
+export { type AuthMiddlewareConfig, type AuthState, type AuthUser, type CreateAuthOSClientOptions, auth, authMiddleware, createAuthOSClient, createServerClient, currentUser, getToken };

package/dist/nextjs.js

@@ -1,5 +1,7 @@
 'use strict';
 
+var ssoSdk = require('@drmhse/sso-sdk');
+
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -5871,8 +5873,39 @@ async function getToken(cookieName = "authos_token") {
   const cookieStore = await (0, import_headers.cookies)();
   return cookieStore.get(cookieName)?.value ?? null;
 }
+function createAuthOSClient(options) {
+  const {
+    baseURL,
+    tokenCookie = "authos_token",
+    domain,
+    path = "/",
+    sameSite = "lax"
+  } = options;
+  return new ssoSdk.SsoClient({
+    baseURL,
+    storage: new ssoSdk.CookieStorage({
+      domain,
+      path,
+      secure: true,
+      // Always use secure cookies for auth
+      sameSite,
+      // 30 days default max age
+      maxAge: 30 * 24 * 60 * 60
+    }),
+    storagePrefix: tokenCookie
+  });
+}
+function createServerClient(token, baseURL) {
+  return new ssoSdk.SsoClient({
+    baseURL,
+    token
+    // Initial token for server-side use
+  });
+}
 
 exports.auth = auth;
 exports.authMiddleware = authMiddleware;
+exports.createAuthOSClient = createAuthOSClient;
+exports.createServerClient = createServerClient;
 exports.currentUser = currentUser;
 exports.getToken = getToken;

package/dist/nextjs.mjs

@@ -1,3 +1,5 @@
+import { SsoClient, CookieStorage } from '@drmhse/sso-sdk';
+
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -5869,5 +5871,34 @@ async function getToken(cookieName = "authos_token") {
   const cookieStore = await (0, import_headers.cookies)();
   return cookieStore.get(cookieName)?.value ?? null;
 }
+function createAuthOSClient(options) {
+  const {
+    baseURL,
+    tokenCookie = "authos_token",
+    domain,
+    path = "/",
+    sameSite = "lax"
+  } = options;
+  return new SsoClient({
+    baseURL,
+    storage: new CookieStorage({
+      domain,
+      path,
+      secure: true,
+      // Always use secure cookies for auth
+      sameSite,
+      // 30 days default max age
+      maxAge: 30 * 24 * 60 * 60
+    }),
+    storagePrefix: tokenCookie
+  });
+}
+function createServerClient(token, baseURL) {
+  return new SsoClient({
+    baseURL,
+    token
+    // Initial token for server-side use
+  });
+}
 
-export { auth, authMiddleware, currentUser, getToken };
+export { auth, authMiddleware, createAuthOSClient, createServerClient, currentUser, getToken };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drmhse/authos-react",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "React and Next.js adapter for AuthOS authentication",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -35,7 +35,6 @@
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
     "lint": "eslint src --ext .ts,.tsx",
-    "test:ct": "playwright test -c playwright-ct.config.ts --reporter=list",
     "prepublishOnly": "npm run build"
   },
   "keywords": [
@@ -53,8 +52,6 @@
     "react": ">=18.0.0"
   },
   "devDependencies": {
-    "@playwright/experimental-ct-react": "^1.48.0",
-    "@playwright/test": "^1.48.0",
     "@types/react": "^19.0.0",
     "next": "^15.1.0",
     "react": "^19.0.0",