wi3land / ionic-appauth Goto Github PK

First of all thanks for the cool library! Works fine so far.

Since ios13 the recommended way to authenticate using a login service on iOS is to to use the
ASWebAuthenticationSession
There is also a cordova plugin avaiable:
https://www.npmjs.com/package/cordova-plugin-ios-aswebauthenticationsession-api

It would be nice if that is supported

Hi,

In my child class constructor I call the super() method with this:

   ...
    const requestHandler: IonicAuthorizationRequestHandler | IonicImplicitRequestHandler = new IonicAuthorizationRequestHandler(browser, storage);


    super(browser, storage, requestor, tokenHandler, userInfoHandler, requestHandler, endSessionHandler);

But when redirected to my application after a successful logging I can see in my logs Checking to see if there is an authorization response to be delivered.. This message is only located here

This function is only called here:

It means at runtime it thinks the flow is implicit... and when I check manually the instanceof in my code, it says that's an authorization handler... that's strange.

I'm still investigating but if you encoutered that in the past, curious to know about it :)

Thank you,

In my project, when I try to logout it opens a browser but doesn't redirect to my root URL (/), I tested it on the browser, and works perfectly when I tested this on the iOS logout doesn't work.

⚡️  [log] - {"action":"Sign In Failed","error":"Handle Not Available"}

run on android 7-9 working. but android 10 not working

test on device samsung s10
When I fill in the username, password then have callback oauth, As the picture below

package.json
"dependencies": {
"@angular/animation": "^4.0.0-beta.8",
"@angular/animations": "^8.1.2",
"@angular/common": "~8.1.2",
"@angular/core": "~8.1.2",
"@angular/forms": "~8.1.2",
"@angular/http": "^7.2.16",
"@angular/platform-browser": "^8.1.3",
"@angular/platform-browser-dynamic": "~8.1.2",
"@angular/router": "~8.1.2",
"@ionic-native/app-version": "^5.22.0",
"@ionic-native/core": "^5.0.0",
"@ionic-native/http": "^5.21.2",
"@ionic-native/in-app-browser": "^5.21.2",
"@ionic-native/qr-scanner": "^5.22.0",
"@ionic-native/safari-view-controller": "^5.21.2",
"@ionic-native/screen-orientation": "^5.22.0",
"@ionic-native/secure-storage": "^5.21.2",
"@ionic-native/status-bar": "^5.0.0",
"@ionic-native/user-agent": "^5.21.5",
"@ionic/angular": "^4.7.1",
"@ionic/storage": "^2.2.0",
"ajv": "^6.11.0",
"cordova-android": "^8.1.0",
"cordova-browser": "^6.0.0",
"cordova-ios": "^5.1.1",
"cordova-plugin-add-swift-support": "^2.0.2",
"cordova-plugin-advanced-http": "^2.4.0",
"cordova-plugin-app-version": "^0.1.9",
"cordova-plugin-customurlscheme": "^5.0.0",
"cordova-plugin-file": "^6.0.2",
"cordova-plugin-inappbrowser": "git+https://github.com/Onegini/cordova-plugin-inappbrowser.git",
"cordova-plugin-ionic-webview": "^4.1.3",
"cordova-plugin-qrscanner": "^3.0.1",
"cordova-plugin-safariviewcontroller": "^1.6.0",
"cordova-plugin-secure-storage": "^3.0.2",
"cordova-plugin-useragent": "^1.0.6",
"core-js": "^2.5.4",
"font-awesome": "^4.7.0",
"froala-editor": "^3.1.0",
"ion2-calendar": "^3.0.0-rc.0",
"ionic-appauth": "^0.5.1",
"ionic2-calendar": "^0.5.8",
"jquery": "^3.4.1",
"luxon": "^1.3.2",
"moment": "^2.24.0",
"rxjs": "~6.5.1",
"tslib": "^1.9.0",
"web-animations-js": "^2.3.2",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/architect": "~0.801.2",
"@angular-devkit/build-angular": "~0.801.2",
"@angular-devkit/core": "~8.1.2",
"@angular-devkit/schematics": "~8.1.2",
"@angular/cli": "8.1.3",
"@angular/compiler": "~8.1.2",
"@angular/compiler-cli": "~8.1.2",
"@angular/language-service": "~8.1.2",
"@ionic/angular-toolkit": "^2.1.1",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"cordova-plugin-calendar": "~5.1.5",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-ionic-webview": "^4.1.3",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.4.3",
"cordova-plugin-splashscreen": "5.0.2"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
},
"cordova-plugin-advanced-http": {},
"cordova-plugin-safariviewcontroller": {},
"cordova-plugin-inappbrowser": {},
"cordova-plugin-secure-storage": {},
"cordova-plugin-calendar": {
"CALENDAR_USAGE_DESCRIPTION": " ",
"CONTACTS_USAGE_DESCRIPTION": " "
},
"im.ltdev.cordova.UserAgent": {},
"cordova-plugin-customurlscheme": {
"URL_SCHEME": "appauth",
"ANDROID_SCHEME": " ",
"ANDROID_HOST": " ",
"ANDROID_PATHPREFIX": "/"
},
"cordova-plugin-qrscanner": {},
"cordova-plugin-add-swift-support": {},
"cordova-plugin-app-version": {},
"cordova-plugin-screen-orientation": {},
"cordova-plugin-splashscreen": {}
},
"platforms": [
"browser",
"android",
"ios"
]
}

