Develop Reference

How to handle authentication flow in a React Web App?

I would like to discuss a paradigm that I am following for the authentication flow in a React Web App and need your advice / suggestions on the same.
The app has a button in the top right corner which is rendered
conditionally based on user’s auth status. If a user is signed in, the
button says Hi, first name on click of which the user can access
protected routes else it’s just a Login button.
Current flow:
Every time user access the app, a spinner displays before rendering the actual route till user’s auth status is being detected by Firebase’s onAuthChanged() which takes a few seconds.
Once onAuthChanged() conveys the auth status, app renders the route with the button in top right corner based on auth status.
Issue with the current flow:
Above mentioned flow doesn’t feel like a seemless experience for the user. Because every time user is accessing the app again or even refreshes its browser, it has to wait for that annoying spinner to go away. This is a pretty bad user experience.
Most of the app can be interacted irrespective of auth status, so it doesn't make sense to display a spinner across entire app even if it’s a public route just because auth status needs to be known in order to conditionally render that button. This flow makes the app completely unusable until the auth status is not detected by Firebase. Plus, as all the routes are lazy loaded, it adds up time for user to access app for first time with the 1st spinner being displayed as a fallback for lazy loading the route and the second one for the auth status.
Solution to current flow:
I have thought of a solution which can help me with above. What I am thinking now is to shimmer that button till the auth status is being detected by Firebase. And this seems like a pretty neat solution because now use can interact and browse the app while the button is being shimmered.
Drawbacks of the solution:
But this button is actually not alone in upper right corner and is accompanied by three other buttons as well which link to some other public routes.
So, it’ll make UI quite inconsistent by shimmering only that one button, so I’m thinking that I can shimmer all four of them. But this even might seem annoying to user that the entire app loads quickly on refresh, but the upper 4 buttons still shimmer for few seconds and it cannot access any of those to access other public routes.
Alternate solution:
There’s a third and last iteration to the solution, in which I’m thinking to cache the auth status as a boolean check in local storage whether it’s logged in or not along with it’s first name. Now, the app will be totally seemless on browser refresh and repetitive app access.
Caveats:
But, let’s suppose the user has changed his first name on other device and user accesses the app on this browser, the button will show it’s old name cached in the local storage. To sync the name, I’ll have to store the updated name from onAuthChanged() in local storage, update in redux from local storage and then display it on the button. Now, this will seem like a bug to user and might report as well because the old name will flash for a few seconds till the updated name doesn't come from the onAuthChanged()
CONCLUSION: I’d be like to know your views or if you have a better flow than these above. Thanks! :)

Your Alternate Solution is the best bet according to me.
Even if your user changes name on some other device, once the user logs in on web it will first fetch from localStorage and then due to onAuthChanged() it would give the user old name only for a few second and then display the new name.
Its not like user is going to change the name often, it will be only once in a while and few seconds to update the name once in a while would not be a big issue.

React Native display message at certain time when app is disabled

How is it possible to have React Native trigger some kind of message on the device at a certain time, even if the app is currently not selected or closed down altogether?

I would simply use a push notification. This is something you will need to setup server side but it sounds like you have a good use case. You will need to setup permissions etc for this.
Maybe also a good use case for local notifications take a look at React Native Docs

A small completion to #JamesWatling's answer. You'll need at least:
AppState (https://facebook.github.io/react-native/docs/appstate.html#content) to post the timestamp to server, when app is moved to background
Push Notifications (e.g. https://onesignal.com/ or for iOS: https://facebook.github.io/react-native/docs/pushnotificationios.html#content) to send a notification after certain amount of time

You might want to have a look at this part of the react native documentation and focus on local notifications. You don't need a server or anything to schedule a notification at a given time, a local notification is scheduled without a server interfering.
I do believe your app is going to need to have permissions for push notifications though (so the app is allowed to display a message on a homescreen for instance)

React Native JS doesn't execute while app is in background

I am trying to get push notifications working in a ios React Native app and am half way there. The one problem im having is that my logic for displaying a Notification while the app is in the background doesn't execute until the app becomes active again. I am using Socket.io and listening for events, but the code to handle (say onChat event) doesn't run until the app is active. I have verified that the socket is still connected.
The one things thats weird is that is works in the simulator but not on my device. Maybe there is performance optimizations that halt JS execution while the app is put in the background.
How can i get my JS to execute while the appstate is in the background?
What im doing is calling a function when the event is recieved over the socket and it runs:
PushNotificationIOS.presentLocalNotification({
alertBody: `New Chat: ${chat.message}`,
});

Thanks to this stack overflow question and answers I was able to find out that code is not executed in the background state to prepare it for the suspended state. The background mode is a transition state to prepare the app to be "screen shotted". The socket will stay connected only for a short time there after, but would eventually get terminated.
In the case with doing a push notifications, I would need to turn that over to Parse or some other service to push a notification to my app while the app is in the background.
Also see http://zeroheroblog.com/ios/what-to-do-when-your-iphone-app-moves-to-the-background

How to trigger some code when the user types on the app icon?

Remote Notifications are meant to be executed only if user clicks on one of them by default.
But when user clicks on the app icon, even with presence of the red "badge" incremented, notifications aren't taken into account, as evoked by the documentation:
If the application icon is tapped on a device running iOS, the
application calls the same method, but furnishes no information about
the notification.
Using Cordova/PhoneGap in the Javascript side (not with objective-C directly), is there a callback that I could set to trigger some codes (like a refresh of data) when the user clicks on the app's icon? I read the documentation but can't find a similar thing.
Otherwise I would present stale data to user ...

If You take a look the Launch option keys You will find a UIApplicationLaunchOptionsRemoteNotificationKey:
UIApplicationLaunchOptionsRemoteNotificationKey The presence of this
key indicates that a remote notification is available for the app to
process. The value of this key is an NSDictionary containing the
payload of the remote notification. See the description of
application:didReceiveRemoteNotification: for further information
about handling remote notifications. This key is also used to access
the same value in the userInfo dictionary of the notification named
UIApplicationDidFinishLaunchingNotification.

Dynamically updating page if user connects/disconnects from Facebook?

Is there a way to dynamically update a page when the user connects/disconnects the app from his facebook?
I.e using one of the event subscriber methods that come with the javascript SDK?
I'm trying authResponseChange however my callback function doesn't seem to get called if I delete the app from my facebook account.

Try to also register to the auth.statusChange event, though from my experience neither are really reliable.
You can know on the server side when a user deauthorizes your app, in the app settings > Advanced tab there's the field Deauthorize Callback where you can put a url in your server which will be pinged when a user removes the app.
With that you can then synchronize your client somehow.

You can manually check if a user is logged in, but hasn't authorized your app, using FB.getLoginStatus, passing a callback function in (see here in the Facebook JS SDK docs). Could you use the already existing events, and then perform checks of this kind each time? Maybe subscribe to the auth.authResponseChange and auth.statusChange events, and then call FB.getLoginStatus to see if it's changed.