Filter Embedded Power BI Report in React.js Web App Based on User Location

I'm working on a React.js web app that embeds a Power BI report connected to a Microsoft Fabric data warehouse. We track user location upon login. I want to filter the report dynamically based on the user's location.

Here's what I've achieved so far:

• Created a Power BI report with the desired data model.
• Published the report to Power BI Service.
• Integrated user location tracking in the React.js web app.

My question:

How can I securely filter the embedded Power BI report based on the user's location within the React.js application? Are there recommended approaches to achieve this filtering functionality?

First, this article walks us through embedding a Power BI Report into a React application.

The embedConfig code controls how the report is displayed. This object uses the following schema (Source):

interface IReportLoadConfiguration {
    accessToken: string;
    bookmark?: models.IApplyBookmarkRequest;
    contrastMode?: models.ContrastMode;
    datasetBinding?: models.IDatasetBinding;
    embedUrl?: string;
    filters?: models.ReportLevelFilters[];
    id: string;
    pageName?: string;
    permissions?: models.Permissions;
    settings?: models.IEmbedSettings;
    slicers?: models.ISlicer[];
    theme?: models.IReportTheme;
    tokenType?: models.TokenType;
    type: string;
    viewMode?: models.ViewMode;
}

The filters property can be used to filter the report on load. Here is documentation on creating the filter object.

To filter your Power BI report by the user's location within the React application, I recommend inserting that location into the Basic filter code along with the desired table and column from the Power BI Data Model.

        {
            $schema: "http://powerbi.com/product/schema#basic",
            target: {
                table: "<Your Table Name>",
                column: "<Your Column Name>"
            },
            operator: "In",
            values: [<UserLocationValue>]
        }

This is what the embedConfig should look like when you are complete:

const embedConfig = {
    type: 'report',
    id: '<Your Report Id>',
    embedUrl: '<Your Embed Url>',
    accessToken: '<Your Access Token>',
    tokenType: pbi.models.TokenType.Embed,
    filters: [
        {
            $schema: "http://powerbi.com/product/schema#basic",
            target: {
                table: "<Your Table Name>",
                column: "<Your Column Name>"
            },
            operator: "In",
            values: [<UserLocationValue>]
        }
    ]
};

Thus, when the Power BI report is loaded into the Web Application, the report will be filtered to the User's location.