[6.x] Two Factor Authentication

composer.json

@@ -11,6 +11,7 @@
     "require": {
         "ext-json": "*",
         "ajthinking/archetype": "^1.0.3 || ^2.0",
+        "bacon/bacon-qr-code": "^3.0",
         "composer/semver": "^3.4",
         "guzzlehttp/guzzle": "^6.3 || ^7.0",
         "james-heinrich/getid3": "^1.9.21",
@@ -23,6 +24,7 @@
         "michelf/php-smartypants": "^1.8.1",
         "nesbot/carbon": "^3.0",
         "pixelfear/composer-dist-plugin": "^0.1.4",
+        "pragmarx/google2fa": "^8.0",
         "rebing/graphql-laravel": "^9.8",
         "rhukster/dom-sanitizer": "^1.0.6",
         "spatie/blink": "^1.3",

config/users.php

@@ -167,6 +167,23 @@
         'redirect' => env('STATAMIC_IMPERSONATE_REDIRECT', null),
     ],
 
+    'two_factor' => [
+
+        /*
+        |--------------------------------------------------------------------------
+        | Required for...
+        |--------------------------------------------------------------------------
+        |
+        | Determines the roles required to have two factor authentication setup.
+        | You can require two-factor for all users by setting this to ['*'].
+        | You can also require two-factor for super users by adding 'super_users'.
+        |
+        */
+
+        'enforced_roles' => [],
+
+    ],
+
     /*
     |--------------------------------------------------------------------------
     | Default Sorting

resources/js/bootstrap/App.vue

@@ -3,6 +3,7 @@ import GlobalSearch from '../components/GlobalSearch.vue';
 import GlobalSiteSelector from '../components/GlobalSiteSelector.vue';
 import DarkModeToggle from '../components/DarkModeToggle.vue';
 import Login from '../components/login/Login.vue';
+import TwoFactorChallenge from '../components/login/TwoFactorChallenge.vue';
 import BaseEntryCreateForm from '../components/entries/BaseCreateForm.vue';
 import BaseTermCreateForm from '../components/terms/BaseCreateForm.vue';
 import CreateTermButton from '../components/terms/CreateTermButton.vue';
@@ -51,6 +52,7 @@ export default {
         GlobalSiteSelector,
         DarkModeToggle,
         Login,
+        TwoFactorChallenge,
         BaseEntryCreateForm,
         BaseTermCreateForm,
         CreateTermButton,

resources/js/bootstrap/fieldtypes.js

@@ -56,6 +56,8 @@ import TagsIndexFieldtype from '../components/fieldtypes/TagsIndexFieldtype.vue'
 import TemplateFolderFieldtype from '../components/fieldtypes/TemplateFolderFieldtype.vue';
 import ToggleFieldtype from '../components/fieldtypes/ToggleFieldtype.vue';
 import ToggleIndexFieldtype from '../components/fieldtypes/ToggleIndexFieldtype.vue';
+import TwoFactorFieldtype from '../components/fieldtypes/TwoFactorFieldtype.vue';
+import TwoFactorIndexFieldtype from '../components/fieldtypes/TwoFactorIndexFieldtype.vue';
 import WidthFieldtype from '../components/fieldtypes/WidthFieldtype.vue';
 import VideoFieldtype from '../components/fieldtypes/VideoFieldtype.vue';
 import SetPicker from '../components/fieldtypes/replicator/SetPicker.vue';
@@ -138,6 +140,8 @@ export default function registerFieldtypes(app) {
     );
     app.component('toggle-fieldtype', ToggleFieldtype);
     app.component('toggle-fieldtype-index', ToggleIndexFieldtype);
+    app.component('two_factor-fieldtype', TwoFactorFieldtype);
+    app.component('two_factor-fieldtype-index', TwoFactorIndexFieldtype);
     app.component('width-fieldtype', WidthFieldtype);
     app.component('video-fieldtype', VideoFieldtype);
     app.component(

resources/js/components/fieldtypes/TwoFactorFieldtype.vue

@@ -0,0 +1,103 @@
+<template>
+    <div>
+        <template v-if="isCurrentUser && !isSetup">
+            <div>
+                <p class="mb-4 text-sm text-gray">{{ __('statamic::messages.two_factor_enable_introduction') }}</p>
+
+                <div class="flex space-x-2">
+                    <button class="btn" @click="setupModalOpen = true">
+                        {{ __('Enable two factor authentication') }}
+                    </button>
+                </div>
+            </div>
+        </template>
+
+        <template v-else-if="!isCurrentUser && !isSetup">
+            <p class="text-sm text-gray">{{ __('statamic::messages.two_factor_not_setup') }}</p>
+        </template>
+
+        <template v-else>
+            <p class="mb-4 text-sm text-gray">{{ __('statamic::messages.two_factor_enabled') }}</p>
+
+            <div class="flex items-center space-x-4">
+                <button v-if="isCurrentUser" class="btn" @click="recoveryCodesModalOpen = true">
+                    {{ __('Show recovery codes') }}
+                </button>
+
+                <DisableTwoFactor
+                    :url="meta.routes.disable"
+                    :is-current-user="isCurrentUser"
+                    :is-enforced="isEnforced"
+                    @reset-complete="resetComplete"
+                    v-slot="{ confirm }"
+                >
+                    <button class="btn-danger" @click="confirm">{{ __('Disable two factor authentication') }}</button>
+                </DisableTwoFactor>
+            </div>
+        </template>
+
+        <TwoFactorSetup
+            v-if="setupModalOpen"
+            :setup-url="meta.routes.setup"
+            :recovery-code-urls="meta.routes.recovery_codes"
+            @close="setupModalOpen = false"
+            @setup-complete="setupComplete"
+        />
+
+        <TwoFactorRecoveryCodesModal
+            v-if="recoveryCodesModalOpen"
+            :recovery-codes-url="meta.routes.recovery_codes.show"
+            :generate-url="meta.routes.recovery_codes.generate"
+            :download-url="meta.routes.recovery_codes.download"
+            @close="recoveryCodesModalOpen = false"
+        />
+    </div>
+</template>
+
+<script>
+import Fieldtype from './Fieldtype.vue';
+import DisableTwoFactor from './two-factor/Disable.vue';
+import TwoFactorSetup from './two-factor/Setup.vue';
+import TwoFactorRecoveryCodesModal from './two-factor/RecoveryCodesModal.vue';
+
+export default {
+    mixins: [Fieldtype],
+
+    components: {
+        DisableTwoFactor,
+        TwoFactorSetup,
+        TwoFactorRecoveryCodesModal,
+    },
+
+    data() {
+        return {
+            isLocked: this.meta.is_locked,
+            isSetup: this.meta.is_setup,
+            recoveryCodesModalOpen: false,
+            setupModalOpen: false,
+        };
+    },
+
+    computed: {
+        isCurrentUser() {
+            return this.meta.is_current_user;
+        },
+
+        isEnforced() {
+            return this.meta.is_enforced;
+        },
+    },
+
+    methods: {
+        setupComplete() {
+            this.isSetup = true;
+            this.setupModalOpen = false;
+        },
+
+        resetComplete() {
+            this.isSetup = false;
+            this.isLocked = false;
+        },
+    },
+};
+</script>

resources/js/components/fieldtypes/TwoFactorIndexFieldtype.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="flex items-center space-x-2">
+        <template v-if="value.setup">
+            <svg-icon name="light/check" class="w-3 text-green-600" />
+            <div>{{ __('Set up') }}</div>
+        </template>
+
+        <template v-else>
+            <svg-icon name="light/close" class="w-3 text-gray-500" />
+            <div>{{ __('Not set up') }}</div>
+        </template>
+    </div>
+</template>
+
+<script>
+import IndexFieldtype from './IndexFieldtype.vue';
+
+export default {
+    mixins: [IndexFieldtype],
+};
+</script>

resources/js/components/fieldtypes/two-factor/Disable.vue

@@ -0,0 +1,82 @@
+<template>
+    <div>
+        <slot :confirm="confirm" />
+
+        <confirmation-modal
+            v-if="confirming"
+            :title="__('Are you sure?')"
+            :danger="true"
+            @confirm="disable"
+            @cancel="confirming = false"
+        >
+            <p class="mb-2" v-html="__('statamic::messages.disable_two_factor_authentication')"></p>
+
+            <p
+                v-if="isCurrentUser && isEnforced"
+                v-html="__('statamic::messages.disable_two_factor_authentication_current_user_enforced')"
+            ></p>
+            <p
+                v-if="isCurrentUser && !isEnforced"
+                v-html="__('statamic::messages.disable_two_factor_authentication_current_user_optional')"
+            ></p>
+            <p
+                v-if="!isCurrentUser && isEnforced"
+                v-html="__('statamic::messages.disable_two_factor_authentication_other_user_enforced')"
+            ></p>
+            <p
+                v-if="!isCurrentUser && !isEnforced"
+                v-html="__('statamic::messages.disable_two_factor_authentication_other_user_optional')"
+            ></p>
+        </confirmation-modal>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        url: String,
+        isCurrentUser: Boolean,
+        isEnforced: Boolean,
+    },
+
+    data() {
+        return {
+            loading: false,
+            confirming: false,
+        };
+    },
+
+    watch: {
+        loading(loading) {
+            this.$progress.loading(loading);
+        },
+    },
+
+    methods: {
+        confirm() {
+            this.confirming = true;
+        },
+
+        disable() {
+            this.loading = true;
+
+            this.$axios
+                .delete(this.url)
+                .then((response) => {
+                    this.$toast.success(__('Disabled two factor authentication'));
+
+                    this.$emit('reset-complete');
+
+                    if (response.data.redirect) {
+                        window.location = response.data.redirect;
+                    }
+                })
+                .catch((error) => this.$toast.error(error.message))
+                .finally(() => {
+                    this.loading = false;
+                    this.confirming = false;
+                });
+        },
+    },
+};
+</script>