Access AWS Secrets from React Amplify APP

Question

This May be a stupid question, But is it safe to access AWS Secrets from my React front end app (Hosted on AWS Amplify) In this manner ?

These Secrets are obviously not intended to be public so I dont want to use Amplify Env Variables option.

If this is not the appropriate way of loading API Secrets and keys to a Front End Application, then what is ?

var AWS = require('aws-sdk'),
    region = "us-east-2",
    secretName = "MNTSWP",
    secret,
    decodedBinarySecret;

// Create a Secrets Manager client
var client = new AWS.SecretsManager({
    region: region
});



client.getSecretValue({SecretId: secretName}, function(err, data) {
    if (err) {
        if (err.code === 'DecryptionFailureException')

            throw err;
        else if (err.code === 'InternalServiceErrorException')

            throw err;
        else if (err.code === 'InvalidParameterException')

            throw err;
        else if (err.code === 'InvalidRequestException')

            throw err;
        else if (err.code === 'ResourceNotFoundException')

            throw err;
    }
    else {

        if ('SecretString' in data) {
            secret = data.SecretString;
        } else {
            let buff = new Buffer(data.SecretBinary, 'base64');
            decodedBinarySecret = buff.toString('ascii');
        }
    }
    
    // Your code goes here. 
});

Answer 1

In order for this to even work, you'd have to have some credentials on the client that had permission to access the secret. If they are truly secret then you should not do this. Anything that you request via your app is no longer secret. If you are trying to provide secure access to backend resources you should use something like Cognito and pass along a JWT.