Azure AD bearer token from React to Flask API

Question

I've setup my project, ie I have created a front-end in React, and a back-end in Flask.

In my front-end I call my back-end with a post method with the following code:

function POST(path, data) {
    return fetch(`${fetchUrl}${path}`,
        {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer ' + RequestAccessToken(),

            },
            body: JSON.stringify(data)
        }
    )
}

Where RequestTokenAccess() :

const { instance, accounts, inProgress } = useMsal();
const [accessToken, setAccessToken] = useState(null);

const name = accounts[0] && accounts[0].name;

function RequestAccessToken() {
        const request = {
                ...loginRequest,
                account: accounts[0]
        };

        instance.acquireTokenSilent(request).then((response) => {
                setAccessToken(response.accessToken);
        }).catch((e) => {
                instance.acquireTokenPopup(request).then((response) => {
                        setAccessToken(response.accessToken);
                });
        });
}

And then just the following to actually make the call to the back-end:

const [data, setData] = useState()

function fetchData(e) {
    e?.preventDefault();
    POST('/my_app', { data: data }).then(
        async (response) => {
            const json = await response.json()
            setData(json.return_data)

        }
    )
}

So for the front-end everything is working. I can get a MS Login that authorizes me so I can actually se the front-end, and I can also get a token from the RequestAccessToken function, which is given as a header to the back-end call. So everything seems to be set on the front-end part. However, the back-end calls also need to be secure is my guess, but I am not sure how that works.

Basically my app.py file looks something like:

from flask import Flask, request, jsonify
from my_app_func import MyAppFunc

app = Flask(__name__)


@app.post("/api/my_app")
def my_app():        
    data = request.json.get("data")

    return_data = MyAppFunction(data)

    return return_data

So basically, what do I need in order secure back-end calls ? I have the token as a Bearer Token in the post call. But what is the next step ? What do I actually do with it ?

Answer 1

You have to register another app on the portal azure and and give permissions to the api and configure that in the another app in portal azure . Try to do something in that space.

Answer 2

I also have the same question, but couldn't find answer. Below is what works for me:
If you want to validate the user from flask, you can send the token along with your request from react.
Then within flask, validate the user by making a request to microsoft graph api.
Here is one example how to do this:
https://github.com/Azure-Samples/ms-identity-python-flask-webapp-call-graph
Another question for you is why you can directly concatenate RequestAccessToken() as a string? isn't it only call the setAccessToken? I ask because in my react app, I don't know how to export the token so that other function can use it. I ended up using the MSAL.js v2, not the one for react.