Some video on BuddyBoss is Uploading Successfully and some are not [closed]

Some video on BuddyBoss is Uploading Successfully and some are not while i disable the thumbnail generation on runtime with custom code it starts uploading every video and when the thumbnail is enable some uploads and some not !

To Reproduce:

Go to Main Activity Page and Uploads a video
while it uploads and generate a thumbnail
on some videos when clicked on post it failed to post

while on some videos it uploads the video successfully

Expected behavior:

It must upload any video that is mentioned in the settings of media whether mp4 or any that’s mentioned

Environment

https://america24.tv/

Video Explanation :

https://drive.google.com/file/d/10C7Yn9ncyaWO0YGs_HdwljXPazgtLrhn/view

Toggle menu in CSS

I have java script code like this:

const mobileMenu = document.querySelectorAll(".mobile-menu-logo");
mobileMenu.forEach((menu) => {
  menu.addEventListener("click", () => {
    mobileMenu.forEach((b) => b.classList.toggle("hidden"));
  });
});

It’s toggling menu button on click, But sometimes it has issue showing the correct current icon after multiple clicks. Specialy on mobile devices. Why is that?

How to Handle Worker Thread File with an importScripts file with a Reference to window?

I have a worker thread file worker.js which is used when setting up the worker:

myWorker = new Worker("worker.js");

The file has at the top:

importScripts("general.js");

where general.js is a file with a load of constants and things defined. At one point it refers to window, which obviously will not make sense when part of an importScripts for a worker.

How can I tell the importScripts to ignore that part of the file when window is not defined?

If I have something like:

if(window){
}

Google Chrome debugger still complains with Uncaught ReferenceError: window is not defined.

The obvious thing to do is just to separate that code into a separate file, but it makes sense to keep it all together for the main thread.

Why is my addEventListener function not working in JavaScript?

I’m trying to make a button trigger an alert when clicked, but nothing happens when I click the button. Here’s the code I’m using:

<button id="myBtn">Click me</button>

document.getElementById("myBtn").addEventListener("click", function() {
    alert("Button clicked!");
});

I’ve made sure the script is linked correctly in my HTML. There are no errors in the console either.

What I expect:
When I click the button, I want an alert saying “Button clicked!” to appear.

What’s happening:
Clicking the button does nothing. No errors, no alert.

What I’ve tried:
Moving the script to the bottom of the HTML
Wrapping the code in window.onload
Checking the button ID

I’m not sure what I’m doing wrong. Any help would be appreciated!

CSS hover effects moves input field below

I finally got the PrimeVue hover effects working. I had to add a bit of CSS work to it, since the Designtokens did not all the work.

But now the hover effect of the first input field causes the input field below to move, when the border width of the first input field changes. I don’t want the input field below to move.

I don’t have this kind of problem for the textarea fields.

template:

      <label for="ref_num" class="labels">Untertitel</label>
  <InputGroup>
    <IconField>
      <InputText id="eventSubtitle" v-model="eventSubtitle" placeholder="Untertitel" maxlength="255" />
      <!--InputIcon class="pi pi-exclamation-circle" v-tooltip="'Untertitel ist erforderlich'"></InputIcon-->
    </IconField>
  </InputGroup>

  <label for="ref_num" class="labels">Standort (GPS)</label>
  <InputGroup>
    <InputGroupAddon>
      <i class="pi pi-globe"></i>
    </InputGroupAddon>
    <IconField>
      <InputMask id="eventLocation" v-model="eventLocation" placeholder="Standort (GPS)" mask="99.9999, 999.9999"
        style="border-radius: 0rem 0.4rem 0.4rem 0rem;" maxlength="255" />
      <!--InputIcon class="pi pi-exclamation-circle" v-tooltip="'Standort erforderlich'"></InputIcon-->
    </IconField>
  </InputGroup>

style:

.p-inputtext {width: 100%; padding: 1rem !important; box-sizing: border-box;}
.p-inputtext:hover {border-width: 0.15rem; box-sizing: border-box;}

Bootstrap Validation on multiple steps form

I got an example of a form with steps from W3C web page at https://www.w3schools.com/howto/howto_js_form_steps.asp and combined it with a Bootstrap form. The issue now is that I can’t make it validate only on the first page. If you click on the Next button (sometimes twice), it allows you to go to the next page.

I’m trying to make it so that it only validates the visible page, but I can’t seem to find a work around it. I’ve tried isVisible, return false, etc., but nothing works. I cleaned up the attempted version to post it here.

