Redirect back to app after oauth2 oidc login

Capacitor
1

Hi all,

I’m facing a problem with redirecting to my capacitor android/ios app after login with angular oauth2 oidc.
I’m using identity server with angular-oauth2-oidc lib to authenticate my users. This works very well when i test with ionic serve, but i get an “unhautorized client” error when testing on mobile.

My problem is (i think) my redirectUri. I tried a lot of things but i still not found what to set inside…

Here is my is4.conf.ts file

export const authConfig: AuthConfig = {
  issuer: environment.authIS4Api,
  clientId: environment.authIS4clientId,
  responseType: 'code',
  redirectUri: 'com.myapp.mybundle:/home', // window.location.origin // <-- for ionic serve
  postLogoutRedirectUri: 'com.myapp.mybundle:/home', // window.location.origin // <-- for ionic serve
  scope: environment.authIS4scope,
  useSilentRefresh: true,
  silentRefreshTimeout: 20000,
  timeoutFactor: 0.75,
  sessionChecksEnabled: true,
  showDebugInformation: true,
  clearHashAfterLogin: false,
  nonceStateSeparator : 'semicolon'
};

And my bootstrap code :

initializeApp(): void {
    this.oauthService.configure(authConfig);
    this.oauthService.loadDiscoveryDocumentAndLogin(); // redirige vers la page d'authent kalya uniquement si pas authentifié
    
    // Automatically load user profile
    this.oauthService.events
    .pipe(filter(e => e.type === 'token_received'))
    .subscribe(_ => this.oauthService.loadUserProfile());

    this.oauthService.setupAutomaticSilentRefresh();
  }

I also add the following intent in my AndroidManifest.xml

 <intent-filter>
     <data android:scheme="com.myapp.mybundle"/>
     <action android:name="android.intent.action.VIEW"/>
     <category android:name="android.intent.category.DEFAULT"/>
     <category android:name="android.intent.category.BROWSABLE"/>
 </intent-filter>

If you got an idea… Thanks a lot

2

Hi, I had a similar issue, this solved it for me:
Enhance your capacitor.config.json with:

  "server": {
    "iosScheme": "ionic",
    "hostname": "app",
  },

Then, your identity provider needs to allow the redirectUri “ionic://app”.

3

Hi LBopp, thanks for your reply.

I will try it quickly in the coming few weeks.

ps : Happy new year !! :wink:

4

Hi,

Supposing i enhance my capacitor.config.json with :

"server": {
    "iosScheme": "ionic",
    "hostname": "com.myapp.mybundle",
  },

What about my redirectUri and postLogoutRedirectUri in my is4.config.ts file ?

Do i need to replace them by somethig like that ?

  redirectUri: 'ionic://com.myapp.mybundle:/home',
  postLogoutRedirectUri: 'ionic://com.myapp.mybundle:/home',

Thanks.

5

Hi,
I don’t have an is4.config.ts file in my project. If the redirectUri you are talking about is used for the OAuth process, I used

 redirectUri: window.location.origin

