Redirect URI for Angular/Ionic App on Device

[nomanshahsyed]

Please follow the issue template below. Failure to do so will result in a delay in answering your question.

Library

• @azure/msal-angular@2.0.0-alpha.1

Framework

Ionic:

Ionic CLI : 6.12.2 (\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 5.5.1
@angular-devkit/build-angular : 0.1002.0
@angular-devkit/schematics : 10.0.8
@angular/cli : 10.0.8
@ionic/angular-toolkit : 2.3.3

Cordova:

Cordova CLI : 10.0.0
Cordova Platforms : 6.0.0, android 8.1.0, browser
Cordova Plugins : not available

Utility:

cordova-res : not installed
native-run (update available: 1.2.2) : 0.2.7

System:

NodeJS : v10.15.2 (C:\Program Files\nodejs\node.exe)
npm : 4.6.1
OS : Windows 10

Description

I have tested the MSAL and MSAL-browser/angular library and all the versions work fine on Ionic Serve and NG serve. I have tested the angular sample and integrated it in my Ionic version and it works fine. The issue is on the actual device. Although I use loginredirect() instead of loginpopup() still on the phone a popup opens and after login the redirect URI can't be reached error comes. On PC the same both methods work. On the phone as the Popup opens and it leaves my app, i have no way to get back to the app. I am not even sure if i understand this correctly. So any help would be appreciated.

Error Message

This site can't be reached.

MSAL Configuration

auth: {
clientId: "",
redirectUri: "http://localhost:8100/",
postLogoutRedirectUri: "http://localhost:8100/",
},
cache: {
cacheLocation: BrowserCacheLocation.LocalStorage,
storeAuthStateInCookie: isIE, // set to true for IE 11
}

Expected behavior

The app on the phone opens the login page in the same app.

Browsers/Environment

• Chrome
• Android phone

[tnorling]

@nomanshahsyed Can you clarify is the error message "This site can't be reached" thrown when trying to access http://localhost:8100? Localhost will not work on phones, you may need to configure Ionic to serve an external https address and that address will need to be registered as a redirectUri on your app registration.

[nomanshahsyed]

Hi @tnorling , thanks for your reply. Yes localhost will not work on the phone. I wonder why the loginredirect() opens up a popup.

Yes i can try to serve on a local ip and access the app through the IP and test if it works on the phone. I will reply the result soon.

I only wonder how this will work if user downloads the app from playstore or appstore? I could try ionic auth connect but its for enterprise. Can you elaborate more about this external https address?

[nomanshahsyed]

Well i cant serve on local ip as it is only http and Azure redirect URI needs to be https.

[tnorling]

@nomanshahsyed When you are developing your app locally your development machine will need to host the app on an IP address that is accessible externally to the machine that's hosting it so that your phone can access it. As you noted, Azure requires that the redirectUri be https except for localhost so you will need to make sure that your app is hosted over https. You may need to use a tool such as ngrok to serve your local app externally. If you have further questions about hosting your app with Ionic you can take a look at this thread or open an issue on their repo

When you are ready to deploy your app to the playstore or appstore your app will need to be hosted on a public IP so that everyone else can access it.

[nomanshahsyed]

Hi, thanks again. Yes i have tried that. The problem is leaving the app/opening of login via popup instead of redirect. Do i need to install something like in app browser? Because now with ngrook the popup login was redirected correctly to the ionic app on the same popup page. Isnt there a way to get back to the main app after the login?

[tnorling]

@nomanshahsyed I'm not familiar enough with Ionic to understand what's happening here. Can you try opening an issue on their github repo and see if they can help you understand why a popup is being opened?