Fix API key redirect URL schema on in-app wallet settings and unrespo…

…nsive general project settings page (#5747)

## Problem solved

Fixes: DASH-629

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on updating the validation schema and related components for project settings, particularly around custom authentication endpoints and redirect URIs. The changes enhance the form handling and validation logic in the dashboard.

### Detailed summary
- Introduced `expandCustomAuthEndpointField` for conditional rendering of custom authentication endpoint fields.
- Updated `checked` property of `GatedSwitch` to use the new variable.
- Modified the placeholder of `Textarea` in `NativeAppsFieldset`.
- Changed `UpdateAPIForm` type to use `ProjectSettingsPageFormSchema`.
- Updated form initialization to use `projectSettingsPageFormSchema`.
- Refined validation logic for redirect URIs, allowing specific formats.
- Created a new `redirectUriSchema` for validating redirect URIs.
- Updated `redirectUrls` validation to use the new schema.
- Changed the exported validation type from `ApiKeyValidationSchema` to `ProjectSettingsPageFormSchema`.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

apps/dashboard/src/app/team/[team_slug]/[project_slug]/settings/ProjectGeneralSettingsPage.tsx

@@ -35,9 +35,9 @@ import { type FieldArrayWithId, useFieldArray } from "react-hook-form";
 import { toast } from "sonner";
 import { joinWithComma, toArrFromList } from "utils/string";
 import {
-  type ApiKeyValidationSchema,
   HIDDEN_SERVICES,
-  apiKeyValidationSchema,
+  type ProjectSettingsPageFormSchema,
+  projectSettingsPageFormSchema,
 } from "../../../../../components/settings/ApiKeys/validations";
 
 type EditProjectUIPaths = {
@@ -86,16 +86,16 @@ interface EditApiKeyProps {
   showNebulaSettings: boolean;
 }
 
-type UpdateAPIForm = UseFormReturn<ApiKeyValidationSchema>;
+type UpdateAPIForm = UseFormReturn<ProjectSettingsPageFormSchema>;
 
 export const ProjectGeneralSettingsPageUI: React.FC<EditApiKeyProps> = (
   props,
 ) => {
   const { apiKey, updateMutation, deleteMutation } = props;
   const trackEvent = useTrack();
   const router = useDashboardRouter();
-  const form = useForm<ApiKeyValidationSchema>({
-    resolver: zodResolver(apiKeyValidationSchema),
+  const form = useForm<ProjectSettingsPageFormSchema>({
+    resolver: zodResolver(projectSettingsPageFormSchema),
     defaultValues: {
       name: apiKey.name,
       domains: joinWithComma(apiKey.domains),
@@ -484,7 +484,7 @@ function EnabledServicesSetting(props: {
   });
   const handleAction = (
     srvIdx: number,
-    srv: FieldArrayWithId<ApiKeyValidationSchema, "services", "id">,
+    srv: FieldArrayWithId<ProjectSettingsPageFormSchema, "services", "id">,
     actionName: string,
     checked: boolean,
   ) => {

apps/dashboard/src/components/embedded-wallets/Configure/index.tsx

@@ -422,6 +422,10 @@ function AuthEndpointFields(props: {
     name: "customAuthEndpoint.customHeaders",
   });
 
+  const expandCustomAuthEndpointField =
+    form.watch("customAuthEndpoint")?.authEndpoint !== undefined &&
+    canEditAdvancedFeatures;
+
   return (
     <div>
       <SwitchContainer
@@ -445,9 +449,7 @@ function AuthEndpointFields(props: {
       >
         <GatedSwitch
           trackingLabel="customAuthEndpoint"
-          checked={
-            !!form.watch("customAuthEndpoint") && canEditAdvancedFeatures
-          }
+          checked={expandCustomAuthEndpointField}
           upgradeRequired={!canEditAdvancedFeatures}
           onCheckedChange={(checked) => {
             form.setValue(
@@ -464,7 +466,7 @@ function AuthEndpointFields(props: {
       </SwitchContainer>
 
       <AdvancedConfigurationContainer
-        show={canEditAdvancedFeatures && !!form.watch("customAuthEndpoint")}
+        show={expandCustomAuthEndpointField}
         className="grid grid-cols-1 gap-6 lg:grid-cols-2"
       >
         <FormField
@@ -561,7 +563,10 @@ function NativeAppsFieldset(props: {
           <FormItem>
             <FormLabel>Allowed redirect URIs</FormLabel>
             <FormControl>
-              <Textarea {...field} placeholder="appName://" />
+              <Textarea
+                {...field}
+                placeholder="appName://, localhost:3000, https://example.com"
+              />
             </FormControl>
             <FormDescription>
               Enter redirect URIs separated by commas or new lines. This is

apps/dashboard/src/components/settings/ApiKeys/validations.ts

@@ -11,7 +11,7 @@ const nameValidation = z
 const domainsValidation = z.string().refine(
   (str) =>
     validStrList(str, (domain) => {
-      return domain.split(":")[0] === "localhost" || RE_DOMAIN.test(domain);
+      return domain.startsWith("localhost:") || RE_DOMAIN.test(domain);
     }),
   {
     message: "Some of the domains are invalid",
@@ -95,26 +95,55 @@ export const apiKeyCreateValidationSchema = z.object({
   services: servicesValidation,
 });
 
-export const apiKeyValidationSchema = z.object({
+function isValidRedirectURI(uri: string) {
+  // whitespace is not allowed
+  if (/\s/g.test(uri)) {
+    return false;
+  }
+
+  // foo://... is allowed
+  if (uri.includes("://")) {
+    return true;
+  }
+
+  // localhost:... is allowed
+  if (uri.startsWith("localhost:")) {
+    return true;
+  }
+
+  // valid url is allowed
+  try {
+    new URL(uri);
+    return true;
+  } catch {
+    // invalid
+  }
+
+  // everything else is invalid
+  return false;
+}
+
+const redirectUriSchema = z
+  .string()
+  .refine((str) => validStrList(str, isValidRedirectURI), {
+    message:
+      "Some of the redirect URIs are invalid. Make sure they are valid URIs and do not contain spaces.",
+  })
+  .refine((str) => str !== "*", {
+    message: "Wildcard redirect URIs are not allowed",
+  });
+
+// TODO: move this schema to project settings folder in separate PR
+export const projectSettingsPageFormSchema = z.object({
   name: nameValidation,
   domains: domainsValidation,
   services: servicesValidation,
   bundleIds: z.string().refine((str) => validStrList(str, RE_BUNDLE_ID), {
     message: "Some of the bundle ids are invalid",
   }),
-  redirectUrls: z
-    .string()
-    .refine(
-      (str) =>
-        validStrList(str, (url) => url.includes("://") && !/\s/g.test(url)),
-      {
-        message:
-          "Some of the redirect URIs are invalid. Make sure they are valid URIs and do not contain spaces.",
-      },
-    )
-    .refine((str) => str !== "*", {
-      message: "Wildcard redirect URIs are not allowed",
-    }),
+  // no strict validation for redirectUrls, because project general page does not render redirectUrls form field
+  // so if the user has already saved an invalid `redirectUrls` on in-app wallet project settings page ( which is fixed now ) - it won't prevent them from updating the general project settings
+  redirectUrls: z.string(),
 });
 
 export const apiKeyEmbeddedWalletsValidationSchema = z.object({
@@ -127,7 +156,7 @@ export const apiKeyEmbeddedWalletsValidationSchema = z.object({
       applicationImageUrl: applicationImageUrlValidation,
     }),
   ]),
-  redirectUrls: z.union([z.undefined(), z.string()]),
+  redirectUrls: redirectUriSchema,
 });
 
 export const apiKeyPayConfigValidationSchema = z.object({
@@ -138,7 +167,9 @@ export type ApiKeyCreateValidationSchema = z.infer<
   typeof apiKeyCreateValidationSchema
 >;
 
-export type ApiKeyValidationSchema = z.infer<typeof apiKeyValidationSchema>;
+export type ProjectSettingsPageFormSchema = z.infer<
+  typeof projectSettingsPageFormSchema
+>;
 
 export type ApiKeyEmbeddedWalletsValidationSchema = z.infer<
   typeof apiKeyEmbeddedWalletsValidationSchema