Firebase

Our templates uses firebase service for default app authorization.

Configuring

Replace firebase configuration with yours in src/services/firebase/index.js

src/services/firebase/index.js
const firebaseConfig = {
apiKey: '',
authDomain: '',
databaseURL: '',
projectId: '',
storageBucket: '',
messagingSenderId: '',
}

Authorization Methods

Check src/services/firebase/index.js file for next functions:

src/services/firebase/index.js
export async function login(email, password) { ... } // sign in procedure
export async function register(email, password, name) { ... } // sign up procedure
export async function currentAccount() { ... } // get current authorized user data
export async function logout() { ... } // logout user

For switching app to authorized state you should set authorized prop to true

src/redux/user/reducers.js
state: {
id: 'USER_ID',
name: 'USER_NAME',
role: 'USER_ROLE',
avatar: '',
authorized: true, // user is authorized
loading: false, // handles user fetching state, eg. set Sign In button to loading state
}

src/store/user/index.js file handles app authorization process. The app should get user data from firebase API and save user state to store.

src/store/user/index.js
import * as firebase from '@/services/firebase'
‚Äč
actions: {
LOGIN({...}, { payload }) {
const { email, password } = payload
firebase.login(email, password).then(success => {...}
},
REGISTER({...}, { payload }) {
const { email, password, name } = payload
firebase.register(email, password, name).then(success => {...}
},
LOAD_CURRENT_ACCOUNT({...}) {
firebase.currentAccount().then(success => {...}
},
LOGOUT({...}) {
firebase.logout().then(success => {...}
},
}

On first app load App.vue triggers user/LOAD_CURRENT_ACCOUNT for checking user state:

mounted() {
this.$store.dispatch('user/LOAD_CURRENT_ACCOUNT')
}

Dispatching Auth Methods

src/components/{templateName}/system/Auth/Login/index.vue
methods: {
handleSubmit(e) {
e.preventDefault()
this.form.validateFields((err, values) => {
if (!err) {
this.$store.dispatch('user/LOGIN', { payload: values })
}
})
},
}
src/components/{templateName}/system/Auth/Register/index.vue
methods: {
handleSubmit(e) {
e.preventDefault()
this.form.validateFields((err, values) => {
if (!err) {
this.$store.dispatch('user/REGISTER', { payload: values })
}
})
},
}
src/components/{templateName}/layout/Topbar/UserMenu/index.vue
methods: {
logout() {
this.$store.dispatch('user/LOGOUT')
},
},