Merge pull request #23 from OpenSecretCloud/add-client-id

Third party developers

.github/workflows/test.yml

@@ -28,4 +28,5 @@ jobs:
           VITE_TEST_PASSWORD: ${{ secrets.VITE_TEST_PASSWORD }}
           VITE_TEST_NAME: ${{ secrets.VITE_TEST_NAME }}
           VITE_TEST_INVITE_CODE: ${{ secrets.VITE_TEST_INVITE_CODE }}
+          VITE_TEST_CLIENT_ID: ${{ secrets.VITE_TEST_CLIENT_ID }}
         run: bun test 

README.md

@@ -12,14 +12,19 @@ npm install @opensecret/react
 
 ## Usage
 
-Wrap your application in the `OpenSecretProvider` component and provide the URL of your OpenSecret backend:
+Wrap your application in the `OpenSecretProvider` component and provide:
+1. The URL of your OpenSecret backend
+2. Your project's client ID (a UUID that identifies your project)
 
 ```tsx
 import { OpenSecretProvider } from "@opensecret/react";
 
 function App() {
   return (
-    <OpenSecretProvider apiUrl="{URL}">
+    <OpenSecretProvider 
+      apiUrl="{URL}"
+      clientId="{PROJECT_UUID}"
+    >
       <App />
     </OpenSecretProvider>
   );
@@ -52,10 +57,15 @@ function App() {
 
 ### `OpenSecretProvider`
 
-The `OpenSecretProvider` component is the main entry point for the SDK. It requires a single prop, `apiUrl`, which should be set to the URL of your OpenSecret backend.
+The `OpenSecretProvider` component is the main entry point for the SDK. It requires two props:
+- `apiUrl`: The URL of your OpenSecret backend
+- `clientId`: A UUID that identifies your project/tenant. This is used to scope user accounts and data to your specific project.
 
 ```tsx
-<OpenSecretProvider apiUrl="{URL}">
+<OpenSecretProvider 
+  apiUrl="{URL}"
+  clientId="{PROJECT_UUID}"
+>
   <App />
 </OpenSecretProvider>
 ```
@@ -67,9 +77,9 @@ The `useOpenSecret` hook provides access to the OpenSecret API. It returns an ob
 #### Authentication Methods
 - `signIn(email: string, password: string): Promise<void>`: Signs in a user with the provided email and password.
 - `signUp(email: string, password: string, inviteCode: string, name?: string): Promise<void>`: Signs up a new user with the provided email, password, invite code, and optional name.
-- `signInGuest(id: string, password: string): Promise<void>`: Signs in a guest user with their ID and password.
-- `signUpGuest(password: string, inviteCode: string): Promise<LoginResponse>`: Creates a new guest account with just a password and invite code. Returns a response containing the guest's ID, access token, and refresh token.
-- `convertGuestToUserAccount(email: string, password: string, name?: string): Promise<void>`: Converts current guest account to a regular account with email authentication. Optionally sets the user's name.
+- `signInGuest(id: string, password: string): Promise<void>`: Signs in a guest user with their ID and password. Guest accounts are scoped to the project specified by `clientId`.
+- `signUpGuest(password: string, inviteCode: string): Promise<LoginResponse>`: Creates a new guest account with just a password and invite code. Returns a response containing the guest's ID, access token, and refresh token. The guest account will be associated with the project specified by `clientId`.
+- `convertGuestToUserAccount(email: string, password: string, name?: string): Promise<void>`: Converts current guest account to a regular account with email authentication. Optionally sets the user's name. The account remains associated with the same project it was created under.
 - `signOut(): Promise<void>`: Signs out the current user.
 
 #### Key-Value Storage Methods

package.json

@@ -19,7 +19,9 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -p tsconfig.build.json && npx vite build",
-    "pack": "bun run build && bun pm pack"
+    "pack": "bun run build && bun pm pack",
+    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,md}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css,md}\""
   },
   "peerDependencies": {
     "react": "^18.3.1",

src/AI.tsx

@@ -20,8 +20,8 @@ export function AI() {
     setResponse("");
 
     if (!os.auth.user) {
-        alert("Please log in to use the AI chat.");
-        return;
+      alert("Please log in to use the AI chat.");
+      return;
     }
 
     const customFetch = os.aiCustomFetch;
@@ -30,16 +30,16 @@ export function AI() {
 
     try {
       console.log("Starting chat request to URL:", `${os.apiUrl}/v1/`);
-      
+
       const openai = new OpenAI({
         baseURL: `${os.apiUrl}/v1/`,
         dangerouslyAllowBrowser: true,
         apiKey: "api-key-doesnt-matter",
         defaultHeaders: {
           "Accept-Encoding": "identity",
-          "Content-Type": "application/json",
+          "Content-Type": "application/json"
         },
-        fetch: customFetch,
+        fetch: customFetch
       });
 
       console.log("Created OpenAI client");
@@ -51,7 +51,7 @@ export function AI() {
       const stream = await openai.beta.chat.completions.stream({
         model,
         messages,
-        stream: true,
+        stream: true
       });
 
       console.log("Stream created successfully");
@@ -95,8 +95,8 @@ export function AI() {
           className="w-full p-2 border rounded"
           disabled={loading}
         />
-        <button 
-          type="submit" 
+        <button
+          type="submit"
           disabled={loading}
           className="mt-2 px-4 py-2 bg-blue-500 text-white rounded disabled:bg-gray-400"
         >
@@ -105,9 +105,7 @@ export function AI() {
       </form>
 
       {response && (
-        <div className="mt-4 p-4 border rounded bg-gray-50 whitespace-pre-wrap">
-          {response}
-        </div>
+        <div className="mt-4 p-4 border rounded bg-gray-50 whitespace-pre-wrap">{response}</div>
       )}
     </div>
   );

src/App.css

@@ -73,7 +73,10 @@ button {
 
 .grid-container {
   display: grid;
-  grid-template-columns: minmax(min-content, 150px) 1fr minmax(min-content, 120px) minmax(min-content, 120px);
+  grid-template-columns: minmax(min-content, 150px) 1fr minmax(min-content, 120px) minmax(
+      min-content,
+      120px
+    );
   gap: 1rem;
 }