How to implement node dotenv?

[psy]

I've built a PW web app that integrates as a plugin to a SaaS app and it's working really well though I have a bit of final bug-ironing to do.

One thing I've avoided addressing is implementing node dotenv. There is a javascript api method that calls on the PW AppApi module. It needs the AppApi token. The call is behind numerous logins, permission checks etc. However, for safety's sake, I would like the token to not be visible in the page source.

Have any of you implemented node modules in PW?

How did you do it and where did you put the .env file?

Is there an alternative to node to achieve the same result?

I've created a custom module to do many of the functions - should I put reference to node in the module's composer.json?

Thanks in advance

Cheers
psy

[netcarver]

Not sure I fully understand what you want to achieve, but if it's just loading values from a .env file then take a look at vlucas/phpdotenv. You can use composer to autoload it.

Assuming you have site root in /var/www/somesite/public_html/ then cd in there and use composer from the cli...

composer require vlucas/phpdotenv

Create your .env file in there...

DB_HOST="127.0.0.1"
DB_NAME="somesite_db"

You can then load the .env values from your site/config.php file...

<?php

...

require __DIR__ . '/../vendor/autoload.php'; // vendor dir in site root - adjust path if needed

/**
 * Load values from your .env file...
 */
$loader = \Dotenv\Dotenv::createImmutable(__DIR__ . '/../'); // .env in site root dir - adjust path if needed
$loader->load();

// .env values are now in $_ENV array. Use as needed...
$config->dbHost = $_ENV['DB_HOST'];
$config->dbName = $_ENV['DB_NAME'];
...

You can house your .env elsewhere if you like - just adjust the paths as needed.

Hope that helps.

[cwsoft]

Just for some further reading https://dev.to/walternascimentobarroso/dotenv-in-php-45mn

[flydev]

What Steve said.

And if you need it from your js components, there is dotenv. Take care to not leak the token, if you build the app with Vite, only variable with VITE prefix are exposed as import.meta.env.*

eg.
VITE_BAAAAAAD=abcd1234 (leaked)

DEADBEEF=abcd1234 (not leaked / undefined)

 

[psy]

Thank you all. Great advice as always. 🙂

Obviously didn't explain my scenario clearly. I have a page template that includes an inline <script> that uses js fetch to connect to the AppApi module. Works great. The authorisation token is hardcoded to the AppApi token for dev purposes. Not good for real world. The site doesn't use VITE or Heroku or other platforms. It's plain old JS.

I would like to:

1. Change the inline script to a js file called in the template
2. Hide the AppApi PHP session token from the browser output

<?php
?>
<script>
    const MyApiCall = async (url) => {
        let connect = await fetch(url, {
            method: 'GET',
            credentials: 'same-origin',
            mode: 'same-origin',
            headers: {
                'x-api-key': 'is3434343axxxxp3662OB',
            }
        })

        let result = await connect.json()
        return result
    }
</script>

I'm investigating https://www.npmjs.com/package/dotenv-webpack and struggling.

@Sebi are you able to help?

While my case includes AppApi, am sure others must have similar issues connecting PW via JS to endpoints that require (secure) authorisation in the http header.

Cheers
@psy

[flydev]

I also use AppApi frequently, you can pull it from AppApi if the code is server side, or, with js dotenv():

// .env file
SECRET_API_TOKEN=abcd00001234


// your module/template code
<script>
    const MyApiCall = async (url) => {
        let connect = await fetch(url, {
            method: 'GET',
            credentials: 'same-origin',
            mode: 'same-origin',
            headers: {
                'x-api-key': process.env.SECRET_API_TOKEN,
            }
        })

        let result = await connect.json()
        return result
    }
</script>

But it seem you are writing js code from php templates instead of using js components and/or a built app, then:

<?php
// load .env
$dotenv = Dotenv\Dotenv::createImmutable(__DIR__ /* where is .env file */);
$dotenv->load();
// 
?>

<script>
    const MyApiCall = async (url) => {
        let connect = await fetch(url, {
            method: 'GET',
            credentials: 'same-origin',
            mode: 'same-origin',
            headers: {
                'x-api-key': <?php $_ENV['SECRET_API_TOKEN'] ?>,
            }
        })

        let result = await connect.json()
        return result
    }
</script>

 

3 hours ago, psy said:

am sure others must have similar issues connecting PW via JS

dotenv. You just do not want to leak it, whatever the method used. Maybe just try to find an article that correspond you better to understand the process.