I can't get the 2fa auth panel appear

[V-Orbit]

Hi,
i followed installation and everything was ok. published assets, and put Spark::useTwoFactorAuth(); in SparkServiceProvider -> booted
but i can't manage to get the panel to appear in settings->security

but, if i open the code, the view pieces are all there

what i'm doing wrong? please help me as I'm pretty new to Spark...

[thomaswardiii]

Do you have any errors in the JavaScript console?

[thomaswardiii]

I personally see this:

app.js?id=ee7f881e2d6e6e448a0e:110601 [Vue warn]: Property or method "generating" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <SparkEnableTwoFactorAuth>
       <SparkSecurity>
         <SparkSettings>
           <Root>
warn @ app.js?id=ee7f881e2d6e6e448a0e:110601
app.js?id=ee7f881e2d6e6e448a0e:110601 [Vue warn]: Property or method "generate" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <SparkEnableTwoFactorAuth>
       <SparkSecurity>
         <SparkSettings>
           <Root>
warn @ app.js?id=ee7f881e2d6e6e448a0e:110601
app.js?id=ee7f881e2d6e6e448a0e:110601 [Vue warn]: Property or method "qrcode" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <SparkEnableTwoFactorAuth>
       <SparkSecurity>
         <SparkSettings>
           <Root>
warn @ app.js?id=ee7f881e2d6e6e448a0e:110601
app.js?id=ee7f881e2d6e6e448a0e:110601 [Vue warn]: Property or method "showSecret" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <SparkEnableTwoFactorAuth>
       <SparkSecurity>
         <SparkSettings>
           <Root>
warn @ app.js?id=ee7f881e2d6e6e448a0e:110601
app.js?id=ee7f881e2d6e6e448a0e:110601 [Vue warn]: Error in render: "TypeError: Cannot read property 'length' of undefined"

found in

---> <SparkEnableTwoFactorAuth>
       <SparkSecurity>
         <SparkSettings>
           <Root>
