fix: CORS issues in development

instrumentation.ts

@@ -0,0 +1,16 @@
+import * as Sentry from '@sentry/nextjs';
+
+const { version, name } = require('./package.json');
+
+export function register() {
+  Sentry.init({
+    dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+    tracesSampleRate: 1,
+    debug: false,
+
+    enabled: process.env.NODE_ENV === 'production',
+
+    // release: `${process.env.npm_package_name}@${process.env.npm_package_version}`,
+    release: `${name}@${version}`,
+  });
+}

next.config.js

@@ -1,8 +1,5 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  experimental: {
-    serverActions: true,
-  },
   reactStrictMode: true,
   output: 'standalone',
   webpack: (config, { webpack, isServer, nextRuntime }) => {

package.json

@@ -47,19 +47,20 @@
     "@mui/material": "^5.15.17",
     "@ory/client": "^1.9.0",
     "@ory/integrations": "^1.2.1",
-    "@sentry/nextjs": "^7.80.0",
+    "@sentry/nextjs": "^8.2.1",
     "@thgh/next-gtm": "^0.1.5",
     "aws-amplify": "^5.3.12",
     "check-password-strength": "^2.0.10",
-    "hibp": "^13.0.0",
+    "eslint": "^8.53.0",
+    "eslint-config-next": "^14.2.3",
+    "hibp": "^14.1.1",
     "negotiator": "^0.6.3",
-    "next": "^13.5.6",
+    "next": "^14.2.3",
     "next-recaptcha-v3": "^1.4.1",
     "react": "^18.2.0",
     "react-gtm-module": "^2.0.11",
     "react-hook-form": "7.47.0",
     "react-imask": "^7.6.0",
-    "sharp": "^0.32.6",
     "typescript": "^5.2.2",
     "zod": "^3.23.8"
   },

sentry.client.config.ts

@@ -7,6 +7,8 @@ Sentry.init({
   tracesSampleRate: 1,
   debug: false,
 
+  enabled: process.env.NODE_ENV === 'production',
+
   // release: `${process.env.npm_package_name}@${process.env.npm_package_version}`,
   release: `${name}@${version}`,
 
@@ -16,7 +18,7 @@ Sentry.init({
   replaysSessionSampleRate: 0.1,
   // You can remove this option if you're not planning to use the Sentry Session Replay feature:
   integrations: [
-    new Sentry.Replay({
+    Sentry.replayIntegration({
       // Additional Replay configuration goes in here, for example:
       maskAllText: false,
       blockAllMedia: true,

src/app/[lang]/identification/form.tsx

@@ -25,9 +25,10 @@ import { CustomTextMask } from '@/components/CustomTextMask';
 import { useSnackAlert } from '@/components/elements/alert';
 import { ButtonApp } from '@/components/elements/button';
 import { Validations } from '@/common/helpers';
-import { ory } from '@/common/lib/ory';
 import theme from '@/components/themes/theme';
 import { useLanguage } from '../provider';
+import { ory } from '@/common/lib/ory';
+import { LOGIN_URL } from '@/common';
 
 type CedulaForm = z.infer<ReturnType<typeof createCedulaSchema>>;
 
@@ -44,12 +45,10 @@ export function Form() {
       .toSession()
       .then(({ data }) => {
         if (data.active) {
-          return router.push('https://mi.cuentaunica.gob.do/ui/login');
-        } else {
-          setLoading(false);
+          return router.push(LOGIN_URL);
         }
       })
-      .catch(() => setLoading(false));
+      .finally(() => setLoading(false));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -158,10 +157,7 @@ export function Form() {
         <GridContainer>
           <GridItem md={12} lg={12}>
             <TextBodyTiny textCenter>
-              <Link
-                href={'https://mi.cuentaunica.gob.do/ui/login'}
-                style={{ textDecoration: 'none' }}
-              >
+              <Link href={LOGIN_URL} style={{ textDecoration: 'none' }}>
                 <span style={{ color: theme.palette.primary.main }}>
                   {intl.alreadyRegistered}
                 </span>{' '}

src/common/index.ts

@@ -0,0 +1 @@
+export const LOGIN_URL = 'https://mi.cuentaunica.gob.do/ui/login';

src/components/layout/navBar.tsx

@@ -12,6 +12,7 @@ import styles from './styles.module.css';
 import { LanguageSelector } from './languageSelector';
 import { useLanguage } from '@/app/[lang]/provider';
 import { ButtonApp } from '../elements/button';
+import { LOGIN_URL } from '@/common';
 
 export default function Index() {
   const { intl, locales } = useLanguage();
@@ -45,12 +46,7 @@ export default function Index() {
               <LanguageSelector
                 other={locales.find((l) => l !== intl.language)!}
               />
-              <ButtonApp
-                notFullWidth
-                onClick={() =>
-                  window.open('https://mi.cuentaunica.gob.do/ui/login')
-                }
-              >
+              <ButtonApp notFullWidth onClick={() => window.open(LOGIN_URL)}>
                 {intl.actions.login}
               </ButtonApp>
             </Toolbar>