Send cookies in Electron + React app

2020-12-31 3 min read Code Example David Poxon

In this article I discuss using cookies to make an authenticated web call to an external domain.

Over the past few months I have been tinkering with an Electron + React app. I had never worked with these technologies before so mainly my goal has been to learn. I am using the opportunity to improve my developer experience at work. I like to call it my developer console.

Anyway, I wanted to create a small tool inside the developer console that would allow me to create reproducible data configurations for the software I work on, i.e., a one-button-click system for creating complex, reproducible test data scenarios. This required me to communicate and authenticate with my local development environment, something I hadn’t previously had to do in the developer console.

Communication was an easy fetch call, but the authentication element was the unknown. How could I send cookies for a domain as part of my fetch? A quick internet search didn’t give me exactly what I wanted, but I was able to piece together what I needed from various sources. Below is a snippet for how to set the cookies for a domain in Electron, and how to include them in a fetch.

import electron from 'electron';

function performExternalRequest() {
    const cookieJar = electron.remote.session.defaultSession.cookies;
    const cookie = { 
        url: 'https://youdomain.com',
        name: 'your-cookie-name',
        value: 'your-cookie-value'
    };
    
    cookieJar.set(cookie)
    .then(() => {
        fetch('https://your-api.domain/endpoint', {
            credentials: 'include'
        })
        .then((response) => {
            console.log(response);
        })
    });
}

A gist for the above is here.

The key elements in the above are:

adding the cookie to the cookies for the session; and
setting the credentials property on the fetch request options to include.

The former sets the cookie so it can be included in the request. The latter ensures the cookie is included in the request.

Setting the credentials option warrants a bit of discussion. Depending on your browser version, the default value for credentials will either be omit or same-origin. If the former, then no cookie will be sent. If the latter, and if your electron app is on a different domain than the server you want to communicate with, which is likely, then also no cookies will be sent to the server. The only way to send the cookies to the server when your app is on a different domain is to set the credentials option as include.

For more information, see:

NB: While fetch is not exclusive to React, I mention React in this post as it was a key element of the context in which my questions existed.

Thoughts, comments, or feedback? Drop them below 👇🏼