how I can manage the users permission to access the pages in ASP web application when using External API

I have a front-end project where I get all the data from an External API. How I can manage users permission to access the app pages?

When the user logs in, I get the bearer token and a list of user permissions to the pages with true and false.

How could I manage permissions while every thing comes from the External API and I could not manage that as when we use Identity?

how I could manage permission while every thing comes from the External API and I could not manage that as when we use Identity?

Based on your scenario and description its really hard to suggest you on this without having look into your code snippet or current implementation.

A lot of way out there, to manage your permission based on your API response. You might head about role based permission or claims based permission or even policy based permission

However, based on your API response it has to be decided how it need to be managed in client-side code or frontend.

For example, if you want to managed your page permission based on your API response, your first need to get the response and then based on the structure of response, you should write few javascript then set your conditional to handle the permission.

Let's say, you have following API response format:

{
  "user_id": "123",
  "username": "example_user",
  "permissions": {
    "page1": true,
    "page2": false,
    "page3": true
  }
}

HTML:

You could do as following in HTML:

   <h1>Manage External API Permission</h1>
    
    <div id="page1" style="display: none;">
        <h2>Page 1</h2>
        <p>This is page 1 content.</p>
    </div>

    <div id="page2" style="display: none;">
        <h2>Page 2</h2>
        <p>This is page 2 content.</p>
    </div>

    <div id="page3" style="display: none;">
        <h2>Page 3</h2>
        <p>This is page 3 content.</p>
    </div>

Script:

<script>
        const userPermissions = {
            "page1": true,
            "page2": false,
            "page3": true
        };

        function hasAccess(pageName) {
            return userPermissions[pageName] === true;
        }

        function togglePageVisibility(pageName) {
            const pageElement = document.getElementById(pageName);
            if (hasAccess(pageName)) {
                pageElement.style.display = "block";
            } else {
                pageElement.style.display = "none";
            }
        }
        togglePageVisibility("page1");
        togglePageVisibility("page2");
        togglePageVisibility("page3");
    </script>

Note: According the sample first of all, you have to retrieve the user permissions from the API response. Then you should have the function to check if the user has access to a specific page. Finally, another function need to show or hide a page based on user's permissions and check and toggle visibility of each page.

This not the real solution, just to share you the idea how could you proceed further. Please refer to this official document to get more idea or guideline what are the steps you could consider.