Redirect back to app after oauth2 oidc login

gsoulie · December 10, 2020, 2:44pm

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

LBopp · December 23, 2020, 2:44pm

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

gsoulie · January 4, 2021, 9:01am

Hi LBopp, thanks for your reply.

I will try it quickly in the coming few weeks.

ps : Happy new year !!

gsoulie · January 8, 2021, 10:15am

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.

LBopp · January 8, 2021, 10:35am

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

Happy new year to you too

gsoulie · January 13, 2021, 4:43pm

Not tested yet on ios but it seems it doesn’t work with Android 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…

LBopp · January 27, 2021, 7:30am

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

Prabhu1058 · March 4, 2021, 8:05am

Had any luck with redirecting ?

gsoulie · March 5, 2021, 2:23pm

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": {}
}

Prabhu1058 · May 7, 2021, 10:06am

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
}

Prabhu1058 · May 7, 2021, 10:10am

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
}

gsoulie · June 30, 2021, 3:40pm

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 ?

jnsflschr · December 21, 2024, 7:42pm

I could solve the deeplink problem by using the following as redirect link for android:

callback: `${capcitorConfig.appId}://${ROUTE_CONFIG.CALLBACK}`

So the scheme is not the hostname for android but the appId. I also used the intent filter as described by @gsoulie and the .well-known/assetlinks.json as described in the ionic documentation.

Topic		Replies	Views
Ionic Capacitor IOS redirection fail Capacitor	2	123	December 12, 2024
Oath OIDC with Okta Angular in webview Capacitor	0	737	April 22, 2022
Redirect to app (`appUrlOpen`) from InAppBrowser using WebView Capacitor	0	148	December 10, 2024
Error: Capacitor redirection to other domain/sub-domain with session storage Capacitor	2	973	May 6, 2022
Auth0 with Capacitor and Ionic 5 Capacitor	13	4649	June 8, 2021

Redirect back to app after oauth2 oidc login

Related topics