How to use relative urls in MSAL's redirectUri?

Question

In my React app, hosted on Azure as a Static Web App, I use the MSAL library for authentication. In order to create a new Msal.UserAgentApplication, I need to pass a configuration object - which in particular contains the redirectUri. Something like:

const msalConfig = {
   auth: {
      clientId: "75d84e7a-40bx-f0a2-91b9-0c82d4c556aa", 
      authority: "https://login.microsoftonline.com/common",
      redirectUri: "www.example.org/start",
   },
   ...

I'm wondering: how can I use a relative redirect url, not an absolute one?

The concrete problem I'm trying to solve is the following one: when I launch and test the app locally, then I want to redirect to localhost:3000/start instead of www.example.org/start. So far I haven't found any better method than switching the config file before each run/deploy, but it's annoying and of course can be easily forgotten...

Answer 1

You can make it dynamic like this:

const msalConfig = {
  auth: {
    redirectUri: window.location.origin + '/start'
  }
}

This takes the current origin and adds /start to the end. This way it works locally and in the deployed environment(s).