host (domain) issue with VUE.js + Microsoft Authentication Library (MSAL)

Question

Thanks to this post (link) I can have a good look on how to integrate MSAL with vue.

To be more specific, this (link) is the sample I played with.

By adding below code to vite.config.js, we enable the accessability to browse the webpage with the domain name we set in hosts (C:\Windows\System32\drivers\etc\hosts).
e.g. vue3-sample:3000, while the original url been localhost:3000,
But after I made the change and click either the login redirect or login popup, there're error in the console (Dev tool). (see img below code block).
note on 09-29, if accessing the page that requiresAuth, error won't show in console, only Info - Emitting event: msal:loginFailure
How can I solve it? Since the project will surely be deployed one day, and won't be accessable through localhost.

Any help or thoughts will be appreciated. Thanks in advance.

  server: {  
    host: '0.0.0.0'  
  }  

------------

update 09-29
pkce-not-created-the-pkce-code-challenge-and-verif.html
After exploring ngrok, was able to redirect to login page while url is not localhost.

But my web app (VUE CLI + MSAL) is still failing with more error.

Most of the search results are related to nginx settings, no luck so far.
I should mention my development environment is Windows 10.
Thanks if anyone has answer.

-------
update 10-06

After deployed to cloud with https certificate, it won't redirect to login page, everyone who has the url can go through every page in the web app.
Totally lost the initial purpose.