Tutorial: User Login and Registration in Ionic 4

Matt Raible

Hello Svetlana! I haven’t experienced these issue with Ionic AppAuth and the code in this example. Then again, I haven’t installed the app on my phone, logged in, and left it idle for an hour.

I have set my access token to have a timeout of 5 minutes and was able to prove the refresh token functionality works.

Is this behavior happening with an Okta developer account?

Matt Raible

If it doesn’t redirect back to your app, then it’s possible that OktaDev Schematics didn’t configure things properly for your Okta app. Did you use OktaDev Schematics to install Auth for Okta? If so, are you using Cordova (like this tutorial) or did you try Capacitor?

Carlo

I followed the steps as mentioned in the tutorial, so i used Cordova

Svetlana Khan

Hi Matt, thanks for your reply. It is happening in my developer account as well in my company’s oktapreview account. The example works great on the web but not on iOS. All the issues I see in iOS. In iOS,

Logout function gives the impression that it is working as it takes you to the login page. But when I enter a different user’s credential in the app, it remembers the first user’s token. The secure storage code doesn’t clear and throws an error. One of the main problems I see that the secure storage stores the token first time and it remains and can’t be deleted unless I “kill” the app.

I was trying to figure out how to not store anything in Secure Storage from login but didn’t go that far. Both plugins [secure-storage and secure-storage-echo] has the same issue. I was thinking if I can implement my code to store that token in SQLite or local storage then I can solve the issue. I tested the get, set, remove with SQLite and it works. However, the schematics have hidden storage issue and I couldn’t remove it from the code.

Matt Raible

I just tried creating a new app using the latest version of Ionic CLI and OktaDev Schematics for Ionic and it works for me.


npm install -g @ionic/cli
ionic start secure-ionic tabs --type=angular --no-interactive
cd secure-ionic
ng add @oktadev/schematics --issuer=MY_ISSUER --clientId=MY_CLIENT_ID
ionic cordova prepare android
studio platforms/android
# run app from Android Studio

I used a “Pixel 3 XL API R” emulator to test it and I was able to redirect back to my app after authenticating. Are you seeing this behavior with an emulator or a real device?

Matt Raible

Yes, when you click on Logout, it prompts you with a dialog that seems to indicate you should login. This is an iOS safety mechanism. It happens with any iOS app that tries to open a browser. See this issue for more information.

The code used in this example is from Ionic AppAuth and its Angular + Cordova example. It does provide a mechanism to replace the storage backend used, but I haven’t tried it myself.

Svetlana Khan

Thank you, Matt. I tried out the sample link you sent. But still have the same issue. I’m redirecting the user to OKTA Login page if they are not authenticated during login. And for logout, I’m sending them to Login page which redirect them to OKTA Login page. In the process of logout the secure storage should be clear. But I’m getting the same error:
ERROR: Unhandled Promise rejection: Failure in SecureStorage.set() - The specified item already exists in the keychain ; Zone: <root> ; Task: Promise.then ; Value: Error: Failure in SecureStorage.set() - The specified item already exists in the keychain fail@ionic://localhost/plugins/cordova-plugin-secure-storage-echo/www/securestorage.js:42:45
I don’t get any dialog during logout in ionic. The sample is from react-native. I guess it is time to look into react-native. Thank you for your suggestion.

Carlo

With a real device

Matt Raible

Unfortunately, I don’t have an Android device to test with.

Subu Kamath

Hello, we followed this post and we were able to get the user login to work. But the access token refresh failed in both desktop and mobile app. Seems like there is a bug in the ionic app auth library used in this post.

Browser - "Browser requests to the token endpoint may only use the authorization_code grant_type."

We did see that offline_access was not in the scopes and looks like the library still tried to get a new refresh token.

Matt Raible

When I last tried this, I was able to get the refresh tokens to work, but only when deployed on a device. I tested it by setting the access token expiration on Okta to be 5 minutes.

It’s quite possible there’s a bug in Ionic AppAuth. It might be best to enter an issue on that project or try modifying one of its samples to work with Okta. It’s easier to fix the issue if we can figure out what’s causing it.

Subu Kamath

Thank you Matt, we will check this further. I now think this may be because, we had started with an SPA Application in okta and then tried to use it to work on a device using Ionic. We noticed that the “refresh token” option was missing when we did that. We will try again update here on how it goes.

Mk Dir

Hi Matt,

I follow your steps its worked well on dev mode, but when i do ionic build and when try to open application with web server with same port 8100, app open okta login and after successfully logged in application stuck /callback?code=xyz&state=abc getting 404.

Awaiting your reply.

Matt Raible

You have to configure your web server to be SPA-aware. That is, it needs to forward all requests to your index.html. We published a new guide for JavaScript apps yesterday with an example of how to deploy to Heroku. Please check it out and let me know if it helps.

Sandeep Nitchenametla

Hi Matt,
I need to send additional parameter to set some language for addConfig along with the client_id, issuer, redirect url, etc… to IAuthConfig interface . could you please let us know the procedure and required changes for adding new param so that i can send that param to SSO .

Thanks
Sandy

Matt Raible

I’m not sure how to do this. You might try asking this question in the Ionic AppAuth project. https://github.com/wi3land/…

Sandeep Nitchenametla

Thanks for the reply.

Sandeep Nitchenametla

Hi Matt,
As suggested i have posted the query under issues section in the below link.
https://github.com/wi3land/…
But i have not received any response. Am in need of the solution urgently , do you have any other links where i can check with the appropriate team for solutions

Matt Raible

Okta doesn’t offer official support for Ionic because we didn’t create the SDK that’s used. I do most of the support because I like the technology and I’ve figured out how to make it work with Ionic AppAuth. That being said, someone recently found a way to use Ionic + Capacitor with our SDKs. I haven’t tried it yet. https://github.com/capacito…

Vijay Sandhu

I am facing the same issue. Before adding cordova secure storage, I was getting an error on my mobile device while adding a value in storage:

setItem(name, value) {
return Object(tslib__WEBPACK_IMPORTED_MODULE_0__["awaiter"])(this, void 0, void 0, function* () {
yield cordova_document__WEBPACK_IMPORTED_MODULE_1
[“CordovaDocument”].ready();
return ionic_native_secure_storage__WEBPACK_IMPORTED_MODULE_3
[“SecureStorage”].create(this.KEYSTORE).then((store) => {
store.set(name, value);
})
.catch(() => {
this.setTemp(name, value);
});
});
}

Then I added cordova-plugin-secure-storage and now my application stops opening.
Is it secure to use the beta version of cordova storage?