Search code examples
razor-pagessrcmicrosoft-identity-platformasp.net-core-5.0

Net Core Razor Pages - Microsoft Identity Web Package after Sign-out is breaking website image links


This is very strange issue.

After installing the Microsoft Identity Web nuget package and setting up the app with razor pages, when I'm re-directed back to the app following an MS Sign out routine, i find that the logo image is no longer showing on the navbar.

This seems to be happening because the Microsoft Identity Web package is changing the URL of the page after signout i.e. its referencing a signout page that is now provided as part of the baked in package hidden away in one of the MD dll files.

enter image description here

My native javascript code is trying to load the logo image from my Images folder located on the root directory of my wwwroot folder structure, but because the signout page is changing the URL structure by adding a different path reference for the razor page, it's losing the path required for the image, not sure how to fix this?

js code that loads the image:

document.getElementById("navbarLogo").src = 'Images/CompanyLogos/Logo-LightTheme543by140px.png';

This image shows OK when I'm signed in normally or just browsing the site before sign in, so the issue only appears after being re-directed back to the site after an MS Sign out authentication flow.


Solution

  • In the end I derived up the following solution which gave me what I needed:

    // Because I'm using nested folders for the razor pages
    // directory then I needed to re-construct the url path to
    // to the images folder on wwwroot.
    var urlPath = window.location;
    var domain = window.location.hostname;
    var port = window.location.port;
    var baseUrl = 'https://' + domain + ':' + port;
    

    Then using the above:

    document.getElementById("navbarLogo").src = baseUrl + '/Images/CompanyLogos/Logo-LightTheme543by140px.png';
    

    Poss not the cleanest solution but still works for me...