AWS QuickSight session ends so fast

I am having issue with QuickSight . I am following the documentation how to implement it. I got these policies added:

{
"Version": "2012-10-17",
"Statement": [
    {
        "Effect": "Allow",
        "Action": [
          "quicksight:GenerateEmbedUrlForAnonymousUser"
        ],
        "Resource": [
            "arn:aws:quicksight:eu-west-1:myUserId:namespace/default",
            "arn:aws:quicksight:eu-west-1:myUserId:dashboard/{{dashboardId-1}}",
            ]
        ]
    }

}

And this one too:

{
"Version": "2012-10-17",
"Statement": {
    "Effect": "Allow",
    "Action": "sts:AssumeRole",
    "Resource": "arn:aws:iam::myUserId:role/QuickSightEmbeddingAnonymousPolicy"
}

}

I am generating the embedUrl with nodeJS.

app.get("/", (req, res) => {
const experienceConfiguration = {
    "Dashboard": {
        "InitialDashboardId": "idOfDashboard"
    }
};
quicksight.generateEmbedUrlForAnonymousUser({
    'AwsAccountId': 'myUserId',
    'Namespace': 'default',
    'AuthorizedResourceArns': ["arn:aws:quicksight:eu-west-1:myUserId:dashboard/idOfDashboard"],
    'ExperienceConfiguration': experienceConfiguration,
    'SessionLifetimeInMinutes': 600

}, function (err, data) {
    console.log('Errors: ');
    console.log(err);
    console.log('Response: ');
    console.log(data);
})

This here generates the EmbedUrl . And when i copy paste it to my browser it will display me the dashboard. But when i apply that long url to my React application it will not display it . I use this code in front-end:

useEffect(() => {
    let dashboard

    function onDashboardLoad(payload) {
        console.log("Do something when the dashboard is fully loaded.", payload);
    }

    function onError(payload) {
        console.log("Do something when the dashboard fails loading", payload);
    }

    function embedDashboard() {
        var containerDiv = document.getElementById("embeddingContainer");
        var options = {
            url: "HERE_THE_EMBED_URL",

            container: containerDiv,
            height: "700px",
            width: "1000px",
        };
        dashboard = QuickSightEmbedding.embedDashboard(options);
        dashboard.on("error", onError);
        dashboard.on("load", onDashboardLoad);
    }

    
    embedDashboard()
}, [])

It will give me this error: Message: "csrf token missing or not match." I also tried to generate this EmbedUrl from the Front-end (and this was my first initial idea to do) but sadly getting only CORS errors . I tried with this code here:

        const experienceConfiguration = {
                "Dashboard": {
                    "InitialDashboardId": "myDashboardId"
                }
            };

            const generateEmbedUrlForAnonymousUserParams = {
                "AwsAccountId": "myUserId",
                "Namespace": "default",
                "AuthorizedResourceArns": ["arn:aws:quicksight:eu-west-1:myUserId:dashboard/myDashboardId"],
                "ExperienceConfiguration": experienceConfiguration,
                
                // "SessionLifetimeInMinutes": 600
            };

            const quicksightClient = new QuickSight({
                credentials: {
                    accessKeyId: 'myAccesId',
                    secretAccessKey: 'mySecretKey'
                },
                region: "eu-west-1",
            });

            quicksightClient.generateEmbedUrlForAnonymousUser(generateEmbedUrlForAnonymousUserParams, function (err, data) {
                if (err) {
                    console.log(err, err.stack);
                    // errorCallback(err);
                } else {
                    const result = {
                        "statusCode": 200,
                        "headers": {
                            "Access-Control-Allow-Origin": "*", 
                            "Access-Control-Allow-Headers": "Content-Type"
                        },
                        "body": JSON.stringify(data),
                        "isBase64Encoded": false
                    }
                
                }
            });

I also saw in some tutorials that there might be needed changes in the admin panel of quicksight https://eu-west-1.quicksight.aws.amazon.com/sn/admin But i cannot acces this page. Perhaps i need more premissions from administrator?

Answer

You need to make sure that the domain where you are embedding your QuickSight dashboard is white listed here https://eu-west-1.quicksight.aws.amazon.com/sn/admin#embedding If you do not have permissions to add domains there then you need a QuickSight admin to add the domain there.