Strapi Microsoft authentication having issue with Redirect URI in Angular app

Question

I have followed the guide detailed in this post. Everything is set up with the App Registration, Strapi Provider config, and in the MSAL configuration. Whenever the auth flow begins, I get sent to a Microsoft login screen, I log in, and I get a Microsoft error saying AADSTS90102: 'redirect_uri' value must be a valid absolute URI.. I. am currently running Strapi and Angular on localhost.

I have added http://localhost:1337/connect/microsoft/callback to the Web Redirect URI list in the App Registration. The error screen url shows the Redirect URI being sent is. redirect_uri=%2Fconnect%2Fmicrosoft%2Fcallback. This does not seem to be valid.

Strapi admin Microsoft config has a field that says The redirect URL to add in your Microsoft application configurations with the value /connect/microsoft/callback which isn't editable. Is there where the auth is looking to pass the uri? If so, how can it be changed? If not, what is the proper way to configure this. I have not found any official documentation on how to configure this.

Answer 1

url in my-project/config/server.js is required to use the connect feature. But the document is not so clear.

You can add the url as http://localhost:1337 into my-project/config/server.js file like this:

module.exports = ({ env }) => ({
  host: env('HOST', '0.0.0.0'),
  port: env.int('PORT', 1337),
  admin: {
    auth: {
      secret: env('ADMIN_JWT_SECRET', '38506ed8f48446c253135d43bbc2afec'),
    },
  },
  url: 'http://localhost:1337'
});

It will add http://localhost:1337 before /connect/microsoft/callback, which should be able to fix this issue. More discussion here and here.

Besides, if your localhost has been changed before due to some other configuration, you can add the specific host with port here like this: url: 'http://10.10.100.242:1337'