web & sdk: improved sdk (better failover and batching)

apps/web/src/modals/AddClient.tsx

@@ -1,8 +1,10 @@
 import { ButtonContainer } from '@/components/ButtonContainer';
 import { InputWithLabel } from '@/components/forms/InputWithLabel';
 import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
 import { Combobox } from '@/components/ui/combobox';
 import { Label } from '@/components/ui/label';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { toast } from '@/components/ui/use-toast';
 import { useOrganizationParams } from '@/hooks/useOrganizationParams';
 import { useRefetchActive } from '@/hooks/useRefetchActive';
@@ -11,7 +13,7 @@ import { clipboard } from '@/utils/clipboard';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Copy } from 'lucide-react';
 import dynamic from 'next/dynamic';
-import { Controller, useForm } from 'react-hook-form';
+import { Controller, useForm, useWatch } from 'react-hook-form';
 import { z } from 'zod';
 
 import { popModal } from '.';
@@ -21,6 +23,8 @@ const Syntax = dynamic(import('@/components/Syntax'));
 
 const validator = z.object({
   name: z.string().min(1, 'Required'),
+  cors: z.string().min(1, 'Required'),
+  withCors: z.boolean(),
   projectId: z.string().min(1, 'Required'),
 });
 
@@ -46,12 +50,29 @@ export default function CreateProject() {
     resolver: zodResolver(validator),
     defaultValues: {
       name: '',
+      cors: '*',
       projectId: '',
+      withCors: true,
     },
   });
 
+  const withCors = useWatch({
+    control,
+    name: 'withCors',
+  });
+
   if (mutation.isSuccess && mutation.data) {
-    const { clientId, clientSecret } = mutation.data;
+    const { clientId, clientSecret, cors } = mutation.data;
+    const snippet = clientSecret
+      ? `const mixan = new Mixan({
+  clientId: "${clientId}",
+  // Avoid using this on web, rely on cors settings instead
+  // Mostly for react-native and node/backend
+  clientSecret: "${clientSecret}",
+})`
+      : `const mixan = new Mixan({
+  clientId: "${clientId}",
+})`;
     return (
       <ModalContent>
         <ModalHeader title="Client created 🚀" />
@@ -60,6 +81,13 @@ export default function CreateProject() {
           so keep it safe 🫣
         </p>
 
+        <button className="mt-4 text-left" onClick={() => clipboard(cors)}>
+          <Label>Cors settings</Label>
+          <div className="flex items-center justify-between rounded bg-gray-100 p-2 px-3">
+            {cors}
+            <Copy size={16} />
+          </div>
+        </button>
         <button className="mt-4 text-left" onClick={() => clipboard(clientId)}>
           <Label>Client ID</Label>
           <div className="flex items-center justify-between rounded bg-gray-100 p-2 px-3">
@@ -67,25 +95,22 @@ export default function CreateProject() {
             <Copy size={16} />
           </div>
         </button>
-        <button
-          className="mt-4 text-left"
-          onClick={() => clipboard(clientSecret)}
-        >
-          <Label>Client Secret</Label>
-          <div className="flex items-center justify-between rounded bg-gray-100 p-2 px-3">
-            {clientSecret}
-            <Copy size={16} />
-          </div>
-        </button>
+        {clientSecret && (
+          <button
+            className="mt-4 text-left"
+            onClick={() => clipboard(clientSecret)}
+          >
+            <Label>Client Secret</Label>
+            <div className="flex items-center justify-between rounded bg-gray-100 p-2 px-3">
+              {clientSecret}
+              <Copy size={16} />
+            </div>
+          </button>
+        )}
         <div className="mt-4">
           <Label>Code snippet</Label>
-          <div className="overflow-x-auto [&_pre]:!rounded [&_pre]:!bg-gray-100 [&_pre]:text-sm">
-            <Syntax
-              code={`const mixan = new Mixan({
-  clientId: "${clientId}",
-  clientSecret: "${clientSecret}",
-})`}
-            />
+          <div className="[&_pre]:!rounded [&_pre]:!bg-gray-100 [&_pre]:text-sm">
+            <Syntax code={snippet} />
           </div>
         </div>
 
@@ -114,6 +139,36 @@ export default function CreateProject() {
           {...register('name')}
           className="mb-4"
         />
+
+        <Controller
+          name="withCors"
+          control={control}
+          render={({ field }) => (
+            <label className="flex items-center gap-2 text-sm font-medium leading-none mb-4">
+              <Checkbox
+                ref={field.ref}
+                onBlur={field.onBlur}
+                defaultChecked={field.value}
+                onCheckedChange={(checked) => {
+                  field.onChange(checked);
+                }}
+              />
+              Auth with cors settings
+            </label>
+          )}
+        />
+        {withCors && (
+          <>
+            <InputWithLabel
+              label="Cors"
+              placeholder="Cors"
+              {...register('cors')}
+            />
+            <div className="text-xs text-muted-foreground mb-4 mt-1">
+              Restrict access by domain names (include https://)
+            </div>
+          </>
+        )}
         <Controller
           control={control}
           name="projectId"