MYCURE Vue Auth module

TODO: Login flow

Installation and Usage

$ yarn add @mycure/vu-auth

• use as a vue plugin

import Vue from 'vue';
import McAuth from '@mycure/vu-auth';
import { router } from './router';
import { store } from './store';

const firebaseApp = firebase.initializeApp(config);

const opts: PluginConfig = {
  store,
  router,
  firebaseApp,
  credentialChecklist: {
    emr: true
  }
};

Vue.use(McAuth, opts)

• above will do the ff:
  • add a Vue.$mcAuth and Vue.prototyp.$mcAuth which is an AuthService
  • sync currentUser$: firebase.User | null and status$: AuthStatus to a namespaced ('auth') store module
  • add global routeGuard that reacts to routes with the meta requiresAuth: bool
  • add global routeGuard that reacts to routes with the meta rerouteOnAuth: string, rerouteOnUnAuth: string
  • add global component mc-auth-status

Plugin config and CredentialChecklist

interface ChecklistConfigOnFail implements Function {
  (user: User, authService: AuthService) => void
}

interface ChecklistRouterConfigOnFail implements ChecklistConfigOnFail {
  (user: User, authService: AuthService, next: function) => void
}

interface ChecklistConfig {
  match?: function | any
  cache?: any = true
  onFail?: function
}

interface PluginConfig {
  store: VuexStore
  router: VueRouter
  firebaseApp: firebase.App
  logoutURL?: string
  authURL?: string = '/login'
  credentialChecklist: {
    (key: CredentialCheclistItem): 'cache' | any* | ChecklistConfig
  }
}

enum CredentialCheclistItem {
  emr           // emr acccess
  email         // emailVerified
  firstLogin    // firstLogin
  cms           // cms access
  account       // my-account access
  secretary     // secretary access
  subscription  // user subscription
}

// any* - if checklist config is a primitive value, except the string 'cache', it will be the value for match

// if credentialChecklist key only has a the string 'cache' as value, it will only be cached

// * if logoutURL and authURL are relative paths, they will be
//  navigated to using the app's router

on ROUTER

// on router.js

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

export default new VueRouter({
  routes: [
    {
      path: '/protected',
      component: import('../components/Foo.vue'),
      meta: {
        requiresAuth: true
      }
    }
  ]
})

/**
 * guards watches the ff meta
 *
 * - requiresAuth: boolean // just checks authentication
 * - all valid credentialChecklistItem
 * - rerouteOnAuth: path
 * - rerouteOnUnAuth: path
 *
 * * type `path` extends string - can be relative paths, wher they will be
 *  navigated to using the app's router or external paths (redirects)
 */

import { mapState, mapActions } from 'vuex';
// on a component
export default {
  template: `
    <div>
      {{ status }}
      {{ currentUser && currentUser.email }}
      <button @click="signInWithEmailAndPassword({ email: '[email protected]', password: 'somepass' })"> login </login>
    </div>
  `,
  computed: {
    ...mapState('auth', ['currentUser', 'status'])
  },
  methods: {
    ...mapActions('auth', [
      'signInWithEmailAndPassword',
      'signInWithCUstomToken',
      'signOut'
    ])
  }
}

Classes

AuthConfig

interface CredentialChecker extends Function {
  (user: firebase.User, authConfig: AuthCOnfig): Promise<User | null> | User | null
}

interface CredentialChecklist {
  emr: boolean
}

interface AuthConfig {
  credentialChecklist?: CredentialChecklist;  // using a checklist, creates a checker
  credentialChecker: CredentialChecker;       // checker to invoke after user has successfully logged in, this is where access is checked
}

AuthService

enum AuthStatus {
  STATUS_CHECKING_CREDENTIALS,
  STATUS_RETRIEVING_CACHED_CREDENTIALS,
  STATUS_SIGNING_IN,
  STATUS_SIGNING_OUT
}

class AuthService {
  constructor (
    firebaseApp: firebase.App,
    authConfig: AuthConfig
  ): AuthService;
  currentUser$: Observable<firebase.User | null>;
  status$: Observable<AuthStatus>;
  signInWithEmailAndPassword (email: string, password: string): Promise;
  signInWithCustomToken (token: string): Promise;
  signOut (): Promise;
}