Is passing environment variables to sapper's client side secure with Rollup Replace?

Question

I am using replace in my rollup configuration for sapper and sapper-environment to pass environment variables to the client side in sapper - is this secure? Is there a better/safer way to approach this?

Using this config below:

    rollup.config.js

    const sapperEnv = require('sapper-environment');    

    export default {
        client: {
            input: config.client.input(),
            output: config.client.output(),
            plugins: [
                replace({
                    ...sapperEnv(),
                    'process.browser': true,
                    'process.env.NODE_ENV': JSON.stringify(mode)
                })
    ...

And then this allows me to use the variables in stores.js:

import { writable } from 'svelte/store';
import Client from 'shopify-buy';

const key = process.env.SAPPER_APP_SHOPIFY_KEY;
const domain = process.env.SAPPER_APP_SHOPIFY_DOMAIN;

// Initialize a client
const client = Client.buildClient({
    domain: domain,
    storefrontAccessToken: key
});

export { key, domain, client };

I have tried running this in server,js and passing the variables through the session data, but client side no matter what I do they always seems to return 'undefined'.

Answer 1

There are two questions here — a) is it secure, and b) why are the values undefined?

The answer to the first question is 'no'. Any time you include credentials in JavaScript that gets served to the client (or in session data), you're making those credentials available to anyone who knows how to look for them. If you need to avoid that, you'll need your server (or another server) to make requests on behalf of authenticated clients.

As for the second part, it's very hard to tell without a reproduction unfortunately!