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