A simple light-weight authentication library for Vue.
npm install @service-paradis/vue-firebase-auth
import FirebaseAuth from '@service-paradis/vue-firebase-auth'
Vue.use(FirebaseAuth, {
project: {
apiKey: '<API_KEY>',
authDomain: '<PROJECT_ID>.firebaseapp.com',
databaseURL: 'https://<DATABASE_NAME>.firebaseio.com',
storageBucket: '<BUCKET>.appspot.com',
messagingSenderId: '<SENDER_ID>',
projectId: '<PROJECT_ID>',
}
})
- Redirect to use if authentication is required on a route. // TODO other options
const router = new VueRouter();
Vue.use(FirebaseAuth, {
project: {
// ...
},
options: {
authRedirect: '/auth/login'
}
})
// TODO other options
This plugin works with the vue-router
plugin. Setting an auth
meta field in the router mapping section will ensure authenticated access to that route.
const router = new VueRouter();
Vue.use(FirebaseAuth, {
project: {
// ...
},
router
})
- User must be authenticated.
- If the user is logged in, this route will be unavailable. Useful for login/register pages to be unaccessible once the user is logged in.
- Public, no checks required.
Each route can define it's own specific redirect. NOTE: If not set it will default to the global redirect options.
// TODO roles? Inspiration from https://raw.githubusercontent.com/websanova/vue-auth/master/docs/Privileges.md // TODO usage example
// TODO explain that $firebaseAuth will be available everywhere
- Returns the current user or null if there is not.
<div>
{{ $firebaseAuth.user().displayName }}
</div>
- Check to see if the user is logged in. // TODO roles as argument?
<router-link v-if="!$firebaseAuth.check()"
:to="'/login'">
login
</router-link>
<a v-if="$firebaseAuth.check()"
@:click="$firebaseAuth.logout()">
logout
</a>
- Will register user using Firebase Authentication with email and password.
- Required parameters:
email
andpassword
- Accepts
redirect
parameter which is passed directly to router when registration is successful. (default to '/') // TODO other types
const { email, password } = this;
this.$firebaseAuth.register({ email, password })
.then((user) => {
console.log('User created successfully:', user);
// You can create user related record in database here
}).catch((error) => {
console.error('Registration Failed:', error);
// Handle error here
});
- Will login user using Firebase Authentication with email and password.
- Required parameters:
email
andpassword
- Accepts
redirect
parameter which is passed directly to router when login is successful. (default to '/') // TODO other types
const { email, password } = this;
this.$firebaseAuth.login({ email, password })
.then((user) => {
console.log('User logged in successfully:', user);
// Some actions on login here
}).catch((error) => {
console.error('Login Failed:', error);
// Handle error here
});
- Will logout user using Firebase.
- Accepts
redirect
parameter which is passed directly to router when logout is successful. (default to authRedirect option)
this.$firebaseAuth.logout({ redirect = '/signed-out' })
.then(() => {
console.log('User logged out successfully.');
// Some actions on logout here
}).catch((error) => {
console.error('Logout Failed:', error);
// Should not happen, but handle potential error here
});
- Available Methods
- ready()?
- check() to improve with roles checking
- token()?
- fetch()?
- refresh()?
- Different types for register/login (Google, Facebook, etc.)
- router meta management for role?
- Axios Interceptors
- retrieve received new token when available on response
- insert token on every request
- Password reset management?
// TODO split documentation into separate section (files)