Aaron K SaundersIn the previous video we setup and configured firebase emulator for Firebase Firestore, in this video tutorial, we'll show you how to integrate Firebase Authentication into a Vite, Vue, and Ionic Capacitor mobile app. You'll learn how to set up Firebase Authentication and the Firebase Authentication emulator to secure access to your app's collections. We'll also demonstrate how to use the router to create an application flow that requires users to sign in before accessing protected pages.
Specifically, you'll learn:
- How to add Firebase Authentication to a Vite, Vue, and Ionic Capacitor mobile app
- How to create basic Firebase rules to allow only authenticated users access to collections
- How to use the router to create an application flow that requires user authentication
- How to redirect users to the sign-in page when attempting to access protected pages without authentication
Whether you're new to mobile app development or experienced with Vue and Ionic Capacitor, this tutorial is perfect for anyone looking to add Firebase Authentication to their mobile app.
I have used Firebase in the past and it is awesome!! Using the emulator makes it easier to quickly iterate, test and reset your data all on your local machine.
This is just the next step in fully integrating Firebase, VueFire, and Pinia in upcoming videos in this series
The Firebase Local Emulator Suite can be installed and configured for different prototype and test environments, anything from one-off prototyping sessions to production-scale continuous integration workflows.
Ionic Capacitor is an open-source native runtime for building Web Native apps. Create cross-platform iOS, Android, and Progressive Web Apps with JavaScript, HTML, and CSS.
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts: A dev server that provides rich feature enhancements over native ES modules, for example extremely fast Hot Module Replacement (HMR), and a build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.