Does anyone have any suggestions? I indented the bootstrap code for clarity purposes.

                      /*boostrap validation*/
                  // Example starter JavaScript for disabling form submissions if there are invalid fields
                  (() => {
                    'use strict'

                    // Fetch all the forms we want to apply custom Bootstrap validation styles to
                    const forms = document.querySelectorAll('.needs-validation')

                    // Loop over them and prevent submission
                    Array.from(forms).forEach(form => {
                      form.addEventListener('submit', event => {
                        if (!form.checkValidity()) {
                          event.preventDefault()
                          event.stopPropagation()
                        }

                        form.classList.add('was-validated')
                      }, false)
                    })
                  })()
                  /*boostrap validation*/

This is the URL to the CodePen: https://codepen.io/raulgonzalez77/pen/VYwqYmL

Iframe creation with input src [closed]

I (an inexperienced coder) have been trying to make user made iframes but I’m struggling with making it work. Would anyone know what the issue is.
Here’s the code:

function create() {
  var url = document.getElementById('input').value;
  var iframe = document.createElement('iframe');
  iframe.src = 'url';
  iframe.style.border = 'none';
  iframe.style.height = '100%';
  iframe.style.width = '100%';
  document.body.appendChild(iframe);
}
<html>
</body>
<input type=text value=https:// tag="input" </text>
<button on.click='create()'> create iframe </button>
</body>

How to get fetch TOWARDS localhost to FUNCTION on CARDOVA Android

My question is simple.

I make a call using fetch in my CARDOVA app like so, from the ./www/js/index.js script:

const response = await fetch('http://localhost:3000/poc3/convert', {
  method: 'POST',
  body: formData,
  headers: { 'Accept': 'audio/mpeg' },
});

I get this in the logs:

Error: TypeError: Failed to fetch

I know the API endpoint works 100%.

