React Native authentication with xState v5

TL;DR

If you just want to see the code, it is is the PR with the latest changes that are discussed in the post.

Background

This topic wasn’t my original plan for continuing the series. However, to keep the example aligned with a real-world application, I felt it was necessary to improve the authentication mechanism in terms of usability and persistence.

Disclaimer

My experience with mobile authentication is primarily focused on Firebase. To ensure consistency with its API, I’ve added a few methods to our example that mimic the lifecycle of a user session:

• 
  onAuthStateChanged - An observer that accepts a function. When a user logs in, their object is returned to the callback.


• 
  getCurrentUser - A synchronous method that returns the user object if there’s an active session; otherwise, it returns null.


• 
  signInWithPhone - This method accepts a phone number as an argument and initiates a user session on the backend.


• 
  signOut - Pretty self-explanatory. Ends the user session.

You can find their naive implementation in the api.ts file.

To ensure the data persistency, I've used

Conclusion

As mentioned in previous posts, I enjoy using callback actors with Firebase/Firestore. With XState 5, actor reusability has become even more straightforward.

I’ve planned a few more posts for the coming months, but feel free to reach out if there’s something specific you’d like me to cover.