Implementing Offline Login in an Ionic App Using Keycloak for Online Authentication

Ionic Framework Ionic Angular
1

I’m developing a mobile application using Ionic and leveraging Keycloak for user authentication when the app is online. However, I want to implement an offline login feature that allows users to access the app even when they don’t have an internet connection.

Here’s the flow I have in mind:

When the user is online, they log in via Keycloak. During the online login, I securely store the credentials (or a token) locally, ideally using something like Secure Storage. If the user attempts to log in offline, I verify the locally stored credentials to authorize access.

Main Questions:

  • What is the best way to securely store authentication data locally in an Ionic app?
  • How can I implement the offline verification mechanism while minimizing security risks?
  • Is there a way to update the local token when the user changes their password in Keycloak?
  • How should credential verification work offline with the stored token?

Any advice, code examples, or helpful resources would be greatly appreciated. Thank you!

I’m asking about best practices and I will expect any useful advice

2

Is there a reason the user needs to log in every time they use the app? Most apps keep you logged in (with the exception of financial apps). You would basically store the API token in secure storage. If you need to have an extra layer of security for accessing the app, most apps either use a PIN or fingerprint (biometrics) to unlock the app for use. I would say storing the user’s password in your app is not good practice.

Ionic/Capacitor offers a paid secure storage option. A free option is capacitor-secure-storage.