I know the system works with a fetch towards the prod URL endpoint (https://mywebsite/poc3/convert).

I think this fetch error is because I need to enable something from the config.xml file.

Below are all the versions and configs I am running:

   Cordova Packages:
    
        cli: 12.0.0
            common: 5.0.1
            create: 5.0.0
            lib: 12.0.2
                common: 5.0.1
                fetch: 4.0.0
                serve: 4.0.1
    
    Project Installed Platforms:
    
        android: 14.0.0
    
    Project Installed Plugins:
    
        cordova-plugin-advanced-http: 3.3.1
        cordova-plugin-file: 8.1.3
        cordova-plugin-file-transfer: 2.0.0
    
    Environment:
    
        OS: Ventura 13.1 (22C65) (darwin 22.2.0) x64
        Node: v18.19.0
        npm: 10.2.3
    
    android Environment:
    
        android:
    [=======================================] 100% Fetch remote repository...       
    Available Android targets:
    ----------
    id: 1 or "android-35"
         Name: Android API 35, extension level 13
         Type: Platform
         API level: 35
         Revision: 2
    
    
    Project Setting Files:
    
        config.xml:
    <?xml version='1.0' encoding='utf-8'?>
    <widget id="com.mywebsite" version="1.0.0" xmlns="http://www.w3.org/ns/widgets"
        xmlns:cdv="http://cordova.apache.org/ns/1.0"
        xmlns:android="http://schemas.android.com/apk/res/android">
        <name>mywebsite</name>
        <description>Sample Apache Cordova App</description>
        <author email="[email protected]" href="https://cordova.apache.org">
            Apache Cordova Team
        </author>
        <content src="index.html" />
        <allow-intent href="https://mywebsite.com/*" />
    
        <!-- Localhost API calls enabled in development for testing search code: #000 for all enables -->
        <access origin="http://localhost:3000" />
        <!-- <access origin="http://*/*" /> -->
    
        <access origin="https://mywebsite.com" />
    
        <allow-navigation href="https://mywebsite.com/*" />
    
        <preference name="AndroidInsecureFileModeEnabled" value="true" />
        <preference name="AndroidExtraFilesystems" value="files,files-external,cache" />
        <preference name="AndroidPersistentFileLocation" value="Compatibility" />
        <platform name="android">
    
            <config-file target="AndroidManifest.xml" parent="/manifest">
                <uses-permission android:name="android.permission.INTERNET" />
                <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
                <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"
                    android:maxSdkVersion="28" />
                <uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE"
                    android:maxSdkVersion="30" />
            </config-file>
    
        </platform>
    </widget>
    
        package.json:
    --- Start of Cordova JSON Snippet ---
    {
      "platforms": [
        "android"
      ],
      "plugins": {
        "cordova-plugin-file": {
          "ANDROIDX_WEBKIT_VERSION": "1.4.0"
        },
        "cordova-plugin-advanced-http": {
          "ANDROIDBLACKLISTSECURESOCKETPROTOCOLS": "SSLv3,TLSv1"
        },
        "cordova-plugin-file-transfer": {}
      }
    }
    --- End of Cordova JSON Snippet ---

Extra notes:

  1. The HTML meta is set like so: connect-src 'self' http://localhost:3000 https://mywebsite.com;
  2. I tried to editing the inner configuration files in .xml in these files: ./platforms/android/app/src/main/AndroidManifest.xml and ./platforms/android/app/src/main/res/xml/config.xml, but the build process RESETS the configurations to DEFAULT. (no effect)
  3. I tried to add BELOW in the main ./config.xml. And it did not work either

BELOW:

<platform name="android">
    <!-- Allow HTTP (cleartext) traffic -->
    <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application">
        <application android:usesCleartextTraffic="true" />
    </edit-config>

    <!-- Define network security config (for Android 9+) -->
    <config-file parent="/*" target="res/xml/config.xml">
        <network-security-config>
            <base-config cleartextTrafficPermitted="true">
                <trust-anchors>
                    <certificates src="system" />
                </trust-anchors>
            </base-config>
        </network-security-config>
    </config-file>

    <!-- Whitelist HTTP/HTTPS domains -->
    <allow-navigation href="http://localhost:3000/*" />
    <allow-navigation href="https://mywebsite.com/*" />
    <access origin="http://localhost:3000" />
    <access origin="https://mywebsite.com" />
</platform>

Is there anyway to create CSS rules in a local page in Chrome? [duplicate]

I’m using this code to add CSS rules into the page. It worked wonderfully when the page was requested from my webserver. However when the page is local – ie on my C: drive – it throws a “Cannot access rules” error

Is there a modification I can make to get it working?

if (!document.styleSheets.length) {
    document.head.insertAdjacentHTML("beforeend", '<style crossorigin="anonymous"></style>');
}

var sheet = document.styleSheets[0];
for (var i=0; i<obj.defaultCss.length; ++i) {
    sheet.insertRule(obj.defaultCss[i], sheet.cssRules.length);
}

Turn on flashlight on a Windows 10 tablet programmatically

I have a Electron app with a camera view. I want to be able to turn on the flashlight.
I’m using navigator.mediaDevices.getUserMedia to control the camera with JavaScript.
Unfortunately the torch capability is not available on Windows devices.
Are there any alternative ways to achieve this?
I was thinking maybe to run a console app or powershell script from nodejs, but it seems the flashlight control is only available in the Windows UWP api’s.

Adaptive Card filled required fields blocking submit

I have the following adaptive card that is getting rendered by a custom react web chat. When I have required fields they are blocking the submit, even though there are values in the fields.

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.5",
    "body": [
        {
            "type": "Input.Text",
            "id": "firstName",
            "label": "First name",
            "isRequired": true,
            "errorMessage": "Please enter your first name"
        },
        {
            "type": "Input.Text",
            "id": "lastName",
            "label": "Last name",
            "isRequired": true,
            "errorMessage": "Please enter your last name"
        },
        {
            "type": "Input.Date",
            "id": "dob",
            "label": "Date of Birth",
            "isRequired": true,
            "errorMessage": "Please enter a valid date of birth"
        },
        {
            "type": "ActionSet",
            "actions": [
                {
                    "type": "Action.Submit",
                    "title": "Submit",
                    "style": "positive"
                }
            ]
        }
    ]
}

It’s rendering the input elements with a surrounding div tag, with the id defined in the card JSON, and the input underneath.

