change how we create/edit clients

apps/api/src/utils/auth.ts

@@ -23,17 +23,14 @@ export async function validateSdkRequest(
   const clientSecret = clientSecretNew || clientSecretOld;
 
   const origin = headers.origin;
-  if (!clientId) {
+  // Temp log
-    logger.error(
+  logger.info(
-      {
+    { clientId, origin: origin ? origin : 'empty' },
-        clientId,
+    'validateSdkRequest'
-        clientSecret,
-        origin,
-        headers,
-      },
-      'validateSdkRequest: Missing client id'
   );
-    throw new Error('Missing client id');
+
+  if (!clientId) {
+    throw new Error('Ingestion: Missing client id');
   }
 
   const client = await db.client.findUnique({
@@ -43,58 +40,34 @@ export async function validateSdkRequest(
   });
 
   if (!client) {
-    logger.error(
+    throw new Error('Ingestion: Invalid client id');
-      {
-        clientId,
-        clientSecret,
-        origin,
-        headers,
-      },
-      'validateSdkRequest: Invalid client id'
-    );
-    throw new Error('Invalid client id');
   }
 
-  if (client.secret) {
+  if (!client.projectId) {
-    if (!(await verifyPassword(clientSecret || '', client.secret))) {
+    throw new Error('Ingestion: Client has no project');
-      logger.error(
-        {
-          clientId,
-          clientSecret,
-          origin,
-          headers,
-        },
-        'validateSdkRequest: Invalid client secret'
-      );
-      throw new Error('Invalid client secret');
   }
-  } else if (client.cors !== '*') {
+
+  if (client.cors) {
     const domainAllowed = client.cors.split(',').find((domain) => {
       if (cleanDomain(domain) === cleanDomain(origin || '')) {
         return true;
       }
     });
 
-    if (!domainAllowed) {
+    if (domainAllowed) {
-      logger.error(
-        {
-          clientId,
-          clientSecret,
-          client,
-          origin,
-          headers,
-        },
-        'validateSdkRequest: Invalid cors settings'
-      );
-      throw new Error('Invalid cors settings');
-    }
-  }
-
-  if (!client.projectId) {
-    throw new Error('No project id found for client');
-  }
-
       return client.projectId;
+    }
+
+    // Check if cors is a wildcard
+  }
+
+  if (client.secret && clientSecret) {
+    if (await verifyPassword(clientSecret, client.secret)) {
+      return client.projectId;
+    }
+  }
+
+  throw new Error('Ingestion: Invalid client secret');
 }
 
 export async function validateExportRequest(

apps/dashboard/package.json

@@ -35,6 +35,7 @@
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-toggle": "^1.0.3",

apps/dashboard/src/app/(app)/create-organization.tsx

@@ -1,12 +1,14 @@
 'use client';
 
+import { useState } from 'react';
+import AnimateHeight from '@/components/animate-height';
 import { CreateClientSuccess } from '@/components/clients/create-client-success';
 import { LogoSquare } from '@/components/logo';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button, buttonVariants } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Switch } from '@/components/ui/switch';
 import { api, handleError } from '@/trpc/client';
 import { cn } from '@/utils/cn';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -16,33 +18,23 @@ import type { SubmitHandler } from 'react-hook-form';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-const validation = z
+const validation = z.object({
-  .object({
   organization: z.string().min(3),
   project: z.string().min(3),
-    cors: z.string().nullable(),
+  cors: z.string().url().or(z.literal('')),
-    tab: z.string(),
+});
-  })
-  .refine(
-    (data) =>
-      data.tab === 'other' || (data.tab === 'website' && data.cors !== ''),
-    {
-      message: 'Cors is required',
-      path: ['cors'],
-    }
-  );
 
 type IForm = z.infer<typeof validation>;
 
 export function CreateOrganization() {
   const router = useRouter();
+  const [hasDomain, setHasDomain] = useState(true);
   const form = useForm<IForm>({
     resolver: zodResolver(validation),
     defaultValues: {
       organization: '',
       project: '',
       cors: '',
-      tab: 'website',
     },
   });
   const mutation = api.onboarding.organziation.useMutation({
@@ -51,7 +43,7 @@ export function CreateOrganization() {
   const onSubmit: SubmitHandler<IForm> = (values) => {
     mutation.mutate({
       ...values,
-      cors: values.tab === 'website' ? values.cors : null,
+      cors: hasDomain ? values.cors : null,
     });
   };
 
@@ -128,29 +120,19 @@ export function CreateOrganization() {
           />
         </div>
 
-        <Tabs
+        <div>
-          defaultValue="website"
+          <Label className="flex items-center justify-between">
-          onValueChange={(val) => form.setValue('tab', val)}
+            <span>Domain</span>
-          className="h-28"
+            <Switch checked={hasDomain} onCheckedChange={setHasDomain} />
-        >
+          </Label>
-          <TabsList className="bg-slate-200">
+          <AnimateHeight open={hasDomain}>
-            <TabsTrigger value="website">Website</TabsTrigger>
-            <TabsTrigger value="other">Other</TabsTrigger>
-          </TabsList>
-          <TabsContent value="website">
-            <Label>Cors *</Label>
             <Input
               placeholder="https://example.com"
               error={form.formState.errors.cors?.message}
               {...form.register('cors')}
             />
-          </TabsContent>
+          </AnimateHeight>
-          <TabsContent value="other">
-            <div className="rounded bg-background p-2 px-3 text-sm">
-              🔑 You will get a secret to use for your API requests.
         </div>
-          </TabsContent>
-        </Tabs>
 
         <div className="flex justify-end">
           <Button

apps/dashboard/src/components/animate-height.tsx

@@ -0,0 +1,21 @@
+import ReactAnimateHeight from 'react-animate-height';
+
+type Props = {
+  children: React.ReactNode;
+  className?: string;
+  open: boolean;
+};
+
+const AnimateHeight = ({ children, className, open }: Props) => {
+  return (
+    <ReactAnimateHeight
+      duration={300}
+      height={open ? 'auto' : 0}
+      className={className}
+    >
+      {children}
+    </ReactAnimateHeight>
+  );
+};
+
+export default AnimateHeight;

apps/dashboard/src/components/clients/create-client-success.tsx

@@ -1,7 +1,6 @@
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { clipboard } from '@/utils/clipboard';
 import { Copy, RocketIcon } from 'lucide-react';
-import Link from 'next/link';
 
 import type { IServiceClient } from '@openpanel/db';
 
@@ -19,17 +18,28 @@ export function CreateClientSuccess({ id, secret, cors }: Props) {
           <Copy size={16} />
         </div>
       </button>
-      {secret ? (
+      {secret && (
-        <button className="text-left" onClick={() => clipboard(secret)}>
+        <div className="w-full">
-          <Label>Secret</Label>
+          <button
+            className="w-full text-left"
+            onClick={() => clipboard(secret)}
+          >
+            <Label>Client secret</Label>
             <div className="flex items-center justify-between rounded bg-gray-100 p-2 px-3">
               {secret}
               <Copy size={16} />
             </div>
           </button>
-      ) : (
+          {cors && (
+            <p className="mt-1 text-xs text-muted-foreground">
+              You will only need the secret if you want to send server events.
+            </p>
+          )}
+        </div>
+      )}
+      {cors && (
         <div className="text-left">
-          <Label>Cors settings</Label>
+          <Label>CORS settings</Label>
           <div className="flex items-center justify-between rounded bg-gray-100 p-2 px-3">
             {cors}
           </div>
@@ -39,7 +49,15 @@ export function CreateClientSuccess({ id, secret, cors }: Props) {
         <RocketIcon className="h-4 w-4" />
         <AlertTitle>Get started!</AlertTitle>
         <AlertDescription>
-          Read our documentation to get started. Easy peasy!
+          Read our{' '}
+          <a
+            target="_blank"
+            href="https://docs.openpanel.dev"
+            className="underline"
+          >
+            documentation
+          </a>{' '}
+          to get started. Easy peasy!
         </AlertDescription>
       </Alert>
     </div>

apps/dashboard/src/components/clients/table.tsx

@@ -14,7 +14,7 @@ export const columns: ColumnDef<IServiceClientWithProject>[] = [
         <div>
           <div>{row.original.name}</div>
           <div className="text-sm text-muted-foreground">
-            {row.original.project.name}
+            {row.original.project?.name ?? 'No project'}
           </div>
         </div>
       );

apps/dashboard/src/components/overview/overview-live-histogram.tsx

@@ -1,12 +1,11 @@
 'use client';
 
-import { Fragment } from 'react';
 import { api } from '@/trpc/client';
 import { cn } from '@/utils/cn';
-import AnimateHeight from 'react-animate-height';
 
 import type { IChartInput } from '@openpanel/validation';
 
+import AnimateHeight from '../animate-height';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
 import { useOverviewOptions } from './useOverviewOptions';
 
@@ -135,7 +134,7 @@ interface WrapperProps {
 
 function Wrapper({ open, children, count }: WrapperProps) {
   return (
-    <AnimateHeight duration={500} height={open ? 'auto' : 0}>
+    <AnimateHeight open={open}>
       <div className="flex flex-col items-end md:flex-row">
         <div className="md:card flex items-end max-md:mb-2 max-md:w-full max-md:justify-between md:mr-2 md:flex-col md:p-4">
           <div className="text-sm max-md:mb-1">Last 30 minutes</div>

apps/dashboard/src/components/ui/switch.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { cn } from '@/utils/cn';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      'peer inline-flex h-4 w-7 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-blue-600 data-[state=unchecked]:bg-input',
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        'pointer-events-none block h-3 w-3 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0'
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };

apps/dashboard/src/modals/AddClient.tsx

@@ -1,12 +1,14 @@
 'use client';
 
+import { useState } from 'react';
+import AnimateHeight from '@/components/animate-height';
 import { CreateClientSuccess } from '@/components/clients/create-client-success';
 import { Button, buttonVariants } from '@/components/ui/button';
 import { Combobox } from '@/components/ui/combobox';
 import { DialogFooter } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Switch } from '@/components/ui/switch';
 import { useAppParams } from '@/hooks/useAppParams';
 import { api, handleError } from '@/trpc/client';
 import { cn } from '@/utils/cn';
@@ -21,21 +23,12 @@ import { z } from 'zod';
 import { popModal } from '.';
 import { ModalContent, ModalHeader } from './Modal/Container';
 
-const validation = z
+const validation = z.object({
-  .object({
   name: z.string().min(1),
-    cors: z.string().nullable(),
+  cors: z.string().url().or(z.literal('')),
-    tab: z.string(),
   projectId: z.string(),
-  })
+  type: z.enum(['read', 'write', 'root']),
-  .refine(
+});
-    (data) =>
-      data.tab === 'other' || (data.tab === 'website' && data.cors !== ''),
-    {
-      message: 'Cors is required',
-      path: ['cors'],
-    }
-  );
 
 type IForm = z.infer<typeof validation>;
 
@@ -50,10 +43,11 @@ export default function AddClient(props: Props) {
     defaultValues: {
       name: '',
       cors: '',
-      tab: 'website',
       projectId: props.projectId ?? projectId,
+      type: 'write',
     },
   });
+  const [hasDomain, setHasDomain] = useState(true);
   const mutation = api.client.create.useMutation({
     onError: handleError,
     onSuccess() {
@@ -67,7 +61,7 @@ export default function AddClient(props: Props) {
   const onSubmit: SubmitHandler<IForm> = (values) => {
     mutation.mutate({
       name: values.name,
-      cors: values.tab === 'website' ? values.cors : null,
+      cors: hasDomain ? values.cors : null,
       projectId: values.projectId,
       organizationSlug,
     });
@@ -134,29 +128,64 @@ export default function AddClient(props: Props) {
                 {...form.register('name')}
               />
             </div>
-            <Tabs
+
-              defaultValue="website"
+            <div>
-              onValueChange={(val) => form.setValue('tab', val)}
+              <Label className="flex items-center justify-between">
-              className="h-28"
+                <span>Domain</span>
-            >
+                <Switch checked={hasDomain} onCheckedChange={setHasDomain} />
-              <TabsList className="bg-slate-200">
+              </Label>
-                <TabsTrigger value="website">Website</TabsTrigger>
+              <AnimateHeight open={hasDomain}>
-                <TabsTrigger value="other">Other</TabsTrigger>
-              </TabsList>
-              <TabsContent value="website">
-                <Label>Cors</Label>
                 <Input
                   placeholder="https://example.com"
                   error={form.formState.errors.cors?.message}
                   {...form.register('cors')}
                 />
-              </TabsContent>
+              </AnimateHeight>
-              <TabsContent value="other">
+            </div>
-                <div className="rounded bg-background p-2 px-3 text-sm">
+
-                  🔑 You will get a secret to use for your API requests.
+            <div>
+              <Controller
+                control={form.control}
+                name="type"
+                render={({ field }) => {
+                  return (
+                    <div>
+                      <Label>Type of client</Label>
+                      <Combobox
+                        {...field}
+                        className="w-full"
+                        onChange={(value) => {
+                          field.onChange(value);
+                        }}
+                        items={[
+                          {
+                            value: 'write',
+                            label: 'Write (for ingestion)',
+                          },
+                          {
+                            value: 'read',
+                            label: 'Read (access export API)',
+                          },
+                          {
+                            value: 'root',
+                            label: 'Root (access export API)',
+                          },
+                        ]}
+                        placeholder="Select a project"
+                      />
+                      <p className="mt-1 text-xs text-muted-foreground">
+                        {field.value === 'write' &&
+                          'Write: Is the default client type and is used for ingestion of data'}
+                        {field.value === 'read' &&
+                          'Read: You can access the current projects data from the export API'}
+                        {field.value === 'root' &&
+                          'Root: You can access any projects data from the export API'}
+                      </p>
+                    </div>
+                  );
+                }}
+              />
             </div>
-              </TabsContent>
-            </Tabs>
             <DialogFooter>
               <Button
                 type="button"

apps/dashboard/src/modals/EditClient.tsx

@@ -18,7 +18,7 @@ type EditClientProps = IServiceClient;
 const validator = z.object({
   id: z.string().min(1),
   name: z.string().min(1),
-  cors: z.string().min(1),
+  cors: z.string().nullable(),
 });
 
 type IForm = z.infer<typeof validator>;
@@ -59,13 +59,11 @@ export default function EditClient({ id, name, cors }: EditClientProps) {
             label="Name"
             placeholder="Name"
             {...register('name')}
-            defaultValue={name}
           />
           <InputWithLabel
             label="Cors"
             placeholder="Cors"
             {...register('cors')}
-            defaultValue={cors}
           />
         </div>
         <ButtonContainer>

apps/dashboard/src/trpc/api/routers/client.ts

@@ -3,6 +3,7 @@ import { createTRPCRouter, protectedProcedure } from '@/trpc/api/trpc';
 import { z } from 'zod';
 
 import { hashPassword, stripTrailingSlash } from '@openpanel/common';
+import type { Prisma } from '@openpanel/db';
 import { db } from '@openpanel/db';
 
 export const clientRouter = createTRPCRouter({
@@ -11,7 +12,7 @@ export const clientRouter = createTRPCRouter({
       z.object({
         id: z.string(),
         name: z.string(),
-        cors: z.string(),
+        cors: z.string().nullable(),
       })
     )
     .mutation(({ input }) => {
@@ -21,7 +22,7 @@ export const clientRouter = createTRPCRouter({
         },
         data: {
           name: input.name,
-          cors: input.cors,
+          cors: input.cors ?? null,
         },
       });
     }),
@@ -32,23 +33,25 @@ export const clientRouter = createTRPCRouter({
         projectId: z.string(),
         organizationSlug: z.string(),
         cors: z.string().nullable(),
+        type: z.enum(['read', 'write', 'root']).optional(),
       })
     )
     .mutation(async ({ input }) => {
       const secret = randomUUID();
-      const client = await db.client.create({
+      const data: Prisma.ClientCreateArgs['data'] = {
-        data: {
         organizationSlug: input.organizationSlug,
         projectId: input.projectId,
         name: input.name,
-          secret: input.cors ? null : await hashPassword(secret),
+        type: input.type ?? 'write',
-          cors: input.cors ? stripTrailingSlash(input.cors) : '*',
+        cors: input.cors ? stripTrailingSlash(input.cors) : null,
-        },
+        secret: await hashPassword(secret),
-      });
+      };
+
+      const client = await db.client.create({ data });
 
       return {
         ...client,
-        secret: input.cors ? null : secret,
+        secret,
       };
     }),
   remove: protectedProcedure

apps/dashboard/src/trpc/api/routers/onboarding.ts

@@ -35,15 +35,16 @@ export const onboardingRouter = createTRPCRouter({
             name: `${project.name} Client`,
             organizationSlug: org.slug,
             projectId: project.id,
-            cors: input.cors ? stripTrailingSlash(input.cors) : '*',
+            type: 'write',
-            secret: input.cors ? null : await hashPassword(secret),
+            cors: input.cors ? stripTrailingSlash(input.cors) : null,
+            secret: await hashPassword(secret),
           },
         });
 
         return {
           client: {
             ...client,
-            secret: input.cors ? null : secret,
+            secret,
           },
           project,
           organization: transformOrganization(org),

apps/public/src/styles/globals.css

@@ -73,7 +73,7 @@
 }
 
 .fancy-text {
-  @apply text-transparent inline-block bg-gradient-to-br from-blue-200 to-blue-400 bg-clip-text;
+  @apply inline-block bg-gradient-to-br from-blue-200 to-blue-400 bg-clip-text text-transparent;
 }
 
 strong {

packages/db/prisma/migrations/20240412180636_cors_nullable/migration.sql

@@ -0,0 +1,3 @@
+-- AlterTable
+ALTER TABLE "clients" ALTER COLUMN "cors" DROP NOT NULL,
+ALTER COLUMN "cors" DROP DEFAULT;

packages/db/prisma/schema.prisma

@@ -104,7 +104,7 @@ model Client {
   projectId        String?
   project          Project?   @relation(fields: [projectId], references: [id])
   organizationSlug String
-  cors             String     @default("*")
+  cors             String?
 
   createdAt DateTime @default(now())
   updatedAt DateTime @default(now()) @updatedAt

pnpm-lock.yaml

@@ -192,6 +192,9 @@ importers:
       '@radix-ui/react-slot':
         specifier: ^1.0.2
         version: 1.0.2(@types/react@18.2.56)(react@18.2.0)
+      '@radix-ui/react-switch':
+        specifier: ^1.0.3
+        version: 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.56)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-tabs':
         specifier: ^1.0.4
         version: 1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.56)(react-dom@18.2.0)(react@18.2.0)
@@ -5444,6 +5447,33 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@radix-ui/react-switch@1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.56)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-mxm87F88HyHztsI7N+ZUmEoARGkC22YVW5CaC+Byc+HRpuvCrOBPTAnXgf+tZ/7i0Sg/eOePGdMhUKhPaQEqow==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.9
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.56)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.56)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.56)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.56)(react@18.2.0)
+      '@radix-ui/react-use-previous': 1.0.1(@types/react@18.2.56)(react@18.2.0)
+      '@radix-ui/react-use-size': 1.0.1(@types/react@18.2.56)(react@18.2.0)
+      '@types/react': 18.2.56
+      '@types/react-dom': 18.2.19
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /@radix-ui/react-tabs@1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.56)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-egZfYY/+wRNCflXNHx+dePvnz9FbmssDTJBtgRfDY7e8SE5oIo3Py2eCB1ckAbh1Q7cQ/6yJZThJ++sgbxibog==}
     peerDependencies: