expressjs set.cookie is working with svelte app but not with sveltekit even with creditional includes

60 Views Asked by At

the stack: expressjs with api routes that uses res.cookie(). Adapter-node currently is svelte but I'm trying to switch to sveltekit. svelte front app is running on http://localhost:5000 sveltekit is running on the default port http://localhost:5173 backend expressjs is running on http://localhost:3000

The issue : my express route has the following code :

app.get("http:localhost:3000/getacookie", (req, res)=>{
    let cookieinfo = "data in the cookie"
    res.cookie("mycookiethree", cookieinfo,{ secure: false, path: '/' })
    res.json({"server": " check for a cookie"})
})

in svelte all I do is submit a fetch to this route and I see the cookies in chrome dev tools :

let response = await fetch('http://localhost:3000/getacookie',{
  method: 'GET',
  origin : 'http://localhost:5000',
  credentials : 'include',
  headers: {
  'Accept': 'application/json',
  'Content-type' : 'application/json'
  }
  })

and I check chrome dev tools and the cookie is set in my browser.

Now to sveltekit : I have a form in login

login/login.svelte

<section >
    <form name="form1" action="?/login" method="POST" use:enhance>
        <ul class="wrapper" >
          <li class="form-row">
            <label for="name">password </label>
              <input type="text" name="loginpassword" placeholder="Type here"  value={form?.name ?? ""} />
             
          </li>
          <li class="form-row">
            <label for="name" >Email </label>
              <input type="email" name="loginemail" placeholder="Type here" value={form?.email ?? ""} />
              
          </li> 
         </ul>
        <button> Send Your Message To An Empty Void </button>
       </form>     
</section>

In my /login/+page.server.js I have action handle:

export const actions = {
            login: async ({cookies,  request }) => {
                const loginData = Object.fromEntries(await request.formData());
                let {loginpassword , loginemail} = loginData
              

                
     const nocookies = await fetch('http://localhost:3000/getacookie',{
                                    method:'GET',
                                    credentials : 'include',
                                    headers:{
                                    'Accept': 'application/json',
                                    'Content-type' : 'application/json'                                   
                                    }
                                    
                                });                
             let outputofcookies = await nocookies.json()
               
                 return {
                       form1 : true,
                       success : true,
                       loginData                       
                }
            }
       } //actions

no cookies is set in the browser. Dev tools application cookies tab is empty. I understand that sveltekit has its own server so do I need to pass the contents from the expressjs in the res and then use cookie.set in my +page.server.js like so:

export const actions = { login: async ({cookies, request }) => { const loginData = Object.fromEntries(await request.formData()); let {loginpassword , loginemail} = loginData

               //use fetch to get the data from expressjs api
               
               let cookieinfo = "data from expressjs api"
              cookie.set("acookie", cookieinfo)
               return  {
                 //...
               }
             }

Currently the svelte spa app is online and working fine. I just thought to give sveltekit a spin but I ran into the cookie issue.

Is this how I set a cookie in sveltekit or I need to configure sveltekit to pass cookies from the res returned from the expressjs?

0

There are 0 best solutions below