<div id="firstName" style="display: flex; flex-direction: column; box-sizing: border-box; flex: 0 0 auto;">
    <label
        for="__ac-4fb6e584-5ef0-4533-803c-a3f7b3426e9e" class="ac-richTextBlock"
        id="__ac-def2aa06-5f74-4bb7-9174-22f4c6b34d34"
        style="text-align: start; box-sizing: border-box; flex: 0 0 auto; margin-bottom: 3px;">
        <span class="ac-textRun" style="font-family: Calibri, &quot;Helvetica Neue&quot;, Arial, &quot;sans-serif&quot;; font-size: 14px; color: black; font-weight: 400; box-sizing: border-box; flex: 0 0 auto;">
            First name
        </span>
        <span class="ac-textRun" aria-hidden="true" style="font-family: Calibri, &quot;Helvetica Neue&quot;, Arial, &quot;sans-serif&quot;; font-size: 14px; color: rgb(209, 52, 56); font-weight: 400; box-sizing: border-box; flex: 0 0 auto;">*</span>
    </label>
    <div class="ac-input-container" style="display: flex;">
        <input class="ac-input ac-textInput ac-input-required" type="text" tabindex="0" maxlength="30" id="__ac-4fb6e584-5ef0-4533-803c-a3f7b3426e9e" aria-required="true" aria-labelledby="__ac-def2aa06-5f74-4bb7-9174-22f4c6b34d34" style="flex: 1 1 auto; min-width: 0px;">
    </div>
</div>

It looks like because of this when it tries to validate the input its failing because it can’t find the value of the input field.

Stepping through the JS, on submit I can see that it finds the Input elements but there is no value even though it’s populated. It looks like its finding it at the div level and not the level of the input field.

I started from the Minimizable Web Chat sample: Minimizable Web Chat
And the AdaptiveCard is getting sent from a Copilot Studio bot.

Has anyone experienced this before?

Getting `Automatic publicPath is not supported in this browser` when using KokoroJS

I am trying to make a simple HTML page that uses Kokoro JS for Text-to-Speech. I am looking over the demo for KokoroJS from here: https://github.com/xenova/kokoro-web/tree/main

I am then building a simple HTML page where I have a TS class named “TextToSpeech”:

import { BaseTool, ToolName } from "../BaseTool";
import { KokoroTTS, TextSplitterStream } from "kokoro-js";

export class TextToSpeech {
    async init(containerElement: HTMLElement) {
        super.init(containerElement);

        // Device detection
        const device = (await detectWebGPU()) ? "webgpu" : "wasm";
        self.postMessage({ status: "device", device });

        // Load the model
        const model_id = "onnx-community/Kokoro-82M-v1.0-ONNX";
        const tts = await KokoroTTS.from_pretrained(model_id, {
            dtype: device === "wasm" ? "q8" : "fp32",
            device,
        }).catch((e: Error) => {
            self.postMessage({ status: "error", error: e.message });
            throw e;
        });
        self.postMessage({ status: "ready", voices: tts.voices, device });

        // Listen for messages from the main thread
        self.addEventListener("message", async (e) => {
            const { text, voice, speed } = e.data;

            const streamer = new TextSplitterStream();
            streamer.push(text);
            streamer.close(); // Indicate we won't add more text

            const stream = tts.stream(streamer, { voice, speed });

            const chunks = [];
            for await (const { text, audio } of stream) {
                self.postMessage({
                    status: "stream",
                    chunk: {
                        audio: audio.toBlob(),
                        text,
                    },
                });
                chunks.push(audio);
            }

            // Merge chunks
            let audio;
            if (chunks.length > 0) {
                const sampling_rate = chunks[0].sampling_rate;
                const length = chunks.reduce((sum, chunk) => sum + chunk.audio.length, 0);
                const waveform = new Float32Array(length);
                let offset = 0;
                for (const { audio } of chunks) {
                    waveform.set(audio, offset);
                    offset += audio.length;
                }

                // Create a new merged RawAudio
                audio = new chunks[0].constructor(waveform, sampling_rate);
            }

            self.postMessage({ status: "complete", audio: audio.toBlob() });
        });
    }
}

export async function detectWebGPU() {
    try {
        const adapter = await navigator.gpu.requestAdapter();
        return !!adapter;
    } catch {
        return false;
    }
}

My tsconfig.json is like this:

{
    "compilerOptions": {
        "target": "ES2020",
        "module": "ESNext",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "outDir": "dist",
        "rootDir": ".",
        "declaration": false,
        "sourceMap": false,
        "useDefineForClassFields": true,


        "moduleResolution": "bundler",
        "allowImportingTsExtensions": true,
        "isolatedModules": true,
        "moduleDetection": "force",
        "noEmit": true,
        "jsx": "react-jsx",

        "lib": [
            "dom",
            "dom.iterable",
            "es6",
            "es2020"
        ],
        "baseUrl": ".",
        "paths": {
            "@/*": [
                "./*"
            ]
        }
    },
    "include": [
        "**/*.ts"
    ],
    "exclude": [
        "node_modules",
        "publish",
        "dist"
    ]
}

