**Brainstorm** The best way to implement offline authentication and persistent data storage in Cordova app

Hello!

Scenario: We need to create web/mobile app, where user can log-in and subscribe to upcoming events. The cordova app must be usable in off-line as well as online, so for instance, if a person logs in, and person has 50 upcoming events in db, from whom he has fetched 20 upcoming events, even if he closes the app, and switches any kind of network, he still must be able to log-in and see the events, he has fetched previously.

The problem: How to implement the scenario in secure manner?

My idea: As far as data goes, we can store everything in the local storage - every time user event subscription is triggered in client side, before returning the data inside useTracker, we can localStorage.setItem(…) . Documents inside the event collection would have _id, name, date, userId. If device is online, we can show upcomming events from miniMongo, but when it goes offline, we can show them from localStorage.getItem(…) or a prop (see 2nd code snippet).

Authentication gets trickier. Because the App.jsx primarily would be something like:

export const App = () => {
 const user = useTracker(() => Meteor.user());

 const appContent = (() => {
   if (user) {
     return <LoggedInLayout />
   }
   return <LoggedOutLayout />
 })()

 return appContent;
};

,where LoggedInLayout would hold the upcomming events, and LoggedOutLayout would have LoginForm, it would work fine for web page, but not for native app, because Meteor.user() would only return user info from the token, after server responds to client, but in offline server connection is not possible. What we still do have access to is Meteor.userId(), so my proposed solution would be something like this:

export const App = () => {
 const user = useTracker(() => Meteor.user());

 const appContent = (() => {
   if (user) {
     return <LoggedInLayout />
   }
   if (Meteor.isCordova && !navigator.onLine && Meteor.userId()) {
     return <LoggedInLayout offlineData={JSON.parse(localStorage.getItem(...))}/>
   }
   return <LoggedOutLayout />
 })()

 return appContent;
};

So offline would behave as follows: We would skip 1st condition, because server would not answer with user details, and we would enter inside the 2nd condition, passing offlineData to the element as prop. In the event, if user presses logOut button, we just clear the local storage from backed up data and tokens, so the user would be “directed” to login form (because now client would enter in 3rd condition), where he would be informed, that he needs internet connection to authenticate.

I welcome any constructive criticism and I would really appreciate a 2nd opinion on the possible approach I am presenting! Thanks! :slight_smile:

1 Like

This recent conversation might help you a bit: Data in local storage (persist-collection package)
My personal opinion: don’t go reactive offline, use methods to push to a local state or a local DB that lives as long as the user is logged in offline. RealmDB is probably the best mobile DB to work with in this case.

@paulishca Thank you for the response! Realm is definitely something to keep and eye for in the future, but for the time being,they do not support Cordova.

Going trough the link you provided, Dexie.js caught my attention. Seems easy enough, so I will probably go with that. :slight_smile: