Search
  • Clearly Innovative

Ionic Framework v6 VueJS And Firebase - Authentication Flow Using Pinia For State Management

Updated: Jan 2

Please contact us at info@clearlyinnovative.com for a 30-minute free consult to see how we can help you tech enable your business.


When working with an application, website, or mobile app at a certain point it becomes too complex to manage all of the information about your app by passing around properties or storing the information in the database just to use it again on the next page.


Too often integrating a state manager to manage that complexity for you seems out of reach, When taking a quick look at Vuex, I can see why; often there is confusion around when to use a mutation or an action? What is a commit? where did my payload go? What do I need to dispatch?


This and many other related issues or concerns are addressed with this new state manager for VueJS called Pinia


Pinia started as an experiment to redesign what a Store for Vue could look like with the Composition API around November 2019. Since then, the initial principles are still the same, but Pinia works for both Vue 2 and Vue 3 and doesn't require you to use the composition API.

The Video Covers

In the video, we have a source code walkthrough for a template for Vuejs authentication flow using firebase for authentication, latest Ionic Framework version 6, and Pinia for State Management.


We are also using the newest version of Firebase in this template, the APIs have changed a bit but the examples in the application try to make it easier


Details

  • How to manage the authentication flow with state management in Pinia

  • Keep the user state and profile information there.

  • Manage authentication guards in the vuejs router utilizing state variables.

  • Updating data in your application views as the data is refreshed in firebase. Using collection listeners and updating the Pinia State.





We are an Ionic Framework Trusted Partner, contact us at info@clearlyinnovatve.com for a free consultation regarding your web and mobile development needs.



26 views0 comments