warn @ app.js?id=ee7f881e2d6e6e448a0e:110601
app.js?id=ee7f881e2d6e6e448a0e:111864 TypeError: Cannot read property 'length' of undefined
    at Proxy.render (eval at createFunction (app.js?id=ee7f881e2d6e6e448a0e:121595), <anonymous>:1:14089)
    at VueComponent.Vue._render (app.js?id=ee7f881e2d6e6e448a0e:113512)
    at VueComponent.updateComponent (app.js?id=ee7f881e2d6e6e448a0e:114028)
    at Watcher.get (app.js?id=ee7f881e2d6e6e448a0e:114439)
    at new Watcher (app.js?id=ee7f881e2d6e6e448a0e:114428)
    at mountComponent (app.js?id=ee7f881e2d6e6e448a0e:114035)
    at VueComponent.Vue.$mount (app.js?id=ee7f881e2d6e6e448a0e:119005)
    at VueComponent.Vue.$mount (app.js?id=ee7f881e2d6e6e448a0e:121890)
    at init (app.js?id=ee7f881e2d6e6e448a0e:113092)
    at createComponent (app.js?id=ee7f881e2d6e6e448a0e:115934)```

[thomaswardiii]

I see that the publish command is copying the .js file over to a directory that may not be part of what webpack imports. But even trying to add that directory or simply copying the code from the new file ontop of the existing file (the copied version or the one in the spark directory) doesn't seem to fix this. Hmm...

[thomaswardiii]

This is very odd because in my file, I see:

/***/ "./resources/js/spark-components/settings/security/enable-two-factor-auth.js":
/***/ (function(module, exports, __webpack_require__) {

var base = __webpack_require__("./resources/assets/js/spark/settings/security/enable-two-factor-auth.js");

Vue.component('spark-enable-two-factor-auth', {
    mixins: [base]
});

/***/ }),

as well as:

/***/ "./resources/assets/js/spark/settings/security/enable-two-factor-auth.js":
/***/ (function(module, exports) {

/* global Vue, SparkForm, $, axios, Bus */

Vue.component('spark-enable-two-factor-auth', {
    props: ['user'],

    data: function data() {
        return {
            qrcode: '',
            secret: '',
            generating: false,
            showSecret: false,
            form: new SparkForm({ code: '' })
        };
    },

    mounted: function mounted() {
        var _this = this;

        $(this.$refs.modal).on('hidden.bs.modal', function () {
            _this.form.code = '';
            _this.form.resetStatus();
        });
    },


    methods: {
        /**
         * Generate qr code.
         */
        generate: function generate() {
            var _this2 = this;

            this.generating = true;

            axios.post('/settings/two-factor-auth-generate').then(function (_ref) {
                var data = _ref.data;

                _this2.generating = false;
                _this2.showVerification(data);
            });
        },


        /**
         * Show the verification modal.
         *
         * @param {Object} { qrcode, secret }
         */
        showVerification: function showVerification(_ref2) {
            var qrcode = _ref2.qrcode,
                secret = _ref2.secret;

            this.qrcode = qrcode;
            this.secret = secret;

            $(this.$refs.modal).modal('show');
        },


        /**
         * Enable two factor authentication.
         */
        enable: function enable() {
            var _this3 = this;

            Spark.post('/settings/two-factor-auth-google', this.form).then(function (resetCode) {
                $(_this3.$refs.modal).modal('hide');

                _this3.$parent.$emit('receivedTwoFactorResetCode', resetCode);

                Bus.$emit('updateUser');
            });
        }
    }
});

/***/ }),

So the new code is in the javascript and is referenced by the Vue component definition for the mixin, so it should be picking up on those data properties, and I even ensured there's no duplicates or caching issues.

[thomaswardiii]

AHA!

In the new file, the first line should be module.exports = { and not Vue.component('spark-enable-two-factor-auth', { and the last line should end with }; and not })

[thomaswardiii]

There are also issues with the endpoint, but this at least gets the UI working

The endpoint suddenly started working. It may have been cached routes. But if you're using this in later versions of Spark, you'll need to ensure that the correct files (the ones copied when doing the publish command) are properly referenced, and that, as of the time of this writing, the vue component uses module.exports rather than try to re-define a component

[ondrejmirtes]

I have the same problem and changing the file resources/js/spark-components/settings/security/enable-two-factor-auth.js to this:

var base = require('settings/security/enable-two-factor-auth');

module.exports = {
    mixins: [base]
};

didn't help.

[Fabio101]

Incase this helps @ondrejmirtes , I had the same problem, on a fresh Spark 9 installed just today :(

For me to get this to work I had to do the following:

• Do as @thomaswardiii suggested in file: resources/assets/js/spark-components/settings/security/enable-two-factor-auth.js

AHA!

In the new file, the first line should be module.exports = { and not Vue.component('spark-enable-two-factor-auth', { and the last line should end with }; and not })

• Then, inside file: resources/js/spark-components/settings/security/enable-two-factor-auth.js Change require path to the following: var base = require('spark-components/settings/security/enable-two-factor-auth');

• Then, inside file: resources/js/app.js Include new require as follows: require('../assets/js/spark-components/settings/security/enable-two-factor-auth');

• Finally, inside file webpack.mix.js Include new path resolver as follows: path.resolve('resources/assets/js'),

Hope this works for you :)

[ondrejmirtes]

@Fabio101 These are the diffs of what I did: https://gist.github.com/ondrejmirtes/5cf9a457e4b080560cd1522600ace66b

And it still doesn't work:

[Fabio101]

Your first patch is patching the wrong file, it should be:

resources/assets/js/spark-components/settings/security/enable-two-factor-auth.js

and NOT:

resources/js/spark-components/settings/security/enable-two-factor-auth.js

[ondrejmirtes]

So the files that I currently have modified, are these:

• resources/assets/js/spark-components/settings/security/enable-two-factor-auth.js
• resources/js/app.js
• resources/js/spark-components/settings/security/enable-two-factor-auth.js
• webpack.mix.js

And it still doesn't work. I give up. This should be fixed in this package itself.

[ahmedash95]

Thanks a lot @Fabio101, your instructions helped a lot and I can confirm it worked