I'm currently building an app using Capacitor and vanilla js. It's very difficult looking at this module how to use it by the ionic example. I'm wanting to authenticate against a private site with my own oauth server. A simple code snippet would do if possible. Thanks.

It would be a very useful addition to have a subject exposed that developers can subscribe to in guards and other places in the application that depend on if a user is logged in or not.

While we were able to figure out how to get this done it wasn't straight forward and we are still not sure if this is the correct way of doing it:

    // create an chainable subject from of auth actions
    const authAction$ = new ReplaySubject<IAuthAction>();
    auth.addActionListener(authAction$.next.bind(authAction$));

    // afterwards load  token from storage   
    auth.loadTokenFromStorage();

    // use a subject to allow access from anywhere within the application and get latest state
    // in our case this is exposed as public property on our CustomAuthService
    const authenticated$ = new ReplaySubject<boolean>();

    authAction$
      .pipe(
        switchMap(() => auth.getValidToken()),
        catchError(() => of(null)),
        map((token) => !!token),
        tap((isTokenValid) => authenticated$.next(isTokenValid))
      ).subscribe();

We found leveraging auth.session.authenticated to not be reliable since the token might already be expired. In order to rely on the value one needs to make a request for a valid token first. We found that if there is a valid token, the user is authenticated, hence we are not checking auth.session.authenticated again after requesting a valid token.

Questions:

• Are we doing this correctly with the intended purpose in mind to have a replay subject that always returns the latest authentication state
• Do you see the appeal in exposing this directly on the auth service, if so I'm happy to create a PR

