msal.js cannot get the refresh_token even though offline_access is available and I can see it in the return call

Question

I use msal.js to get access to the Microsoft Graph Api and I have gotten it working for the post part.

As you can see on the images I get the refresh_token in the response payload but not in the actual output when I console log it, how do I do this ?

Then thing is I need this refresh_token as the the place they auth their microsoft account is not the same place as the data is actually shown. Let me explain

We are a infoscreen company and we need this to show the calendar of the people who authed when they have inserted it on the presentation. so the flow is as follows:

1. They install the app and login with their Microsoft 365 account to give us access to this data. (this is the part that returns the refresh token and access Token).
2. They go to the presentation and insert the app in the area they want to show it.
3. on the actual monitor that could stand anywhere in the world the calendar would now show up.

But after 1 hour the session would expire so we need to generate a new access_token and for this we need the refresh_token.

At the step of loginPopup I can see there is a refreshToken but when I use the data it is gone, I also tried to request token silently Also I updated to the newest version of msal-browser.min.js version 2.1 that should support it.

async function signInWithMicrosoft(){
    $(".notification_box", document).hide();
    $("#table_main", document).show();
    const msalConfig = {
        auth: {
            clientId: '{CLIENTID}',
            redirectUri: '{REDIRECTURI}',
            validateAuthority: false
        },
        cache: {
            cacheLocation: "sessionStorage",
            storeAuthStateInCookie: false,
            forceRefresh: false
        },
    };

    const loginRequest = {
      scopes: [
            "offline_access",
            "User.Read",
            "Calendars.Read",
            "Calendars.Read.shared"
      ],
      prompt: 'select_account'
    }

    try {
        const msalClient        = new msal.PublicClientApplication(msalConfig);
        const msalClientLoggedIn= await msalClient.loginPopup(loginRequest).then((tokenResponse) => { console.log(tokenResponse); });
        msalClientAccounts      = msalClient.getAllAccounts();
        var msalInsertAccount   = true;
        var tableMainAsText     = $("#table_main", document).text();
        if(typeof msalClientLoggedIn.idTokenClaims !== 'undefined'){
            if(tableMainAsText.indexOf(msalClientLoggedIn.idTokenClaims.preferred_username)>-1){
                msalInsertAccount = false;
            }

            if(msalInsertAccount){
                var tableRow = "<tr>"+
                                    "<td>"+msalClientLoggedIn.idTokenClaims.name+" ("+msalClientLoggedIn.idTokenClaims.preferred_username+") <span style='display: none;'>"+msalClientAccounts[0].username+"</span><input type=\"hidden\" name=\"app_config[exchange_online][]\" class=\"exchange_online_authed_account\" value=\""+msalClientLoggedIn.idTokenClaims.preferred_username+","+msalClientLoggedIn.idTokenClaims.name+"\" /></td>"+
                                    "<td class=\"last\"><a href=\"#\" onclick=\"removeMicrosoftAccount(this);\">Fjern adgang</a></td>"+
                                "</tr>";
                $("#table_body", document).append(tableRow);
                $("#table_foot", document).hide();
            }
        }
    }catch(error){
        $(".notification_box", document).show();
    }
}