I have a script.ts that in the adds an event to a link which build the UI for TTS when clicked, which initializes the TextToSpeech class.

Everything is compiled using this command:

# Find entry point TypeScript files
ENTRY_POINTS=$(find . -name "*.ts" -not -path "./node_modules/*" -not -path "./publish/*" -not -path "./chrome_extension/*" -not -path "./dist/*")

# Build esbuild command
ESBUILD_CMD="esbuild"

ESBUILD_ARGS="--outdir=$OUTPUT_DIR --platform=browser --target=es6 --bundle --format=iife --splitting --format=esm --chunk-names=chunks/[name]-[hash]"
$ESBUILD_CMD $ENTRY_POINTS $ESBUILD_ARGS

When I load the HTML page, I get this error:

script.js:19211 Uncaught Error: Automatic publicPath is not supported in this browser
    at script.js:19211:82

Can anyone please advice what I am doing wrong? Thanks.

Reliably detect pen, hand or mouse

Use case:
User should be able to draw hand signature on any tablet using web app, however only a digital pen should be allowed for drawing.

Can the aforementioned requirement be reliably implemented using PointerEvent?
If not then what other options are available?

PointerEvent.pointerType, PointerEvent.width or PointerEvent.height properties cannot be trusted since on my device with Samsung S Pen they are not recognized.

Google auth is not available in vercel

import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';
import { UserInfoQuery } from '@/utils/query';
import * as db from '@/utils/db';

export const dynamic = 'force-dynamic';