as redirectUri.
Our app runs as webapp + as iOS app, so with window.location.origin the correct url is set automatically and we don’t need to differentiate if the app is currently deployed as web-app (https://my-app.domain) or iOS app (ionic://app)

Hope that helps :slight_smile:

Happy new year to you too :slight_smile:

6

Not tested yet on ios but it seems it doesn’t work with Android :confused: i’m still searching for the good solution.

Here is my is4 configuration file for redirectURI :

export const authConfig: AuthConfig = {
  issuer: environment.authIS4Api,
  clientId: environment.authIS4clientId,
  responseType: 'code',
  redirectUri: window.location.origin + '/home',
  postLogoutRedirectUri: window.location.origin + '/home',
  scope: environment.authIS4scope,
  useSilentRefresh: true,
  silentRefreshTimeout: 20000,
  timeoutFactor: 0.75,
  sessionChecksEnabled: true,
  showDebugInformation: true,
  clearHashAfterLogin: false,
  nonceStateSeparator : 'semicolon'
};

capacitor.config.json

"server": {
    "iosScheme": "ionic",
    "androidScheme": "http",
    "hostname": "com.myapp.mybundle",
  },

android.manifest.xml

 <intent-filter>
            <data android:scheme="@string/custom_url_scheme"/>
            <action android:name="android.intent.action.VIEW"/>
            <category android:name="android.intent.category.DEFAULT"/>
            <category android:name="android.intent.category.BROWSABLE"/>
        </intent-filter>

strings.xml

<resources>
    <string name="app_name">myappname</string>
    <string name="title_activity_main">myappname</string>
    <string name="package_name">com.myapp.mybundle</string>
    <string name="custom_url_scheme">com.myapp.mybundle</string>
</resources>

My SSO accepted routes (i tried a ton of routes)

com.myapp.mybundle://
http://com.myapp.mybundle
com.myapp.mybundle://home
...

I don’t know if i need to use DeepLink or other stuff…I tried to many things…

1 Like
7

The sso accepted route needs to support the combination of iosScheme and hostname: ionic://com.myapp.mybundle
Aboud Android configs, I don’t know, sry :frowning:

8

Had any luck with redirecting ?

9

I finally changed my authentication lib. I replaced angular-oauth2-oidc by ionic-appauth (ionic-appauth - npm). angular-oauth2-oidc seems doesn’t work with capacitor for mobile app. There is an issue to get the token back after authenticate.

I followed that sample repos GitHub - wi3land/ionic-appauth-capacitor-demo.

Here is my environment configuration :

export const environment = {
  production: false,
  SERVER_URL: <MY-SERVER-URL>,
  auth_config: {
    client_id: 'my.clientid',
    server_host: 'https://sso.server.com',
    redirect_url: 'com.myapp.app://callback',
    end_session_redirect_url: 'com.myapp.app://endsession',
    scopes: 'openid profile email roles offline_access',
    pkce: true
  }
};

Then in your SSO config, add the following routes

com.myapp.app://callback
com.myapp.app://endsession

my capacitor.config.json

{
  "appId": "com.myapp.app",
  "appName": "com.myapp.app",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "www",
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 3000
    },
    "Keyboard": {
      "resize": "ionic"
    }
  },
  "cordova": {}
}
11

Hi,

Could you please share the service side client configuration sample code?.

Here is my sample code but it is not working,

new Client
{
ClientName = “spa”,
ClientId = “spa”,
AccessTokenType = AccessTokenType.Jwt,
AlwaysIncludeUserClaimsInIdToken = true,
AlwaysSendClientClaims = true,
AllowPlainTextPkce = true,
RequireConsent = true,
AccessTokenLifetime = 330,
IdentityTokenLifetime = 30,
AllowedGrantTypes = { GrantType.AuthorizationCode },
AllowAccessTokensViaBrowser = true,
ClientUri = “http://localhost:8100”,

RedirectUris = new List
{
“http://localhost:8100/auth/callback”

},
PostLogoutRedirectUris = new List
{
“http://localhost:8100/auth/endsession”
},
AllowedCorsOrigins = new List
{
“http://localhost:8100”
},
AllowedScopes = new List
{
IdentityServerConstants.StandardScopes.OpenId,
IdentityServerConstants.StandardScopes.Profile,
IdentityServerConstants.StandardScopes.Email,
IdentityServerConstants.StandardScopes.OfflineAccess

},
AllowOfflineAccess = true,
RequirePkce = true,
Enabled = true
}

12

Could you please share the service side client configuration sample code?.

Here is my sample code but it is not working, let me what correct configuration,

new Client
{
ClientName = “spa”,
ClientId = “spa”,
AccessTokenType = AccessTokenType.Jwt,
AlwaysIncludeUserClaimsInIdToken = true,
AlwaysSendClientClaims = true,
AllowPlainTextPkce = true,
RequireConsent = true,
AccessTokenLifetime = 330,
IdentityTokenLifetime = 30,
AllowedGrantTypes = { GrantType.AuthorizationCode },
AllowAccessTokensViaBrowser = true,
ClientUri = “http://localhost:8100”,

RedirectUris = new List
{
“http://localhost:8100/auth/callback”

},
PostLogoutRedirectUris = new List
{
“http://localhost:8100/auth/endsession”
},
AllowedCorsOrigins = new List
{
“http://localhost:8100”
},
AllowedScopes = new List
{
IdentityServerConstants.StandardScopes.OpenId,
IdentityServerConstants.StandardScopes.Profile,
IdentityServerConstants.StandardScopes.Email,
IdentityServerConstants.StandardScopes.OfflineAccess

},
AllowOfflineAccess = true,
RequirePkce = true,
Enabled = true
}

13

I have nothing special on server side. I use Identity Server and i just added my routes (com.myapp.app://callback and com.myapp.app://endsession) on redirect Uris and Cors sections.

Are you running on a real device and using capacitor ?