MSAL redirecturi for vue3 app with vue router hash mode resolving as my_host/#/code=....rest-of-aad-response - vuejs3

Question

Since fragments are not supported in aad redirect_uris, I made the redirect_uri my homepage with navigateToLoginRequestUrl. After sign-in, instead of being directed to my_host/#code=...reest-of-aad-response, vue router seems to jump in and hashbang the url to my_host/#/code=...rest-of-aad-response which 404s.
Do I need to switch to history or is there something I am missing and a way to accomplish this in hash mode? Should I use loginPopup instead of loginRedirect?
msal service
import * as msal from '#azure/msal-browser';
export default class msalAuth {
constructor(config) {
const msalConfig = {
auth : {
clientId : config.clientId,
authority : config.authority,
redirectUri : config.redirectUrl,
navigateToLoginRequestUrl : true
},
cache : {
cacheLocation : 'localStorage',
storeAuthStateInCookie : true
},
system: {
loggerOptions: {
loggerCallback: (level, message, containsPii) => {
if (containsPii) {
return;
}
switch (level) {
case msal.LogLevel.Error:
console.error(message);
return;
case msal.LogLevel.Info:
console.info(message);
return;
case msal.LogLevel.Verbose:
console.debug(message);
return;
case msal.LogLevel.Warning:
console.warn(message);
return;
}
}
}
}
};
let graphScopes = Object.values(config.graphScopes);
let state = window.location.origin;
let postLogoutRedirectUri = config.logoutRedirect;
let graphUrl = config.graphUrl;
this.msalAppConfig = {
graphScopes,
state,
loginRequest: {
scopes: graphScopes,
state
},
postLogoutRedirectUri,
graphUrl
};
this.app = new msal.PublicClientApplication(msalConfig);
}
login() {
this.app.loginRedirect(this.msalAppConfig.loginRequest);
}
logout(userName) {
const logoutRequest = {
account : this.app.getAccountByUsername(userName),
postLogoutRedirectUri : this.msalAppConfig.postLogoutRedirectUri,
mainWindowRedirectUri : this.msalAppConfig.postLogoutRedirectUri
}
this.app.logoutPopup(logoutRequest);
}
async handleRedirectPromise() {
return await this.app.handleRedirectPromise();
}
processRedirectResponse(response) {
let accountId = '';
console.log('processRedirectResponse', response);
if (response) {
accountId = response.account.homeAccountId;
// Display signed-in user content, call API, etc.
} else {
// In case multiple accounts exist, you can select
const currentAccounts = this.app.getAllAccounts();
if (currentAccounts.length === 0) {
// no accounts signed-in, attempt to sign a user in
//this.loginRedirect();
} else if (currentAccounts.length > 1) {
// Add choose account code here
accountId = currentAccounts[0].homeAccountId;
} else if (currentAccounts.length === 1) {
accountId = currentAccounts[0].homeAccountId;
}
}
return accountId;
}
}
redirectUri is http://localhost:8080 as am still developing
Thanks!

Answer 1

I switched vue router mode to history instead of hash, and it resolved the issue for anyone coming here with the same problem
Edit: for anyone coming to this and being dismayed that I switched to history mode and are using Azure static webapps. I added a staticwebapp.config.json to my public folder (or anywhere which will place it in root of output when built). This file lets you provide some configuration to the static web app. You can read about it in the ms docs but mine was the following which you can edit / build off of
{
"routes": [
{
"route": "/*",
"serve": "/index.html",
"statusCode": 200
}
],
"navigationFallback": {
"rewrite": "/index.html",
"exclude": [
"/icons/*.{png,jpg,gif,webp,svg}",
"/css/*",
"favicon.ico",
"/fonts/*"
]
},
"mimeTypes": {
".woff2": "font/woff2",
".woff": "font/woff",
".json": "text/json",
".ico": "image/x-icon"
}
}