Microsoft-authentication-library-for-js: index_LoginRedirect sample does not work.

Created on 24 Aug 2019  路  7Comments  路  Source: AzureAD/microsoft-authentication-library-for-js

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Browser:

  • [ ] Chrome version XX
  • [x] Firefox version 68.02
  • [ ] IE version XX
  • [x] Edge (Chrome-based, latest)
  • [ ] Safari version XX

Library version


Library version: 1.1.2
(the version 1.1.3 is not available in the CDN at the moment)

Current behavior

When trying out locally the sample of login with redirection, upon clicking on the login button, it throws this exception in the console:

Uncaught ClientConfigurationError: No redirect callbacks have been set. Please call setRedirectCallbacks() with the appropriate function arguments before continuing. More information is available here: https://github.com/AzureAD/microsoft-authentication-library-for-js/wiki/MSAL-basics.
    at ClientConfigurationError.AuthError [as constructor] (https://secure.aadcdn.microsoftonline-p.com/lib/1.1.2/js/msal.js:1510:28)
    at ClientConfigurationError.ClientAuthError [as constructor] (https://secure.aadcdn.microsoftonline-p.com/lib/1.1.2/js/msal.js:1408:28)
    at new ClientConfigurationError (https://secure.aadcdn.microsoftonline-p.com/lib/1.1.2/js/msal.js:1046:28)
    at Function.ClientConfigurationError.createRedirectCallbacksNotSetError (https://secure.aadcdn.microsoftonline-p.com/lib/1.1.2/js/msal.js:1061:16)
    at UserAgentApplication.loginRedirect (https://secure.aadcdn.microsoftonline-p.com/lib/1.1.2/js/msal.js:2091:71)
    at loginRedirect (http://localhost:5000/index_LoginRedirect:84:34)
    at HTMLButtonElement.onclick (http://localhost:5000/index_LoginRedirect:23:54)

Expected behavior

Perform the login normally without any error.

Minimal reproduction of the problem with instructions

  1. download https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-core/samples/VanillaJSTestApp/index_LoginRedirect.html
  2. change the dist/msal.js to https://secure.aadcdn.microsoftonline-p.com/lib/1.1.2/js/msal.js and replace Enter_your_client_ID with a valid clientId
  3. serve with a local HTTP server, like serve (npm i -g serve)
bug samples
Source
picture pviotti

All 7 comments

So I tried to come up with a minimal example of login flow using redirection by copy-pasting from existing samples, but the best and simplest of my attempts goes into a redirection loop. Is there a working example of this anywhere?
Here is the code I used:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="./favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <meta name="description" content="Expenses Application for M&P" />

    <link rel="apple-touch-icon" href="logo.png" />
    <title>Expenses</title>
</head>

<body>
    <div id="welcome"></div>
    <button class="btn btn-primary" style="display: none">Logout</button>

    <script type="text/javascript" src="https://secure.aadcdn.microsoftonline-p.com/lib/1.1.2/js/msal.js"></script>
    <script>
        var msalConfig = {
            auth: {
                clientId: "MYCLIENTID",
                authority: "https://login.microsoftonline.com/MYAUTHID"
            },
            cache: {
                cacheLocation: "localStorage",
                storeAuthStateInCookie: true
            }
        };
        var appConfig = {
            clientID: 'MYCLIENTID',
            graphEndpoint: "https://graph.microsoft.com/v1.0/me/sendMail",
            scopes: ["user.read"]
        };

        var msal = new Msal.UserAgentApplication(msalConfig);

        function authCallback(error, response) {
            updateUI()
        }
        msal.handleRedirectCallback(authCallback);
        msal.loginRedirect(appConfig);

        msal.acquireTokenSilent(appConfig).then(function(accessTokenResponse) {
            let accessToken = accessTokenResponse.accessToken;
        }).catch(function (error) {
            //Acquire token silent failure, send an interactive request.
            console.log(error);
            if (error.errorMessage.indexOf("interaction_required") !== -1) {
                userAgentApplication.acquireTokenRedirect(accessTokenRequest);
            }
        });

        function updateUI() {
            var label = document.getElementById('welcome');
            label.innerText = "Hello " + userAgentApplication.getUser().name + "!";
            var logout = document.getElementById('logout');
            logout.style.display = '';
            logout.setAttribute('onclick', 'logout();');
        }
        function logout() {
            msal.logout();
        }
    </script>
</body>

</html>
pviotti picture pviotti on 24 Aug 2019

@pviotti This sample currently is not up to date. There is some effort going on to clean up samples. For a working reference, you can check the index.html code under IE browser check (which works for redirect). We do plan to eventually clean up non working samples. Apologies for the inconvenience.

sameerag picture sameerag on 24 Aug 2019
😕1 👍1

@sameerag if a sample is not working should we just delete it?

DarylThayil picture DarylThayil on 26 Aug 2019
👍1

Would it be possible to post the link to the "index.html code under IE browser check" , unfortunately I'm not sure how to find that. @sameerag

Dima11235813 picture Dima11235813 on 29 Aug 2019

@Dima11235813 I think they meant this example, which indeed has a working redirection flow (for IE): https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-core/samples/VanillaJSTestApp/index.html

pviotti picture pviotti on 29 Aug 2019

@Dima11235813 @pviotti is right. Thanks for the same @pviotti.
I am also doing a quick clean up and will upload a separate sample for redirect flow, please see the PR #959.

The plan was to polish the sample and add more use cases and hence the delay, but looks like there is value in a quick sample that separates the redirect functionality only for now.

sameerag picture sameerag on 29 Aug 2019

This was resolved by PR #959. Please comment if you find any further issues. Thanks.

negoe picture negoe on 31 Oct 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

AbhaysinghBhosale picture AbhaysinghBhosale  路  3Comments
LarsKemmann picture LarsKemmann  路  4Comments
yakimko picture yakimko  路  3Comments
sameerag picture sameerag  路  3Comments
DarkLite1 picture DarkLite1  路  3Comments