Overview
Showing authentication flow using composition api and Firebase using the new Ionic Framework Web Components for Vue 3
I am using the latest beta release of the Ionic Integration with Vuejs Beta 3. I am using typescript in the example and relying heavily on the new pattern of Composition API when creating single file components.
Whats Covered In The Video
00:00 - Intro
00:11 - walkthrough the base code
02:15 - create the useFirebaseAuth hook
04:20 - auth check to check for user at startup
05:44 - define state for the hook
08:26 - calling authCheck in main.ts
10:20 - seeing if authCheck works
11:00 - add router code to check for user
11:44 - implementing beforeEach
13:30 - explaining logic in beforeEach
14:50 - Adding types to state object to remove eslint errors
15:50 - set the default path
16:26 - making sure the state information is not reset which each instance
17:40 - implementing logout
20:54 - implementing login
22:00 - v-model not working properly in this release, workaround used
22:53 - call login function from hook
Source Code
ionic-vue3-myapp-login-demo
- Newletter: Sign Up Here
- Video: Using Vue 3 Beta with Ionic, Authentication Flow Using Composition API and Firebase
- Video Series: Vue 3 Ionic Videos
RELATED VIDEOS
- PART ONE, Capacitor Camera & Geolocations
- PART TWO, Firebase Integration
- PART THREE, Firebase Integration, Authentication
Showing authentication flow using composition api and firebase using the new ionic framework web components for vue 3
I am using the latest beta release of the Ionic integration with Vuejs. I am using typescript in the example and relying heavily on the new pattern of composition when creating single file components.
Top comments (0)