Authorization (Firebase)

Air UI uses firebase package for default app authorization. You can easily replace authorization service to needed for changing aithorization method (eg. Auth0). In the app Firebase Auth registered as a plugin and available as an $auth object.

Injection

src/main.js
import FirebaseAuthService from './services/firebase'
...
Vue.use(FirebaseAuthService)

Firebase Plugin

src\services\firebase.js
...
const config = {
apiKey: ...,
authDomain: ...,
databaseURL: ...,
projectId: ...,
storageBucket: ...,
messagingSenderId: ...,
}
‚Äč
export default {
install: (Vue, options) => {
const firebaseApp = firebase.initializeApp(config)
const auth = firebaseApp.auth()
Vue.prototype.$auth = {
login: async (username, pass) => {
return auth.signInWithEmailAndPassword(username, pass)
},
logout: async () => {
router.push('/user/login')
await auth.signOut()
},
}
auth.onAuthStateChanged(user => {
store.commit('UPDATE_USER', { user })
})
},
}

Auth Method (Login Page)

src\components\system\Auth\Login\index.vue
methods: {
handleSubmit(e) {
e.preventDefault()
this.form.validateFields((err, values) => {
if (!err) {
this.$nprogress.start()
this.$auth.login(values.email, values.password)
.then(() => {
this.$nprogress.done()
this.$router.push('/')
this.$notification['success']({
message: 'Logged In',
description: 'You have successfully logged in to Air UI Vue Admin Template!',
})
})
.catch((error) => {
this.$nprogress.done()
this.$notification['warning']({
message: error.code,
description: error.message,
})
})
}
})
},
},