Access .env variables inside react / inertia

Hello,

I'm currently trying to access .env variables within my react props. I've managed to do this but then discovered a big security issue.

I currently add them like this to the boot function inAppServiceProvider

Inertia::share('app', [
            'monthlyPayment' => env('STRIPE_PRODUCT_ID_MONTHLY'),
            'yearlyPayment' => env('STRIPE_PRODUCT_ID_YEARLY'),
 ]);

I then get them from the app props {app.monthlyPayment} but I noticed with the react chrome extension I can see them. Not sure if this would be the case in production? It doesn't really matter for these but if I needed to access sensitive data then it would be an issue.

Tray2

3 years ago

Level 73

You should never have access to .env values in the front end. All that should be handled on the server side.

1 like

cib88

3 years ago

Level 2

@Tray2 that makes sense as I couldn't think of an example where I would need to have sensitive values, to be honest. The stripe product values I did this way as I didn't want to have to update the code to change products when switching between dev and prod. But the main secret keys are handled on the server so that's fin.

Snapey

3 years ago

Level 122

and you should never directly access .env values in your code either

You should only use .env to initialise config values, and then use config through your application, otherwise everything will break when you cache config

1 like

Please or to participate in this conversation.