[6.x] Passkeys 🔑 (#9239)

Co-authored-by: Rob de Kort <rob@studio1902.nl>
Co-authored-by: Jason Varga <jason@pixelfear.com>

Author: 3 people

composer.json

@@ -37,6 +37,7 @@
         "symfony/yaml": "^7.0.3",
         "ueberdosis/tiptap-php": "^2.0",
         "voku/portable-ascii": "^2.0.2",
+        "web-auth/webauthn-lib": "^5.2",
         "wilderborn/partyline": "^1.0"
     },
     "require-dev": {

config/users.php

@@ -134,6 +134,7 @@
         'roles' => false,
         'group_user' => 'group_user',
         'groups' => false,
+        'webauthn' => 'webauthn',
     ],
 
     /*

config/webauthn.php

@@ -0,0 +1,41 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Allow password logins to be used when user has a passkey
+    |--------------------------------------------------------------------------
+    |
+    | Whether or not the password field should be shown to users that
+    | have set up a passkey, or whether it should be hidden.
+    |
+    */
+
+    'allow_password_login_with_passkey' => true,
+
+    /*
+    |--------------------------------------------------------------------------
+    | Remember Me
+    |--------------------------------------------------------------------------
+    |
+    | Whether or not the "remember me" functionality should be used when
+    | authenticating using WebAuthn. When enabled, the user will remain
+    | logged in indefinitely, or until they manually log out.
+    |
+    */
+
+    'remember_me' => true,
+
+    /*
+    |--------------------------------------------------------------------------
+    | Model
+    |--------------------------------------------------------------------------
+    |
+    | When using eloquent passkeys you can specify the model you want to use
+    |
+    */
+
+    'model' => \Statamic\Auth\Eloquent\WebAuthnModel::class,
+
+];

package-lock.json

@@ -22,6 +22,7 @@
     "@inertiajs/vue3": "^2.1.11",
     "@internationalized/date": "^3.7.0",
     "@shopify/draggable": "^1.0.0-beta.12",
+    "@simplewebauthn/browser": "^13.2.2",
     "@tiptap/core": "^3.0.0",
     "@tiptap/extension-blockquote": "^3.0.0",
     "@tiptap/extension-bold": "^3.0.0",

package.json

@@ -18,6 +18,7 @@
                     </template>
                     <DropdownMenu>
                         <DropdownItem :text="__('Edit Blueprint')" icon="blueprint-edit" v-if="canEditBlueprint" :href="actions.editBlueprint" />
+                        <DropdownItem :text="__('Passkeys')" icon="key" :href="cp_url('passkeys')" />
                         <DropdownSeparator v-if="canEditBlueprint && itemActions.length" />
                         <DropdownItem
                             v-for="action in itemActions"

resources/js/components/users/PublishForm.vue

@@ -0,0 +1,56 @@
+import { ref } from 'vue';
+import { startAuthentication, browserSupportsWebAuthn } from '@simplewebauthn/browser';
+import axios from 'axios';
+
+export function usePasskey() {
+    const error = ref(null);
+    const waiting = ref(false);
+    const supported = browserSupportsWebAuthn();
+
+    async function authenticate(optionsUrl, verifyUrl, onSuccess) {
+        waiting.value = true;
+        error.value = null;
+
+        try {
+            const authOptionsResponse = await fetch(optionsUrl);
+            const authOptionsJson = await authOptionsResponse.json();
+
+            let startAuthResponse;
+            try {
+                startAuthResponse = await startAuthentication(authOptionsJson);
+            } catch (e) {
+                console.error(e);
+                error.value = __('Authentication failed.');
+                waiting.value = false;
+                return;
+            }
+
+            const response = await axios.post(verifyUrl, startAuthResponse);
+
+            if (onSuccess) {
+                onSuccess(response.data);
+            }
+        } catch (e) {
+            handleError(e);
+        } finally {
+            waiting.value = false;
+        }
+    }
+
+    function handleError(e) {
+        if (e.response) {
+            const { message } = e.response.data;
+            error.value = message;
+            return;
+        }
+
+        error.value = __('Something went wrong');
+    }
+
+    return {
+        error,
+        waiting,
+        supported,
+        authenticate,
+    };
+}

resources/js/composables/passkey.js

@@ -1,12 +1,23 @@
 <script setup>
 import Head from '@/pages/layout/Head.vue';
-import { AuthCard, Input, Field, Button, Description } from '@ui';
+import { AuthCard, Input, Field, Button, Description, ErrorMessage, Separator } from '@ui';
 import { computed } from 'vue';
-import { Form } from '@inertiajs/vue3';
+import { Form, router } from '@inertiajs/vue3';
+import { usePasskey } from '@/composables/passkey';
 
-const props = defineProps(['method', 'status', 'submitUrl', 'resendUrl']);
+const props = defineProps(['method', 'allowPasskey', 'status', 'submitUrl', 'resendUrl', 'passkeyOptionsUrl']);
 const isConfirmingPassword = computed(() => props.method === 'password_confirmation');
 const isUsingVerificationCode = computed(() => props.method === 'verification_code');
+const isOnlyUsingPasskey = computed(() => props.method === 'passkey');
+const passkey = usePasskey();
+
+async function confirmWithPasskey() {
+    await passkey.authenticate(
+        props.passkeyOptionsUrl,
+        props.submitUrl,
+        (response) => router.get(response.redirect)
+    );
+}
 </script>
 
 <template>
