auth #

Initializes Firebase Authentication and makes it available via $fire.auth and $fireModule.auth.

• Type: Boolean or Object
• Default: false

auth: {
  persistence: 'local', // default
  initialize: {
    onAuthStateChangedMutation: 'ON_AUTH_STATE_CHANGED_MUTATION',
    onAuthStateChangedAction: 'onAuthStateChangedAction',
    subscribeManually: false
  },
  ssr: false, // default
  emulatorPort: 9099,
  emulatorHost: 'http://localhost',
}

persistence #

Set firebase auth persistence, see here.

initialize #

This sets up an onAuthStateChanged() and/or onIdTokenChanged() listener and hooks them up to the vuex store.

Just add a mutation/action to your vuex store (as seen below) that handles what to do with the authUser object (e.g. save it to the state or get user data from FireStore) and then define the name of the action/mutation in the firebase.services.auth.initialize configuration as above.

When onAuthStateChanged() or onIdTokenChanged() get triggered by Firebase, the defined mutation/action will be called with the authUser and claims attributes as as seen below

To unsubscribe from both listeners simply call the $fireAuthStore.unsubscribe() function.

onAuthStateChangedMutation #

ON_AUTH_STATE_CHANGED_MUTATION: (state, {authUser, claims}) => {
  if (!authUser) {
    // claims = null
    // perform logout operations
  } else {
    // Do something with the authUser and the claims object...
  }
}

export const mutations = {
  ON_AUTH_STATE_CHANGED_MUTATION: (state, {authUser, claims}) => {
    // Don't do this:
    state.user = authUser

    // Do this:
    const {uid, email, emailVerified} = authUser
    state.user = {uid, email, emailVerified}
  },
}

onAuthStateChangedAction #

onAuthStateChangedAction: (ctx, {authUser, claims}) => {
  if (!authUser) {
    // claims = null
    // Perform logout operations
  } else {
    // Do something with the authUser and the claims object...
  }
}

onIdTokenChangedAction #

Same as onAuthStateChangedAction, but also gets triggered when the idToken changes (e.g. expires).

onIdTokenChangedMutation #

Same as onAuthStateChangedMutation, but also gets triggered when the idToken changes (e.g. expires).

subscribeManually #

By settings subscribeManually: true, the onAuthStateChanged() listener won't be set up until you call it manually:

// e.g. in a seperate Plugin
this.$fireAuthStore.subscribe()

This is needed in case you need to start other plugins after Firebase is initialized but before onAuthStateChanged() is set up.

ssr #

This sets up SSR ready functionality with minimal effort.

If ssr = true, the module generates a service worker that refreshes the Firebase Auth idToken and sends it with each request to the server if the user is logged in, as described here.

The option further adds a plugin that checks on server side if the token is valid and then injects a simplified admin.auth.UserRecord into the context variable res.locals.user.

The simplified user record contains the following properties:

• uid: The users uid
• email: The users email
• emailVerified: If the email was verified
• displayName: The users display name
• allClaims: All claims from the admin.auth.DecodedIdToken

The injected user can be used by context aware life cycle hooks on the server side (e.g. the store action nuxtServerInit).

A tutorial on how to set this up can be found here.

ignorePaths #

The service worker session automatically ignores external resources, static files and HMR calls. If you need to ignore additional routes, define them here.

auth: {
  ssr: {
    ignorePaths: [
      '/admin', // path is ignored if url.pathname.startsWith('/admin')
      /^api/, // path is ignored if url.pathname without the leading slash (/) matches the RegExp
    ]
  }
}

credential #

Enables Firebase admin authorization.

auth: {
  ssr: {
    // retrieved credentials from GOOGLE_APPLICATION_CREDENTIALS env variable
    credential: true

    // provide the path to the service account file
    // CAREFUL - don't deploy to publicly accessible location!
    credential: '/absolute/path/to/serviceAccount.json'

    // nuxt aliases are supported
    credential: '~/assets/serviceAccount.json'
  }
}

If you want additional information on the user the module can inject a full admin.auth.UserRecord into the ctx.res.locals.user property.

The allClaims property is set in addition to the default user record properties.

To enable this you can authorize the firebase admin by generating a service account key and link to it with this configuration.

serverLogin #

Enables server side Firebase client SDK login.

auth: {
  ssr: {
    // Set 'credential' as described above.

    serverLogin: true
    // or
    serverLogin: {
      // Takes a duration in milliseconds
      sessionLifetime: 0 // default (session is kept only for the duration of the request)
      // Takes a duration in milliseconds
      loginDelay: 50 // default (20 queries per second = minimum recommended delay)
    }
  }
}

Once you have properly setup the admin sdk via the credential option you can enable server side login to use firebase services on the server, e.g. to perform store hydration on page load.

Simply set auth.ssr.serverLogin = true.

The module creates a separate firebase app/session for every authenticated user to avoid authorization context leakage.

You can configure the session lifetime with auth.ssr.serverLogin.sessionLifetime

emulatorPort: process.env.NODE_ENV === 'development' ? 9099 : undefined

emulatorHost #

• Type: String
• Default: http://localhost,

Changes the host used for the Authentication emulator. Only applies if the emulatorPort is set.

disableEmulatorWarnings #

• Type: Boolean
• Default: false

Disables the auth emulators warning messages, see here.

Example of SignIn with a provider Google #

try {
  const provider = new this.$fireModule.auth.GoogleAuthProvider()
  const user = await this.$fire.auth.signInWithPopup(provider)
  console.log(user) // here you can do what you want with the user data
  this.$router.push('/') // that return from firebase
} catch (e) {
  // handle the error
}

The same code with work with facebook as well just change it to FacebookAuthProvider Full example is here.