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...

juunas · Accepted Answer · 2020-10-23 08:51:51Z

5

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).

answered Oct 23, 2020 at 8:51

juunas

59.6k13 gold badges130 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anand Kadhi Over a year ago

The problem is in azure we have to configure redirectUri which it exactly matches with the one we have in our code. So if our local, non-production, production redirect uri's are different how would the azure know which one is valid

juunas Over a year ago

You can configure all the valid URIs in the app registration.

Collectives™ on Stack Overflow

How to use relative urls in MSAL's redirectUri?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related