Nuxt auth with Firebase (provider redirect)

firebase.scheme.js

// Firebase auth scheme
// https://auth.nuxtjs.org/guide/scheme.html#schemes

import firebase from 'firebase/app'
import 'firebase/auth'

const DEFAULTS = {
  appName: undefined,
  token_type: 'Bearer',
  userinfo_endpoint: `https://identitytoolkit.googleapis.com/v1/accounts:lookup`,
  scope: [],
}

export default class FirebaseScheme {
  constructor(auth, options) {
    this.$auth = auth
    this.name = options._name

    this.options = Object.assign({}, DEFAULTS, options)
  }

  get _firebaseApp() {
    return firebase.app(this.options.appName)
  }

  get _firebaseAuth() {
    return firebase.auth(this.options.appName)
  }

  async mounted() {
    // Handle callbacks on page load
    const redirected = await this._handleCallback()

    if (!redirected) return this.$auth.fetchUserOnce()
  }

  login(provider) {
    for (const scope of this.options.scope) provider.addScope(scope)
    this._firebaseAuth.signInWithRedirect(provider)
  }

  async fetchUser() {
    // Token is required but not available
    const token = this.$auth.getToken(this.name)
    if (!token) return

    const key = this._firebaseApp.options.apiKey
    if (!key) return

    if (!this.options.userinfo_endpoint) return

    const { users } = await this.$auth.request({
      url: this.options.userinfo_endpoint,
      method: 'POST',
      params: { key },
      data: { idToken: token.split(' ')[1] },
    })

    const user = users[0]

    this.$auth.setUser({
      uid: user.localId,
      ...user,
    })
  }

  async _handleCallback() {
    // Handle callback only for specified route
    if (
      this.$auth.options.redirect &&
      this.$auth.ctx.route.path !== this.$auth.options.redirect.callback
    )
      return

    // Callback flow is not supported in server side
    if (process.server) return

    const { user, credential } = await firebase.auth().getRedirectResult()

    if (!user) return

    // idToken
    let token = await user.getIdToken()
    // refresh token
    let refreshToken = user.refreshToken

    if (!token) return

    // Append token_type
    if (this.options.token_type) token = this.options.token_type + ' ' + token

    // Store token
    this.$auth.setToken(this.name, token)

    // Store refresh token
    if (refreshToken) {
      if (this.options.token_type)
        refreshToken = this.options.token_type + ' ' + refreshToken
      this.$auth.setRefreshToken(this.name, refreshToken)
    }

    // Store provider credential
    if (credential) {
      this.$storage.setState('provider', credential.toJSON())
    }

    // Redirect to home
    this.$auth.redirect('home', true)

    return true // True means a redirect happened
  }
}

nuxt.config.js

export default {
  // Nuxt autth setup
  // https://auth.nuxtjs.org/guide/setup.html#setup
  
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth'
  ],
  
  auth: {
    // Options
    strategies: {
      // Firebase auth scheme
      firebase: {
        _scheme: 'PATH_TO_FIREBASE_SCHEME',
        scope: [
          'openid',
          'profile',
          'email',
          // ...
        ],
      },
    },
  },
}

Resources

Useful projects

Nuxt Auth Module
Nuxt-Fire
Vuefire

Firebase auth

How to Use Google APIs With Firebase Auth
Google Calendar API With Firebase
Google Calendar + Firebase Auth (YouTube)
Google API + Firebase Auth