Custom Scheme for Google 2FA

[sts-ryan-holton]

I've come across #781 and #781, and the general theme is that dealing with Two-Factor Authentication can be completed using a custom scheme, and sadly those two issues were closed without much guidance in proceeding.

I too have just come across the challenge of integrating 2FA into my Nuxt app, and I've already written 90% of the server-side code required to generate the QR code, verify and am now at the stage where my API's controller (in Laravel) will return a JSON response, without a token if a user's account has 2FA enabled.

I now need to integrate this into my front-end code, and on the log in screen, make the first "log in" request, which will give me back a variable that I can use to then present a 2FA screen for the user, and then redirect them.

I've tried the example scheme, but this seems not to work:

config

auth: {
  redirect: {
    login: '/account/login',
    logout: '/account/login',
    callback: '/account/login',
    home: '/account/domains'
  },
  strategies: {
    local: {
      login: { url: 'auth/login', method: 'post', propertyName: 'token' },
      logout: { url: 'account/logout', method: 'post' },
      user: { url: 'auth/user', method: 'get', propertyName: 'user' }
    },
    customStrategy: {
      scheme: '~/schemes/customScheme.js',
      login: { url: 'auth/login', method: 'post', propertyName: 'token' },
      logout: { url: 'account/logout', method: 'post' },
      user: { url: 'auth/user', method: 'get', propertyName: 'user' }
    }
  }
}

custom scheme

import { LocalScheme } from '~auth/runtime'

export default class CustomScheme extends LocalScheme {
  // Override `fetchUser` method of `local` scheme
  async fetchUser (endpoint) {
    console.log('fetching...')
    // Token is required but not available
    if (!this.check().valid) {
      return
    }

    console.log('getting user...')
    // User endpoint is disabled.
    if (!this.options.endpoints.user) {
      this.$auth.setUser({})
      return
    }

    console.log('try to fetch then set...')
    // Try to fetch user and then set
    return this.$auth.requestWith(
      this.name,
      endpoint,
      this.options.endpoints.user
    ).then((response) => {
      const user = getProp(response.data, this.options.user.property)

      // Transform the user object
      const customUser = {
        ...user,
        fullName: user.firstName + ' ' + user.lastName,
        roles: ['user']
      }

      // Set the custom user
      // The `customUser` object will be accessible through `this.$auth.user`
      // Like `this.$auth.user.fullName` or `this.$auth.user.roles`
      this.$auth.setUser(customUser)

      return response
    }).catch((error) => {
      this.$auth.callOnError(error, { method: 'fetchUser' })
    })
  }
}

So, I'm not seeing any of my console.logs when I try to log in, so what's wrong here?

[rowanarts]

Any updates on this? Running into the same problem...