@@ -15,14 +26,12 @@ const isUsingVerificationCode = computed(() => props.method === 'verification_co
     <AuthCard
         icon="key"
         class="max-w-md mx-auto mt-8"
-        :title="isConfirmingPassword ? __('Confirm Your Password') : __('Verification Code')"
-        :description="isConfirmingPassword
-            ? __('statamic::messages.elevated_session_enter_password')
-            : __('statamic::messages.elevated_session_enter_verification_code')"
+        :title="__('Confirm Your Identity')"
+        :description="__('statamic::messages.elevated_session_reauthenticate')"
     >
         <Description v-if="status" variant="success" :text="status" class="mb-6" />
 
-        <Form method="post" :action="submitUrl" class="flex flex-col gap-6" v-slot="{ errors }">
+        <Form v-if="!isOnlyUsingPasskey" method="post" :action="submitUrl" class="flex flex-col gap-6" v-slot="{ errors }">
             <Field v-if="isConfirmingPassword" :label="__('Password')" :error="errors.password">
                 <Input name="password" type="password" viewable autofocus />
             </Field>
@@ -43,5 +52,20 @@ const isUsingVerificationCode = computed(() => props.method === 'verification_co
                 />
             </div>
         </Form>
+
+        <template v-if="allowPasskey">
+            <Separator v-if="!isOnlyUsingPasskey" variant="dots" :text="__('or')" class="py-3" />
+
+            <Button
+                class="w-full"
+                :variant="isOnlyUsingPasskey ? 'primary' : 'default'"
+                :text="__('Confirm with Passkey')"
+                :icon="passkey.waiting.value ? null : 'key'"
+                :disabled="passkey.waiting.value"
+                :loading="passkey.waiting.value"
+                @click="confirmWithPasskey"
+            />
+            <ErrorMessage v-if="passkey.error.value" :text="passkey.error.value" />
+        </template>
     </AuthCard>
 </template>

resources/js/pages/auth/ConfirmPassword.vue

@@ -1,15 +1,18 @@
 <script setup>
 import Head from '@/pages/layout/Head.vue';
 import Outside from '@/pages/layout/Outside.vue';
-import { AuthCard, Input, Field, Button, Separator, Checkbox } from '@ui';
+import { AuthCard, Input, Field, Button, Separator, Checkbox, ErrorMessage } from '@ui';
 import { Link, router } from '@inertiajs/vue3';
 import { computed, ref, watch } from 'vue';
+import { usePasskey } from '@/composables/passkey';
 
 defineOptions({ layout: Outside });
 
 const props = defineProps([
     'errors',
     'emailLoginEnabled',
+    'passkeyOptionsUrl',
+    'passkeyVerifyUrl',
     'oauthEnabled',
     'providers',
     'referer',
@@ -25,6 +28,7 @@ const password = ref('');
 const remember = ref(false);
 const processing = ref(false);
 const shaking = computed(() => Object.keys(errors.value).length ? 'animation-shake' : '');
+const showOAuth = computed(() => props.oauthEnabled && props.providers.length > 0);
 
 const submit = () => {
     processing.value = true;
@@ -41,6 +45,24 @@ const submit = () => {
         onError: () => processing.value = false
     });
 }
+
+const passkey = usePasskey();
+
+const showPasskeyLogin = computed(() => {
+    return props.emailLoginEnabled && passkey.supported;
+})
+
+async function loginWithPasskey() {
+    await passkey.authenticate(
+        props.passkeyOptionsUrl,
+        props.passkeyVerifyUrl,
+        (data) => {
+            if (data.redirect) {
+                window.location = data.redirect;
+            }
+        }
+    );
+}
 </script>
 
 <template>
@@ -78,17 +100,30 @@ const submit = () => {
                 <Button type="submit" variant="primary" :disabled="processing" :text="__('Continue')" tabindex="5" />
             </form>
 
-            <template v-if="oauthEnabled">
+            <template v-if="showOAuth || showPasskeyLogin">
                 <Separator v-if="emailLoginEnabled" variant="dots" :text="__('Or sign in with')" class="py-3" />
-                <div class="flex gap-4 justify-center items-center">
-                    <Button
-                        v-for="provider in providers"
-                        :key="provider.name"
-                        as="href"
-                        class="flex-1"
-                        :href="provider.url"
-                        :icon="provider.icon"
-                    />
+                <div class="flex flex-col gap-y-4">
+                    <template v-if="showPasskeyLogin">
+                        <Button
+                            :text="__('Passkey')"
+                            class="w-full"
+                            :icon="passkey.waiting.value ? null : 'key'"
+                            :disabled="passkey.waiting.value"
+                            :loading="passkey.waiting.value"
+                            @click="loginWithPasskey"
+                        />
+                        <ErrorMessage v-if="passkey.error.value" :text="passkey.error.value" />
+                    </template>
+                    <div v-if="showOAuth" class="flex gap-4 justify-center items-center">
+                        <Button
+                            v-for="provider in providers"
+                            :key="provider.name"
+                            as="href"
+                            class="flex-1"
+                            :href="provider.url"
+                            :icon="provider.icon"
+                        />
+                    </div>
                 </div>
             </template>
         </div>

resources/js/pages/auth/Login.vue

@@ -1,14 +1,14 @@
-import { onMounted, onUnmounted } from 'vue';
+import { nextTick, onMounted, onUnmounted } from 'vue';
 
 const className = 'bg-architectural-lines';
 const id = 'content-card';
 
 function add() {
-    document.getElementById(id).classList.add(className);
+    nextTick(() => document.getElementById(id).classList.add(className));
 }
 
 function remove() {
-    document.getElementById(id).classList.remove(className);
+    nextTick(() => document.getElementById(id).classList.remove(className));
 }
 
 export default function useArchitecturalBackground() {