Silent authentication for own website inside tab of custom Teams app

Question

After two months of experimenting with Teams Authentication via adal.js and msal.js and failure, I’m close to giving up. So I really need your help.

Basically I need to “silently” authenticate the logged in Teams User for my own website (tab) inside my app that I created with App Studio. The reason for that is, so that I can use the data of the authentication token for the login of my own website.

So far I was only able to get this working with msal.js and a popup, which according to Teams developer I’ve asked is not the way to go. Understandable, since I cannot use the popup method on the Teams Client because it gets blocked.

I’ve tried this silent login method (https://github.com/OfficeDev/microsoft-teams-sample-complete-node/blob/master/src/views/tab-auth/silent.hbs) that was recommend to me. Sadly it didn’t work. All I get is a “Renewal failed: Token renewal operation failed due to timeout” error.

Since the msal.js popup variant (Node.js Azure Quick Start Example) I used before worked in a web browser, I don’t think that the configuration of Azure App is wrong.

This is my code so far:

// onLoad="prepareForm()"

<!--- Import package for authentication information in Teams/Azure---> 
<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.15/js/adal.min.js" integrity="sha384-lIk8T3uMxKqXQVVfFbiw0K/Nq+kt1P3NtGt/pNexiDby2rKU6xnDY8p16gIwKqgI" crossorigin="anonymous"></script> 
<script src="https://statics.teams.microsoft.com/sdk/v1.4.2/js/MicrosoftTeams.min.js" crossorigin="anonymous"></script>

<script language="JavaScript">

let config = {
    clientId: "1402f497-d6e8-6740-9412-e12def41c451", // I've changed it for this stackoverflow post
    redirectUri: "https://myredirect.com", // I've changed it for this stackoverflow post
    cacheLocation: "localStorage",
    navigateToLoginRequestUrl: false, 
};

microsoftTeams.initialize()

/// START Functions for Teams

function getTeamsContext() {
    microsoftTeams.getContext(function(context) {
        startAuthentication(context);
    });         
}

function startAuthentication(teamsContext) {
    if (teamsContext.loginHint) {
        config.extraQueryParameters = "scope=openid+profile&login_hint=" + encodeURIComponent(teamsContext.loginHint);
    } else {
        config.extraQueryParameters = "scope=openid+profile";
    }

    let authContext = new AuthenticationContext(config);

    user = authContext.getCachedUser();
    if (user) {
        if (user.profile.oid !== teamsContext.userObjectId) {
        authContext.clearCache();
        }
    }

    let token = authContext.getCachedToken(config.clientId);

    if (token) {
        console.log(token)
        // Get content of token
    } else {
        // No token, or token is expired
        authContext._renewIdToken(function (err, idToken) {
            if (err) {
                console.log("Renewal failed: " + err);
                // Some way of logging in via Popup or similiar
            } else {
                console.log(idToken)
                // Get content of token
            }
        });
    }         
}

/// END Functions for Teams

// initialized on page load! 
function prepareForm() {
    getTeamsContext();
    document.InputForm.password.focus() 
}

<script/>

Those are my questions:

1. What causes this error?
2. How do I authenticate the token on manipulation and is it Teams or Azure? (Does adal.js any functions for this?)
3. How do I login if the silent authentication fails and popups are blocked? Is there a website for authentication provided by Teams that returns a token?
4. Are there any working examples of the silent authentication that are not from the official Microsoft website? (I don't understand them.)