Ionic Angular capacitor-oauth2 plugin build guard

[Sally Gupta]

Hi ,

I am building mobile app in Ionic angular, I am using Azure AD B2C as my identity provider. I am able to login and authenticate using the plugin
@byteowls/capacitor-oauth2

My question is how do I build auth guard in angular to protect internal pages ? is there a method provided by the capacitor-oauth2 plugin to check if user is authenticated or logged in ?

Any help is appreciated

[Ak]

can you paste the sample here, 'Azure authenticate' I can successfully authenticate in browser, meanwhile in android popup is showing while clicking continue I got warning as ' Navigation is unreachable: msauth://com.XXXXX.XXXXX/XXXXXXXXXXXXX?code=XXXXXXXXXXXXXX&session_state=XXXXXXXXXXXXX '

[Sally Gupta]

I used this github sample to make the authentication work
https://github.com/loonix/capacitor-oauth2-azure-example

[Ak]

I used this github sample to make the authentication work https://github.com/loonix/capacitor-oauth2-azure-example

I tried the same ,except config
the config i used

oauth2Options = {
appId: 'XXXXXXXXXXXXXXXXX',
authorizationBaseUrl: 'https://login.microsoftonline.com/xxxxxxxx/oauth2/v2.0/authorize',
accessTokenEndpoint: 'https://login.microsoftonline.com/xxxxxxxx/oauth2/v2.0/token',
scope: 'https://graph.microsoft.com/User.Read',
resourceUrl: "https://graph.microsoft.com/v1.0/me/",
pkceEnabled: true,
logsEnabled: true,
responseType: 'code',

web: {

  redirectUrl: 'http://localhost:8100/login',
  windowOptions: "height=600,left=0,top=0",
},
android: {


  redirectUrl: 'msauth://com.sxxx.xxxxxsb/xxxZydORfyjxxxx',

 
},
ios: {
  pkceEnabled: true,
  responseType: 'code',
  redirectUrl: 'msauth://com.sxxx.xxxxxsb/xxxZydORfyjxxxx',
  accessTokenEndpoint: 'https://login.microsoftonline.com/xxxxxxxx/oauth2/v2.0/token',
}

};
I am getting the same error navigation is unreachable

[Sally Gupta]

you web scope doesn't look right. It should not be Microsoft graph. It should be the url you find in the "Expose an API", the application ID URI and also the same URI is listed in your API permission list and you have given admin consent

[Ak]

you web scope doesn't look right. It should not be Microsoft graph. It should be the url you find in the "Expose an API", the application ID URI and also the same URI is listed in your API permission list and you have given admin consent

Web authentication is working fine, the above mention error coming in android authentication, the screen shot shown is while debugging via chrome inspect

[doha institute for graduate studies]

you web scope doesn't look right. It should not be Microsoft graph. It should be the url you find in the "Expose an API", the application ID URI and also the same URI is listed in your API permission list and you have given admin consent

Web authentication is working fine, the above mention error coming in android authentication, the screen shot shown is while debugging via chrome inspect

do you have any updates? I am facing same issue.