AWS: Scan a DynamoDb Directly from a React Website

If you want to query a DynamoDb from a React website, you will normally make an HTTP call to an AWS API Gateway endpoint, that forwards the request to a lambda function, which makes the DynamoDb call, and finally returns the data. You can query DynamoDb directly from the website (despite random commenters on StackOverflow telling you you are not allowed to). You can decide for yourself if this is what you want to do.

To use this method, you will need to setup a Cognito Identity Pool and update the unauth role's policy to allow the DynamoDb operations.

Using a CDN for the AWS SDK (add to the index.html file)

copy

<script src="https://cdnjs.cloudflare.com/ajax/libs/aws-sdk/2.814.0/aws-sdk.min.js"
        integrity="sha512-Dvt4O0bCjhwpD1/cGkGs1DXO8lp3Q5Dxx9kXsFF9EFkmHJAyM9JWUr6udWE5qHyDMN03+mP1HjppaFhHKH2q6Q=="
        crossorigin="anonymous"></script>

The following is a function to scan a table. Note that this function calls the AWS "promise()" function to convert the result into a promise and then awaits the promise. This is done to simplify the code instead of passing a callback function to the scan method. This code does not take into account paging limitations (max 1000 rows) that the AWS SDK has.

copy

const AWS = window.AWS; //this comes from the aws reference above
const aws_cognito_pool_id = "us-east-1:MY_POOL_ID";
const aws_region = "us-east-1";

const table_name = "testing--users";


export async function list()
{
    AWS.config.update({
        region: aws_region,
        credentials: new AWS.CognitoIdentityCredentials({
            IdentityPoolId: aws_cognito_pool_id
        })
    });


    let db_client = new AWS.DynamoDB.DocumentClient();

    let params = {
        TableName: table_name
    };

    
    try
    {
        var scan_results = await db_client.scan(params).promise();
        //console.log(scan_results);

        return scan_results;
    }
    catch (err)
    {
        console.error(err);
    }


    return null;
}