[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

@@ -180,6 +180,19 @@
 
     'elevated_session_duration' => 15,
 
+    /*
+    |--------------------------------------------------------------------------
+    | Enforce Two-Factor Authentication
+    |--------------------------------------------------------------------------
+    |
+    | Specify which user roles should be required to enable two-factor
+    | authentication. Use "*" to enforce 2FA for all users, or "super_users"
+    | to enforce it for super users.
+    |
+    */
+
+    'two_factor_enforced_roles' => [],
+
     /*
     |--------------------------------------------------------------------------
     | Default Sorting

resources/js/bootstrap/App.vue

@@ -3,6 +3,8 @@ 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 EnableTwoFactorAuthentication from '../components/login/EnableTwoFactorAuthentication.vue';
 import BaseEntryCreateForm from '../components/entries/BaseCreateForm.vue';
 import BaseTermCreateForm from '../components/terms/BaseCreateForm.vue';
 import CreateTermButton from '../components/terms/CreateTermButton.vue';
@@ -51,6 +53,8 @@ export default {
         GlobalSiteSelector,
         DarkModeToggle,
         Login,
+        TwoFactorChallenge,
+        EnableTwoFactorAuthentication,
         BaseEntryCreateForm,
         BaseTermCreateForm,
         CreateTermButton,

resources/js/bootstrap/statamic.js

@@ -99,6 +99,10 @@ export default {
         return this.$app.config.globalProperties.$date;
     },
 
+    get $progress() {
+        return this.$app.config.globalProperties.$progress;
+    },
+
     get darkMode() {
         return darkMode;
     },

resources/js/components/SessionExpiry.vue

@@ -40,6 +40,84 @@
                 </div>
             </div>
         </modal>
+
+        <modal name="session-timeout-login" v-if="isShowingTwoFactorChallenge" height="auto" :width="500">
+            <div class="-max-h-screen-px">
+                <div
+                    class="flex items-center justify-between rounded-t-lg border-b bg-gray-200 px-5 py-3 text-lg font-semibold dark:border-dark-900 dark:bg-dark-550"
+                >
+                    {{ __('Resume Your Session') }}
+                </div>
+
+                <div class="publish-fields p-2">
+                    <div v-if="twoFactorMode === 'code'" class="form-group w-full">
+                        <label v-text="__('messages.session_expiry_enter_two_factor_code')" />
+                        <small class="help-block text-red-500" v-if="errors.code" v-text="errors.code[0]" />
+                        <div class="flex items-center">
+                            <input
+                                type="text"
+                                name="code"
+                                v-model="twoFactorCode"
+                                ref="twoFactorCode"
+                                class="input-text"
+                                tabindex="1"
+                                pattern="[0-9]*"
+                                maxlength="6"
+                                inputmode="numeric"
+                                autofocus
+                                autocomplete="one-time-code"
+                                @keydown.enter.prevent="submitTwoFactorChallenge"
+                            />
+                        </div>
+                    </div>
+
+                    <div v-if="twoFactorMode === 'recovery_code'" class="form-group w-full">
+                        <label v-text="__('messages.session_expiry_enter_two_factor_recovery_code')" />
+                        <small
+                            class="help-block text-red-500"
+                            v-if="errors.recovery_code"
+                            v-text="errors.recovery_code[0]"
+                        />
+                        <div class="flex items-center">
+                            <input
+                                type="text"
+                                name="recovery_code"
+                                v-model="twoFactorRecoveryCode"
+                                ref="twoFactorRecoveryCode"
+                                class="input-text"
+                                tabindex="1"
+                                maxlength="21"
+                                autofocus
+                                autocomplete="off"
+                                @keydown.enter.prevent="submitTwoFactorChallenge"
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                <div
+                    class="flex items-center justify-end border-t bg-gray-200 p-4 text-sm dark:border-dark-900 dark:bg-dark-550"
+                >
+                    <button
+                        v-if="twoFactorMode === 'code'"
+                        class="text-gray hover:text-gray-900 dark:text-dark-150 dark:hover:text-dark-100"
+                        @click="twoFactorMode = 'recovery_code'"
+                        v-text="__('Use recovery code')"
+                    />
+                    <button
+                        v-if="twoFactorMode === 'recovery_code'"
+                        class="text-gray hover:text-gray-900 dark:text-dark-150 dark:hover:text-dark-100"
+                        @click="twoFactorMode = 'code'"
+                        v-text="__('Use one-time code')"
+                    />
+                    <button
+                        class="btn-primary ltr:ml-4 rtl:mr-4"
+                        @click="submitTwoFactorChallenge"
+                        v-text="__('Continue')"
+                    />
+                </div>
+            </div>
+        </modal>
     </div>
 </template>
 
@@ -58,10 +136,14 @@ export default {
     data() {
         return {
             isShowingLogin: false,
+            isShowingTwoFactorChallenge: false,
             count: this.lifetime, // The timer used in vue
             remaining: this.lifetime, // The actual time remaining as per server responses
             errors: {},
             password: null,
+            twoFactorCode: null,
+            twoFactorRecoveryCode: null,
+            twoFactorMode: 'code',
             pinging: false,
             lastCount: new Date(),
             isPageHidden: false,
@@ -92,7 +174,7 @@ export default {
 
     watch: {
         count(count) {
-            this.isShowingLogin = this.auth.enabled && this.remaining <= 0;
+            this.isShowingLogin = this.auth.enabled && !this.isShowingTwoFactorChallenge && this.remaining <= 0;
 
             // While we're in the warning period, we'll check every second so that any
             // activity in another tab is picked up and the count will get restarted.
@@ -175,9 +257,37 @@ export default {
                     this.errors = {};
                     this.password = null;
                     this.isShowingLogin = false;
-                    this.$toast.success(__('Logged in'));
-                    this.restartCountdown();
-                    this.updateCsrfToken();
+
+                    if (response.data.two_factor) {
+                        this.isShowingTwoFactorChallenge = true;
+                        return;
+                    }
+
+                    this.loginComplete();
+                })
+                .catch((e) => {
+                    if (e.response.status === 422) {
+                        this.errors = e.response.data.errors;
+                        this.$toast.error(e.response.data.message);
+                    } else {
+                        this.$toast.error(__('Something went wrong'));
+                    }
+                });
+        },
+
+        submitTwoFactorChallenge() {
+            this.$axios
+                .post(cp_url('auth/two-factor-challenge'), {
+                    code: this.twoFactorCode,
+                    recovery_code: this.twoFactorRecoveryCode,
+                })
+                .then((response) => {
+                    this.errors = {};
+                    this.twoFactorCode = null;
+                    this.twoFactorRecoveryCode = null;
+                    this.twoFactorMode = 'code';
+                    this.isShowingTwoFactorChallenge = false;
+                    this.loginComplete();
                 })
                 .catch((e) => {
                     if (e.response.status === 422) {
@@ -194,6 +304,12 @@ export default {
                 this.remaining = this.lifetime;
             });
         },
+
+        loginComplete() {
+            this.$toast.success(__('Logged in'));
+            this.restartCountdown();
+            this.updateCsrfToken();
+        },
     },
 };
 </script>

resources/js/components/login/EnableTwoFactorAuthentication.vue

@@ -0,0 +1,27 @@
+<script setup>
+import TwoFactorSetup from '@statamic/components/two-factor/Setup.vue';
+import { ref } from 'vue';
+
+const props = defineProps({
+    routes: Object,
+    redirect: String,
+});
+
+const setupModalOpen = ref(false);
+
+function setupComplete() {
+    window.location.href = props.redirect;
+}
+</script>
+
+<template>
+    <button type="button" class="btn-primary" @click="setupModalOpen = true">{{ __('Set up') }}</button>
+
+    <TwoFactorSetup
+        v-if="setupModalOpen"
+        :enable-url="routes.enable"
+        :recovery-code-urls="routes.recovery_codes"
+        @close="setupModalOpen = false"
+        @setup-complete="setupComplete"
+    />
+</template>

resources/js/components/login/Login.vue

@@ -1,5 +1,5 @@
 <template>
-    <slot v-bind="$props"></slot>
+    <slot v-bind="{ showEmailLogin, hasError, busy, setBusy }"></slot>
 </template>
 
 <script>
@@ -24,5 +24,11 @@ export default {
             this.$el.parentElement.parentElement.classList.add('animation-shake');
         }
     },
+
+    methods: {
+        setBusy(state = null) {
+            this.busy = state ?? true;
+        },
+    },
 };
 </script>

resources/js/components/login/TwoFactorChallenge.vue

@@ -0,0 +1,107 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+
+const props = defineProps({
+    initialMode: {
+        type: String,
+        default: 'code',
+    },
+    errors: {
+        type: Object,
+    },
+    formAction: {
+        type: String,
+    },
+    csrfToken: {
+        type: String,
+    },
+    redirect: {
+        type: String,
+    },
+});
+
+const formEl = ref(null);
+const busy = ref(false);
+const mode = ref(props.initialMode);
+
+onMounted(() => {
+    if (hasErrors()) {
+        formEl.value.parentElement.parentElement.classList.add('animation-shake');
+    }
+});
+
+function hasErrors() {
+    return Object.keys(props.errors).length > 0;
+}
+
+function hasError(field) {
+    return !!props.errors[field];
+}
+
+function errorFor(field) {
+    return props.errors[field][0];
+}
+</script>
+
+<template>
+    <form ref="formEl" method="POST" :action="formAction" class="email-login select-none" @submit="busy = true">
+        <input type="hidden" name="_token" :value="csrfToken" />
+        <input v-if="redirect" type="hidden" name="redirect" :value="redirect" />
+
+        <h1 class="mb-2 text-lg text-gray-800 dark:text-dark-175">
+            {{ __('Two Factor Authentication') }}
+        </h1>
+        <p v-if="mode === 'code'" class="mb-4 text-sm text-gray dark:text-dark-175">
+            {{ __('statamic::messages.two_factor_challenge_code_instructions') }}
+        </p>
+        <p v-if="mode === 'recovery_code'" class="mb-4 text-sm text-gray dark:text-dark-175">
+            {{ __('statamic::messages.two_factor_recovery_code_instructions') }}
+        </p>
+
+        <div v-if="mode === 'code'" class="mb-8">
+            <label class="mb-2" for="input-code">{{ __('Code') }}</label>
+            <input
+                type="text"
+                class="input-text"
+                name="code"
+                pattern="[0-9]*"
+                maxlength="6"
+                inputmode="numeric"
+                autofocus
+                autocomplete="one-time-code"
+                id="input-code"
+            />
+            <div class="mt-2 text-xs text-red-500" v-if="hasError('code')" v-text="errorFor('code')" />
+        </div>
+
+        <div v-if="mode === 'recovery_code'" class="mb-8">
+            <label class="mb-2" for="input-recovery-code">{{ __('Recovery Code') }}</label>
+            <input
+                type="text"
+                class="input-text"
+                name="recovery_code"
+                maxlength="21"
+                autofocus
+                autocomplete="off"
+                id="input-recovery-code"
+            />
+            <div
+                class="mt-2 text-xs text-red-500"
+                v-if="hasError('recovery_code')"
+                v-text="errorFor('recovery_code')"
+            />
+        </div>
+
+        <div class="flex items-center justify-between">
+            <button v-if="mode === 'code'" class="text-btn text-xs" type="button" @click="mode = 'recovery_code'">
+                {{ __('Use recovery code') }}
+            </button>
+
+            <button v-if="mode === 'recovery_code'" class="text-btn text-xs" type="button" @click="mode = 'code'">
+                {{ __('Use one-time code') }}
+            </button>
+
+            <button type="submit" class="btn-primary" :disabled="busy">{{ __('Continue') }}</button>
+        </div>
+    </form>
+</template>