Hi,
On Android device when app is run from Intune Company Portal (it's Microsoft service for managing devices) after login to Azure AD I got bad redirect with error "ERR_UNKNOWN_URL_SCHEME".
It issue occurs only when app is run from Intune Company Portal (Managed Google Play store). It not occurs on iOS and when I download app from Google Play store market.
I'm using cordova-plugin-customurlscheme 4.4.0 with correct value.

What might cause a issue?

I'm using this library with Ionic 4 website and hybrid app. On the hybrid app the token gets refreshed without problem but on the website version, since I'm using the Implicit Flow to get the Token in the first place, I get an XHR call failing to token endpoint after I try to get a valid token. I'm using Azure B2B as Authentication provider. I've read that I need to do an implicit request to refresh the token in background and get a new one, using the same request done for login but with prompt=none.

This is explained here
https://docs.microsoft.com/en-US/azure/active-directory/develop/v2-oauth2-implicit-grant-flow#getting-access-tokens-silently-in-the-background

So, how can I achieve that with this library? I haven't found a consistent way

Hi,

Great contribution thanks, the only one that works with ionic.

I have a question regarding the InAppBrowser behavior, am i supposed to listen for the redirect_uri using the cordova or capacitor browser addListener function, or am i supposed to register universal links using cordova deeplinks plugin and the inappbrowser will relaunch the app when the url matched com.ionic.starter/callback for example.

getValidToken() in ionic-auth.ts doesn't seem to return a token any more. It looks for a token in this.authSession.token, but I'm getting that as undefined, after a successful auto-sign in. In startUpAsync(), you get a stored token from storage and you then feed it into authSubject, but this.authSession.token isn't updated, is it?

Or do I need to pass an authSession in to the IonicAuth constructor now?

If I override getValidToken in my own IonicAuth subclass, and revert the code to use getTokenFromObserver again, then everything works again:
let token: TokenResponse | undefined = await this.getTokenFromObserver();

Hi All,

This is NOT an issue but a question/request.
I need detect a "login cancel", for instance, after clic on "login with google account", clic on "X" button of custom tab google login window and return to my ionic/cordova app with a "loginCancel" event/action.

Is that possible if not already implemented?
Thank you in advance for your work.

This is not an issue, but a question.
Hi. I'm using this library for a mobile app with a pwa version since last year. In pwa, on refreshing pages some times i got the error:

core.js:5873 ERROR Error: Uncaught (in promise): Error: Unable To Obtain Token - No Token Available
Error: Unable To Obtain Token - No Token Available

Well, i'm trying to use this new version, but now i get this error form the identity server: Nonce required for implicit and hybrid flow with openid scope.

I see that this version do not add the nonce in the autorize request. There is some way i can do that?

Hi @wi3land ,

I get errors in the console each time the library calls closeWindow() due to this line:

Indeed, according to the official doc https://capacitor.ionicframework.com/docs/apis/browser/#method-close-0 it's only implemented on iOS. Maybe the library could add a simple check according to the right platform? What do you think?
if (Capacitor.platform === 'ios') {

Thank you,

When looking at the browser interfaces showWindow show window method there is a parameter callbackUrl.

However when looking at the browser implementations for capacitor or cordova the parameter is not implemented.

Is there a future purpose for this parameter or simply a reminiscence of previous implementations which could be removed moving forward?

All is working well in the browser and iOS simulator but when i install the app via de IDE on my android device i get these error bubbling up from the appAuth library, when i go to the webpage where the login needs to be done.

The error comes from here, line 86
https://github.com/openid/AppAuth-JS/blob/master/src/authorization_request.ts

I've read that this might have to do with that the andriod browser or app is running as http instead of https which might window.crypto to be unavailable?
https://stackoverflow.com/questions/46468104/how-to-use-subtlecrypto-in-chrome-window-crypto-subtle-is-undefined

Any ideas on this?

I created a PR to update an OktaDev Schematics-generated project to use Ionic AppAuth 0.7.2. After doing so, I can logout, but it doesn't actually end my session at my IdP. Am I doing something wrong? I tried to follow the code in ionic-appauth-ng-demo, but it's not using the latest version, so I'm not sure if I'm using the new callbacks (vs handleCallback) correctly.

I try to implement a login with multiple social media platforms using this lib with Ionic and Capacitor.
I have it working with Okta, but I have some trouble to get it running with Google.

After the callback I request the user token, but Google responds with a 400 and
"error":{"error":"invalid_request","error_description":"client_secret is missing."

The form data send looks ok:
POST https://oauth2.googleapis.com/token 400

grant_type=authorization_code
&client_id=.....apps.googleusercontent.com
&redirect_uri=http%3A%2F%2Flocalhost%3A8100%2Fauth%2Fcallback
&code=...MvllL1D0ND-cQ
&code_verifier=...kBbIdLdFZigHAV3X5UXxC

Any help/hints would be appreciated.

When compiling in Android + Cordova. The inAppBrowser plugin shows the navigation bar. How can I stop it from showing? Thanks

I'm using the latest version 0.7.x and I got this error, I based this on the react example also I figured IonicAuth got replaced but is I change it to class ClassName extends AuthService I'm missing the startUpAsync method. any ideas? perhaps an updated version of the demo?

Hello,

I am having issues when migrating to IONIC 5 and Angular 9, can you provide this support please ?

I'm trying ionic-appauth with Ionic v3 but it's not working. Is there any way to integrate it with apps built Ionic V3 not v4 or v5 ?

I have ran this command _

"npm install ionic-appauth --save"

but unable to find the AuthService service. Then i referred your cordova demo

"https://github.com/wi3land/ionic-appauth-ng-demo" but unable to follow how npm install add the core module and implicit component.

We are using the package with Ionic5, Vue3 and Capacitor3 and before we upgraded from Capacitor2 to Capacitor3, everything worked as expected.

After upgrading to Capacitor3, we got some issues and once 0.8.0 was released, we upgraded the package but looks like there are a few deprecated method with the following comment:

Independent observers have been replaced by Rxjs this will be removed in a future release please use $ suffixed observers in future

Our current code looks like this:

setup() {
    const router = useRouter();
    let authObserver = Auth.Instance.addActionListener((action) => postCallback(action));

    onMounted(() => {
      Auth.Instance.authorizationCallback(window.location.origin + router.currentRoute.value.fullPath)
    })

    onUnmounted(() => {
      Auth.Instance.removeActionObserver(authObserver);
    });

    function postCallback(action: IAuthAction) {

      if (action.action === AuthActions.SignInSuccess) {
        // router.replace('/');
      }
      //
      if (action.action === AuthActions.SignInFailed) {
        // console.log('Failed');
      }
    }

    return {router};
  }

We are now getting warning with the above message but the docs or examples or code doesn't seem to be updated yet to show how/which methods should be used instead. It would be great if there would be some examples on how to fix this as we are now getting errors like this after the update:

Checking to see if there is an authorization response to be delivered.
Notifier is not present on AuthorizationRequest handler. No delivery of result will be possible

Thanks

I have the following code in my auth.service.ts class to fetch the OIDC configuration from a REST endpoint. This works great when my app first loads.

private async addConfig() {
  const scopes = 'openid profile offline_access';
  const redirectUri = this.onDevice() ? 'dev.localhost.ionic:/callback' : window.location.origin + '/implicit/callback';
  const logoutRedirectUri = this.onDevice() ? 'dev.localhost.ionic:/logout' : window.location.origin + '/implicit/callback';
  const AUTH_CONFIG_URI = 'http://localhost:8080/api/auth-info';

  if (await this.storage.getItem(AUTH_CONFIG_URI)) {
    console.log('found in local storage')
    this.authConfig = JSON.parse(await this.storage.getItem(AUTH_CONFIG_URI));
    // await this.storage.removeItem(AUTH_CONFIG_URI);
  } else {
    // try to get the oauth settings from the server
    this.requestor.xhr({ method: 'GET', url: AUTH_CONFIG_URI }).then(
      async (data: any) => {
        this.authConfig = {
          identity_client: data.clientId,
          identity_server: data.issuer,
          redirect_url: redirectUri,
          end_session_redirect_url: logoutRedirectUri,
          scopes,
          usePkce: true,
        };
        await this.storage.setItem(AUTH_CONFIG_URI, JSON.stringify(this.authConfig));
      },
      (error) => {
        console.error('ERROR fetching authentication information, defaulting to Keycloak settings');
        console.error(error);
        this.authConfig = {
          identity_client: 'web_app',
          identity_server: 'http://localhost:9080/auth/realms/jhipster',
          redirect_url: redirectUri,
          end_session_redirect_url: logoutRedirectUri,
          scopes,
          usePkce: true,
        };
      }
    );
  }
}

However, if I log in to my app and drill down into a page, then refresh the browser, I get an error:

found in local storage
ERROR Error: Uncaught (in promise): Error: AuthConfig Not Defined
Error: AuthConfig Not Defined
    at AuthService.push../node_modules/ionic-appauth/lib/ionic-auth.js.IonicAuth.getAuthConfig (ionic-auth.js:107)
    at AuthService.<anonymous> (ionic-auth.js:443)
    at step (ionic-auth.js:33)
    at Object.next (ionic-auth.js:14)
    at ionic-auth.js:8

You'll notice that "found in local storage" is printed before this error. If I move that console.log to after this.authConfig is set, I still get the same order of printout and error.

if (await this.storage.getItem(AUTH_CONFIG_URI)) {
  this.authConfig = JSON.parse(await this.storage.getItem(AUTH_CONFIG_URI));
  console.log('found in local storage');
}

Is there a better way to fetch the OIDC configuration dynamically?

Hi @wi3land ,

For a specific application I could have a "sign in" button at different places and I would like to know what is the best way to remember the "current view" so that after a successful login that redirects the user on the callback URL, I would be able to redirect the user to the "saved view".

I saw the loginHint parameter that allow adding some info:
https://github.com/wi3land/ionic-appauth/blob/master/src/ionic-auth.ts#L225-L228

but I'm not sure this is the right thing to use. What do you think?

Thank you,

Hi @wi3land,

I ran into this issue by using the sample on (https://github.com/wi3land/ionic-appauth-ng-demo/) running Cordova and Ionic 5 using Angular with the following command :

ionic cordova run android

The error occurs when the callback URL in the mobile app is called.

Interesting fact its I have the "Invalid Action" on the first login attempt. If I try to relaunch the application using the same command I am already logged in with a valid token. Maybe the issue is related to the Cordova storage? Is someone had this problem also?

We are using our own IdentityServer v4 as the identity provider.

Thanks!

Hi @wi3land,
I'm using ionic-appauth to manage a login flow using an Azure AD server.
The login flow works properly but when i try to refresh token (when the first token is expired) I get an error with the advanced-http plugin.
The error is:
"{"action":"Refesh Failed","error":"advanced-http: "data" option is configured to support only following data types: Array, Object"}"

I have tried to use both version of plugin (0.5.0 and 0.6.0) but the result is the same.

Can you help me?
Thank You in advance

In my case, ionic-appauth plugin send request for new access/refresh token to Azure AD after few/over a dozen request with bearer token (and then unfortunately Azure blocking my next requests for login for some time). Maybe it is problem with usage SecureStorage? I thought app lost entry from SecureStorage oraz my config is bad.

And another related case - when I testing solution in web browser - then I getting info: token is valid (from isValid() method), but when I testing authorization on mobile device (use Pkce: true) then I always got info: token is not valid ( isValid() return false). What might be caused this problem?

It's my config for mobile:

   identity_client: 'id-from-Azure', 
    identity_server: 'https://login.microsoftonline.com/some-id-graph/', 
    redirect_url: 'APP-ID://callback',
    scopes: 'openid profile offline_access',
    usePkce: true,
    end_session_redirect_url: 'APP-ID://endSession',
    auth_extras: { 'resource' : 'api-id-from-Azure' }

Hi! Thanks so much for working on this Ionic implementation of AppAuth! So far so good on the web side. Unfortunately, it looks like my OpenID endpoint does not support PKCE implementation (I don't have a code_challenge_methods_supported section in my .well-known/openid-configuration)

So this looks like I will have to use my client secret to authenticate? Is using a Client Secret currently not supported by this library? I guess we would need a way to hit a server endpoint to then send the request serverside so we can add the secret (that's stored on the server) in the Auth header?

Thanks for any insight if this is possible or not!

Hi @wi3land ,

Usually when going on the "accounts.XXXX.com" page for the OAuth2 login, companies like Google leave the choice to either login or register or recover the password.

Currently with ionic-appauth I'm able to say open the accounts page for the login and then redirect back the user. What would be the best approach to set a "register" button inside my app and try to mimic the OAuth2 flow? I mean, I don't want to reinvent the wheel for "Open Registration view" with RedirectURI...

Did you already see that implemented?

An idea I have to hack a bit would be as discussed yesterday in another issue, to use the signIn() method from ionic-appauth and add a parameter in the state (needs to be implemented), or for now stringify an object and pass it as loginHint (just for a test).

In this object I could have something like: {"action": "register"}, so the accounts.XXXX.com website would know which page to show. And since the challenge code during the registration would be the initial login one, after registration+login the user would be redirected to the app.

What do you think :) ?

Followed the pattern described here to use ionic-appauth : https://github.com/wi3land/ionic-appauth-react-demo

When the App redirects to OAuth pages, it is showing up the Browser Header and Footers, which leads to a bad user experience
Is there a way to hide them? or any other browser plugin I should try out?
PFA screenshot in iPhone:
See the header and footer in Red Outlined boxes

Hi as the title suggests, the file ionic-auth.ts was removed from source, I believe on this commit .

The file was present in the repo from March 10, 2020 to previous. Was this file removal intentional? I have a need for the latest version of this file in order to override IonicAuth.performAuthorizationRequest in response to a IdentityServer4 Android issue.

Any help would be greatly appreciated!

Hi,

How far along is the React/Capacitor example? It looks fairly complete to me but after importing the example files and running my app I get a blank screen but no error is logged. It seems like <AppAuthProvider> becomes a black hole that swallows up its children and never renders anything.

Can someone please confirm the current status?

This is NOT an issue but a question/request.
I use front app on angular 8, ionic 5.4 and using identity server 4(oauth). The problem is that when I click logout button, the token is removed then redirected to logout page.
But when I try to refresh main page, It redirected to indentity server for authenticated automatically and redirected back to main page I am missing providing username and password here.
What I noticed is that if I remove manually the cookie from browser and repeat the process, this time I will be asked for username and password.

Is there a better way?
Thank you.

I started seeing these warnings today when creating a new Ionic project and using Ionic AppAuth v0.7.4.

    console.warn
      Capacitor WebPlugin "SecureStoragePlugin" config object was deprecated in v3 and will be removed in v4.

      at new WebPlugin (node_modules/capacitor-secure-storage-plugin/node_modules/@capacitor/core/build/web-plugin.js:12:21)
      at new SecureStoragePluginWeb (node_modules/capacitor-secure-storage-plugin/dist/esm/web.js:4:9)
      at Object.<anonymous> (node_modules/capacitor-secure-storage-plugin/dist/esm/web.js:38:29)
      at Object.<anonymous> (node_modules/capacitor-secure-storage-plugin/dist/esm/index.js:1:1)

    console.warn
      Capacitor plugin "SecureStoragePlugin" is using the deprecated "registerWebPlugin()" function

      at legacyRegisterWebPlugin (node_modules/capacitor-secure-storage-plugin/node_modules/@capacitor/core/build/legacy/legacy-web-plugin-merge.js:10:13)
      at Object.registerWebPlugin (node_modules/capacitor-secure-storage-plugin/node_modules/@capacitor/core/build/global.js:30:46)
      at Object.<anonymous> (node_modules/capacitor-secure-storage-plugin/dist/esm/web.js:41:1)
      at Object.<anonymous> (node_modules/capacitor-secure-storage-plugin/dist/esm/index.js:1:1)

    console.log
      {
        action: 'Get Token From Storage Failed',
        error: 'No Token In Storage'
      }

      at ConsoleLogObserver.update (node_modules/ionic-appauth/lib/auth-observer.js:78:17)

When I start my app, I get additional errors.

[ng] Error: node_modules/capacitor-secure-storage-plugin/node_modules/@capacitor/core/types/definitions-internal.d.ts:16:18 - error TS2430: Interface 'CapacitorInstance' incorrectly extends interface 'CapacitorGlobal'.
[ng]   Types of property 'Plugins' are incompatible.
[ng]     Property 'SecureStoragePlugin' is missing in type '{ [pluginName: string]: { [prop: string]: any; }; }' but required in type 'PluginRegistry'.
[ng] 16 export interface CapacitorInstance extends CapacitorGlobal {
[ng]                     ~~~~~~~~~~~~~~~~~
[ng]   node_modules/capacitor-secure-storage-plugin/dist/esm/definitions.d.ts:3:9
[ng]     3         SecureStoragePlugin: SecureStoragePluginPlugin;
[ng]               ~~~~~~~~~~~~~~~~~~~
[ng]     'SecureStoragePlugin' is declared here.

Any ideas how to fix it?

@ionic-native/secure-storage or more precisely, https://github.com/Crypho/cordova-plugin-secure-storage is deprecated, we should have the option to use localstorage even if one might think that it involves security risks. I personally don't think so and we can debate it, I might be wrong.

Hi there,

I'm running on a scenario where the user launches the APP and I get AuthActions.LoadTokenFromStorageFailed, AuthActions.SignInFailed and AuthActions.RefreshFailed actions all the time when an user has already logged in and closes the APP and opens it up again.

My question is how to handle or make a fresh start of the session when that occurs. Is that possible? I think this could be related to #33

I was recently troubleshooting a problem with our user registration process where our browser tab would close without warning after the user logged in for the first time. I discovered that it's because this library was explicitly invoking window.close() in auth-service.ts in both the internalAuthorizationCallback (line 112) and internalEndSessionCallback (line 118).

When looking at this further, this makes complete sense for both the CapacitorBrowser and CordovaBrowser implementations. However, I don't know why this is being called for the DefaultBrowser. I realized that "window.close()" is actually being called 100% of the time after login/logout within a web browser. The reason that most of the time it doesn't actually just close the browser is because this call only works if the current tab is "closeable". In Chrome and Edge, a tab is closeable if it was opened from a link from another website using target="_blank" AND it does not have rel="noopener" set.

I was able to easily reproduce this by opening my site using a link like this, logging in using Chrome <87.0.4280.88 (Official Build) (64-bit)> or Edge <87.0.664.55 (Official build) (64-bit)>. In each case, the new tab immediately closed after logging in. I proved this worked upon logout as well. If I added 'rel="noopener"' to my link, it stops this behavior and I am able to log in and out without the tab closing.

I am wondering why the call to "window.close()" should ever be legitimately used on auth-browser.ts:23. I think this call should be completely removed, and "closeWindow" should be a no-op. I would understand it if window.open on line 14 opened a new window ("_blank"), but it doesn't, it's "_self".

@wi3land
The session data is stored in plaintext in cache files. Possible to add any encryption method to store session data?.

In a previous issue #19 you mentioned that the Browser class has a method called browserCloseListener.
The problem is that i only see the addCloseBrowserEvent method and I'm not sure how to properly use that method to get SignInFailed or similar errors.

Maybe you can help me and clearify how i could use that method appropriate.

@wi3land Can you please email me at [email protected]? I have a quick question for you.

I noticed that the user in the session object is always undefined, even if action LoadUserInfoSuccess was triggered.
As far as I understand the code inside the update method of the auth-observer should a case for the LoadUserInfoSuccess Action as well.

    update(action: IAuthAction): void {
        switch(action.action) {
            case AuthActions.SignInFailed:
            case AuthActions.RefreshFailed:
            case AuthActions.LoadTokenFromStorageFailed:
                this.session.error = action.error;
                this.session.token = undefined;
                this.session.user = undefined;
                this.session.isAuthenticated = false;
                break;
            case AuthActions.SignInSuccess:
            case AuthActions.RefreshSuccess:
            case AuthActions.LoadTokenFromStorageSuccess:
                this.session.error = undefined;
                this.session.token = action.tokenResponse;
                this.session.isAuthenticated = true;
                break;
            case AuthActions.LoadUserInfoFailed:
                this.session.error = action.error;
                this.session.user = undefined;
                break;
            case AuthActions.SignOutSuccess:
            case AuthActions.Default:
                this.session = new DefaultAuthSession();
                break;
            case AuthActions.SignOutFailed:
                this.session.error = action.error;
                break;
        }
    }

Facebook adds #_=_ to the end of the URL which causes the error State Does Not Match.

Hi!

I cloned Angular/Capacitor Demo into my workspace.

I changed the configurations with those of my identity server.

This work good on ANDROID (only after an: npx cap update android) but doesn't redirect my app in iOS.
It remains on a blank page after the identity server redirect and does not return to the app.

Does this library work on iOS?

Thanks in advance!

Hi Team,

I have Query , am developing one ionic cordova application and was able integrate and use the plugin but i would like to add one more parameter to the AuthService configuration along with given params mine language specification identity_client, identity_server, redirect_url, scopes, usePkce, response_type: end_session_redirect_url, could you please help us with procedure to add the param.

I have tried below steps
1.Add one param to interface IAuthConfig
2.Assigned the value in AuthService class ,

Please let us know if any other changes required to send the values to SSO

Thanks
Sandeep N

On my landing page I call this.auth.loadTokenFromStorage(); in ngOnInit(). After logging in, next relaunch iOS pull the token successfully from storage, but Android always fail. But when I tap Sign In and it authenticates immediately.

"ionic-appauth": "^0.7.4"

capacitor-runtime.js:2438 onscript loading complete
capacitor-runtime.js:393 native App.addListener (#98061971)
capacitor-runtime.js:393 native Device.getInfo (#98061973)
main-es2015.c723d9e46deacbfd95e7.js:1 [DEPRECATION][Events]: The Events provider is deprecated and it will be removed in the next major release.
  - Use "Observables" for a similar pub/sub architecture: https://angular.io/guide/observables
  - Use "Redux" for advanced state management: https://ngrx.io
e @ main-es2015.c723d9e46deacbfd95e7.js:1
main-es2015.c723d9e46deacbfd95e7.js:1 Launching app
capacitor-runtime.js:393 native PushNotifications.addListener (#98061975)
capacitor-runtime.js:393 native PushNotifications.addListener (#98061976)
capacitor-runtime.js:393 native PushNotifications.addListener (#98061977)
capacitor-runtime.js:393 native PushNotifications.addListener (#98061978)
capacitor-runtime.js:393 native LocalNotifications.addListener (#98061979)
capacitor-runtime.js:417 result Device.getInfo (#98061973)
main-es2015.c723d9e46deacbfd95e7.js:1 Ionic Native: deviceready event fired after 700 ms
main-es2015.c723d9e46deacbfd95e7.js:1 Ionic Native: deviceready event fired after 668 ms
capacitor-runtime.js:393 native StatusBar.setStyle (#98061987)
capacitor-runtime.js:393 native SplashScreen.hide (#98061988)
capacitor-runtime.js:417 result StatusBar.setStyle (#98061987)
capacitor-runtime.js:417 result SplashScreen.hide (#98061988)
main-es2015.c723d9e46deacbfd95e7.js:1 Login auth listener responded with Get Token From Storage Failed
capacitor-runtime.js:393 native App.addListener (#98061990)
main-es2015.c723d9e46deacbfd95e7.js:1 User tapped sign in
capacitor-runtime.js:417 result App.addListener (#98061971)
main-es2015.c723d9e46deacbfd95e7.js:1 Checking to see if there is an authorization response to be delivered.
polyfills-es2015.c530f54ba1a047995400.js:1 Unhandled Promise rejection: Invalid action ; Zone: <root> ; Task: null ; Value: Invalid action undefined
n.onUnhandledError @ polyfills-es2015.c530f54ba1a047995400.js:1
main-es2015.c723d9e46deacbfd95e7.js:1 Object
main-es2015.c723d9e46deacbfd95e7.js:1 Login auth listener responded with Sign In Success

Update this plugin for Capacitor 3. This works for me: https://github.com/anweihe/ionic-appauth/commit/ec9dcff0b085eb32a3e07de3549e33d906672864

Hi,

I've tried both the Okta example (both from blog and the Github version) and your ionic-appauth-ng-demo.
In the browser they both work with multiple OIDC providers.
Unfortunately, when i try the examples on Android (both emulator and device) the above errors appear.

Do you have any pointers how to tackle this? I've tried updating to the latest version (0.4.4) instead of 0.3.9, but that didn't change anything.