@mightyminds/auth v1.0.0

Mightyminds Vue Auth module

Installation and Usage

$ yarn add @mightyminds/auth

• Sample usage

// you would usually use it like this:

// 1. on global config
firebaseApp = firebase.initializeApp(config);
Vue.use(MmAuth, {
  firebaseApp,
  store,
  router,
  checklist: {
    email: true // email should be verifier, else failed to login
  }
});

// 2. on routes definition
routes = [
  {
    path: '/foo',
    component: { template: '<h1> Welcome to Foo! </h1>' },
    meta: {
      requiresAuth: true
    }
  },
  {
    path: '/bar',
    component: { template: '<h1> Welcome to Bar! where we require verified email </h1>' },
    meta: {
      requiresAuth: true,
      email: true
    }
  }
];

// 3. when currentUser is needed somewhere in the app
import { mapState } from 'vuex';
export default {
  template: '<h1> The current user is {{ currentUser.email }} </h1>',
  computed: {
    ...mapState('auth', ['currentUser'])
  }
}

VuePlugin

import Vue from 'vue';
import MmAuth from '@mightyminds/auth';

Vue.use(MmAuth, opts: ServiceOpts);

• above will do the ff:
  • describe side effects here
  • sample side effects:
    • attach a global method/attribute Vue.mmAuth
    • attach an instance method/attribute vm.$mmAuth
    • sync a to the store

  interface FailHandlerParams {
    user: User
    service: AuthService
    next: (route) => void // available only in router, can be used to navigate as this will only proxy router.push
  }

  interface VerifierConfig {
    cache: boolean // if the last value of the verifier should be cached
    match: any | (val: any) => boolean // if fxn, matcher function to be used to determine if pass. else will be ==='d to the value
    onFail: (error: Error, params: FailHandlerParams) => boolean
  }

  interface Verifier {
    onAuthKey: string // key to use in checklist
    routeGuardKey: string // key to use in router
    failMessage: String // for logging
    verifier: (
      verifierConfig: boolean | string | VerifierConfig, // boolean | string values would be the value to `VerifierConfig.match`
      user: User,
      service: AuthService,
      sessionStore: SessionStore,
      from: 'root'|'route'
    ) => Promise<{
      formattedKey?: string, // mainly for logging, will be present only if the verifierFactory is used
      value: any,            // current value of the verifier
      failHandler: Function, // to be executed when failed (from verifierConfig)
      passed: boolean        // flag if verifier has passed
    }>
  }

  interface RouterOpts = {
    firebaseApp,
    logoutURL?: string = '/login',
    authURL: string = '/login'
    verifiers: Verifier [] = ServiceOpts.verifiers
  }

  interface StoreOpts {
    moduleName: string = 'auth'
  }

  interface ServiceOpts {
    // will be used to auto-generate query functions
    firebaseApp?: firebase.App
    verifiers: Verifier []
    // for registering router guards
    router: VueRouter
    routerOpts?: RouterOpts
    // for registering built-in store modules
    store: VuexStore
    storeOpts?: StoreOpts
    // and other valid SingleItemSyncService and MultiItemSyncService configs, see @topsi/services docus
  }

VuexStoreModule

vuexModuleName = 'auth'
interface RegeisteredVuexModuleActions {
  signInWithEmailAndPassword: (email: string, password: string) => void
  signInWithCustomToken: (token: string) => void  
  // and the extraActions
}

interface RegisteredVuexModule extends RegisteredAuthStoreModule { 
  // see @topsi/services docus for its RegisteredAuthStoreModule
  actions: RegeisteredVuexModuleActions
}