const handler = NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID as string,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
      authorization: {
        params: {
          prompt: "select_account",
          access_type: "offline",
          response_type: "code"
        }
      }
    }),
  ],
  debug: process.env.NODE_ENV === 'production',
  useSecureCookies: process.env.NODE_ENV === 'production',
  cookies: {
    sessionToken: {
      name: `next-auth.session-token`,
      options: {
        httpOnly: true,
        sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax',
        path: '/',
        secure: process.env.NODE_ENV === 'production' ? true : false,
        domain: process.env.NODE_ENV === 'production' ? 'assistsales.vercel.app' : undefined
      }
    },
    callbackUrl: {
      name: `next-auth.callback-url`,
      options: {
        httpOnly: true,
        sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax',
        path: '/',
        secure: process.env.NODE_ENV === 'production' ? true : false,
        domain: process.env.NODE_ENV === 'production' ? 'assistsales.vercel.app' : undefined
      }
    },
    csrfToken: {
      name: `next-auth.csrf-token`,
      options: {
        httpOnly: true,
        sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax',
        path: '/',
        secure: process.env.NODE_ENV === 'production' ? true : false,
        domain: process.env.NODE_ENV === 'production' ? 'assistsales.vercel.app' : undefined
      }
    },
    pkceCodeVerifier: {
      name: 'next-auth.pkce.code_verifier',
      options: {
        httpOnly: true,
        sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax',
        path: '/',
        secure: process.env.NODE_ENV === 'production' ? true : false,
        domain: process.env.NODE_ENV === 'production' ? 'assistsales.vercel.app' : undefined
      }
    }
  },
  callbacks: {
    async signIn({ user, account, profile }) {
      if (account?.provider === 'google' && profile) {
        try {
          if (!user.email) {
            return false;
          }
          
          const now = new Date();
          
          try {
            const dbCheck = await db.query('SELECT NOW() as time');
            if (!dbCheck.rows?.length) {
              console.error('Database connection check failed');
              return false;
            }
          } catch (dbError) {
            console.error('Database connection error:', dbError);
            return false;
          }
          
          let existingUser;
          try {
            existingUser = await UserInfoQuery.getUserByEmail(user.email as string);
          } catch (getUserError) {
            console.error('Error getting user:', getUserError);
            return false;
          }
          
          if (!existingUser) {
            try {
              const userData = {
                user_name: user.name || (profile as any).name || 'Google User',
                email: user.email as string,
                passwordhash: 'google_oauth_user',
                phone: (profile as any).phone_number || undefined,
                profile_image: user.image || undefined,
                last_login_at: now,
                created_at: now,
                modified_at: now,
              };
              
              const insertQuery = `
                INSERT INTO user_info (
                  id, user_name, email, passwordhash, phone, profile_image, 
                  last_login_at, created_at, modified_at
                ) VALUES (
                  gen_random_uuid(), $1, $2, $3, $4, $5, $6, $7, $8
                )
                RETURNING *
              `;
              
              const insertParams = [
                userData.user_name, 
                userData.email, 
                userData.passwordhash,
                userData.phone,
                userData.profile_image,
                userData.last_login_at,
                userData.created_at,
                userData.modified_at
              ];
              
              const result = await db.query(insertQuery, insertParams);
              
              if (result.rows.length === 0) {
                console.error('User creation failed');
                return false;
              }
            } catch (createError) {
              console.error('Error creating user:', createError);
              try {
                const fallbackUserData = {
                  user_name: user.name || (profile as any).name || 'Google User',
                  email: user.email as string,
                  passwordhash: 'google_oauth_user',
                  phone: (profile as any).phone_number || undefined,
                  profile_image: user.image || undefined,
                  last_login_at: now,
                  created_at: now,
                  modified_at: now,
                };
                
                const createdUser = await UserInfoQuery.createUser(fallbackUserData);
                
                if (!createdUser) {
                  console.error('Fallback user creation failed');
                  return false;
                }
              } catch (fallbackError) {
                console.error('Fallback creation error:', fallbackError);
                return false;
              }
            }
          } else {
            try {
              const updateData = {
                user_name: user.name || existingUser.user_name,
                profile_image: user.image || existingUser.profile_image,
              };
              
              await UserInfoQuery.updateUserInfo(existingUser.id, updateData);
              
              const loginQuery = 'UPDATE user_info SET last_login_at = $1 WHERE id = $2 RETURNING *';
              const loginResult = await db.query(loginQuery, [now, existingUser.id]);
              
              if (loginResult.rows.length === 0) {
                console.error('Login time update failed');
                // 업데이트 실패해도 로그인은 성공으로 처리
              }
            } catch (updateError) {
              console.error('Error updating user:', updateError);
              // 업데이트 실패해도 로그인은 성공으로 처리
            }
          }
          
          return true;
        } catch (error) {
          console.error('Sign in process error:', error);
          return false;
        }
      }
      
      return true;
    },
    async session({ session, token }) {
      if (session.user?.email) {
        try {
          const dbUser = await UserInfoQuery.getUserByEmail(session.user.email);
          
          if (!dbUser) {
            console.error('User not found in database');
            throw new Error('User not found');
          }

          session.user.id = String(dbUser.id);
          
          if (!session.user.name && dbUser.user_name) {
            session.user.name = dbUser.user_name;
          }
          
          if (!session.user.image && dbUser.profile_image) {
            session.user.image = dbUser.profile_image;
          }
          
          return session;
        } catch (error) {
          console.error('Session callback error:', error);
          // 세션 데이터 업데이트 실패 시에도 기본 세션 정보는 유지
          return session;
        }
      }
      
      return session;
    }
  },
  pages: {
    signIn: '/login',
    error: '/login',
    signOut: '/',
  },
  events: {
    signOut: async () => {
      console.log('로그아웃 이벤트가 발생했습니다.');
    },
  },
  session: {
    strategy: 'jwt',
    maxAge: 30 * 24 * 60 * 60, // 30일
  },
  secret: process.env.NEXTAUTH_SECRET,
});

export { handler as GET, handler as POST };

I’m a person who can do development like vibecoding.
I’m trying to create the program I want with my cursor recently, and I’m having a problem implementing Google login, so I’m asking.

It works fine on http://localhost:3000, but Google login does not work on https://mydomain.vercel.app.

We also double-checked the setting of the vercel environment variable,
I also checked redirecturi on google console.

I think it’s a matter of cookies, so I modified the options.

Symptoms 1.
As soon as the page is loaded, the error “Unexpected token ‘<‘, “<!DOCTYPE”…is not valid JSON” appears.

Symptoms 2.
When I try to log in, I go to the login page, but when I click Google login, I go to the first page and I don’t log in.

  • The next-auth.callback-url, next-auth.csrf-token, and next-auth.session-token are not created in the cookie at this time.
  • In addition, there is no Google related content in session storage.

Things I’ve done before

  • Modify cookie options for route.ts in […nextauth]
  • Modifying NEXTAUTH_URL to the changed domain by changing the domain in vercel
  • Apply environmental variables after creating GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET for production separately
  • Adding middleware.ts for CORS settings

What could be the problem? So far I have no idea about how fix it.

Plz give me an advice.