@service-paradis/vue-firebase-auth

Vue Authentication with Firebase.

Usage no npm install needed!

<script type="module">
  import serviceParadisVueFirebaseAuth from 'https://cdn.skypack.dev/@service-paradis/vue-firebase-auth';
</script>

README

Vue Firebase Auth

A simple light-weight authentication library for Vue.

Installation

npm install @service-paradis/vue-firebase-auth

Usage

Basic Configuration

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>',
    }
})

Using Options

Available option (all optional)

authRedirect: '/login'
  • Redirect to use if authentication is required on a route. // TODO other options

Usage

const router = new VueRouter();
Vue.use(FirebaseAuth, {
    project: {
        // ...
    },
    options: {
        authRedirect: '/auth/login'
    }
})

// TODO other options

Using VueRouter

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.

Usage

const router = new VueRouter();
Vue.use(FirebaseAuth, {
    project: {
        // ...
    },
    router
})

Routing meta

auth: true
  • User must be authenticated.
auth: false
  • 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.
auth: undefined
  • Public, no checks required.
authRedirect: String

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

Available Methods

user

  • Returns the current user or null if there is not.

Usage

<div>
    {{ $firebaseAuth.user().displayName }}
</div>

check

  • 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>

register

  • Will register user using Firebase Authentication with email and password.
  • Required parameters: email and password
  • 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
    });

login

  • Will login user using Firebase Authentication with email and password.
  • Required parameters: email and password
  • 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
    });

logout

  • 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
    });

WIP (Coming soon)

  • 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)