Skip to content

[10.x] Allow passkeys as 2fa #742

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aguingand merged 11 commits into from
Jul 9, 2026
Merged

[10.x] Allow passkeys as 2fa #742

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
c128d75
wip
aguingand Jun 18, 2026
418bdc2
Merge branch '9.x' into passkey-2fa
aguingand Jul 3, 2026
0c9e8f6
Merge branch '10.x' into passkey-2fa
aguingand Jul 3, 2026
5528eaf
Merge branch '10.x' into passkey-2fa
aguingand Jul 3, 2026
0d205a9
Refactor Passkey and Multi-Factor Authentication system integrations.
aguingand Jul 6, 2026
873e54f
Fix 2fa tests
aguingand Jul 7, 2026
415ac41
Improve handling of 2fa user
aguingand Jul 7, 2026
f3824af
Allow no fields
aguingand Jul 7, 2026
e502296
More cleanup
aguingand Jul 7, 2026
d6e5b2c
Add tests
aguingand Jul 8, 2026
4d3197f
Fix import
aguingand Jul 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion resources/js/Layouts/Auth/AuthCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
<script setup lang="ts">
import { config } from "@/utils/config";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";

defineProps<{
empty?: boolean,
}>();
</script>

<template>
Expand All @@ -18,7 +22,7 @@
</CardDescription>
</template>
</CardHeader>
<CardContent>
<CardContent :class="empty ? 'p-0' : ''">
<slot />
</CardContent>
<CardFooter>
Expand Down
41 changes: 4 additions & 37 deletions resources/js/Pages/Auth/Login.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,11 @@
import { FormItem } from "@/components/ui/form";
import { Check } from "lucide-vue-next";
import TemplateRenderer from "@/components/TemplateRenderer.vue";
import { onMounted } from "vue";
import {
startAuthentication,
browserSupportsWebAuthn,
browserSupportsWebAuthnAutofill
} from "@simplewebauthn/browser";
import { api } from "@/api/api";
import { Separator } from "@/components/ui/separator";
import { usePasskeyLogin } from "@/Pages/Auth/usePasskeyLogin";

const props = defineProps<{
loginIsEmail: boolean,
Expand All @@ -42,38 +39,8 @@
supports_passkeys: browserSupportsWebAuthn(),
});

const passkeyForm = useForm({
remember: false,
start_authentication_response: '',
});

async function loginWithPasskey(autofill = false) {
try {
const response = await api.get(route('passkeys.authentication_options'), {
ignoreContentType: true,
});

const authenticationOptions = response.data;
const authenticationResponse = await startAuthentication({
optionsJSON: authenticationOptions,
useBrowserAutofill: autofill,
});

console.log(authenticationResponse);

passkeyForm.remember = form.remember;
passkeyForm.start_authentication_response = JSON.stringify(authenticationResponse);

passkeyForm.post(route('passkeys.login'));
} catch (error) {
console.error(error);
}
}

onMounted(async () => {
if(config('sharp.auth.passkeys.enabled') && await browserSupportsWebAuthnAutofill()) {
await loginWithPasskey(true);
}
const { loginWithPasskey } = usePasskeyLogin({
autofill: config('sharp.auth.passkeys.enabled'),
});
</script>

Expand Down Expand Up @@ -161,7 +128,7 @@
type="button"
variant="outline"
class="w-full"
@click="loginWithPasskey()"
@click="loginWithPasskey({ remember: form.remember })"
>
{{ __('sharp::pages/auth/login.passkey_button') }}
</Button>
Expand Down
59 changes: 0 additions & 59 deletions resources/js/Pages/Auth/Login2Fa.vue
View file
Open in desktop

This file was deleted.

76 changes: 76 additions & 0 deletions resources/js/Pages/Auth/LoginMultiFactor.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
<script setup lang="ts">
import AuthLayout from "@/Layouts/Auth/AuthLayout.vue";
import { useForm } from "@inertiajs/vue3";
import { __ } from "@/utils/i18n";
import Title from "@/components/Title.vue";
import { route } from "@/utils/url";
import { Button } from "@/components/ui/button";
import { Alert, AlertTitle } from "@/components/ui/alert";
import AuthCard from "@/Layouts/Auth/AuthCard.vue";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { FormItem } from "@/components/ui/form";
import { MultiFactorMethod } from "@/types";
import { usePasskeyLogin } from "@/Pages/Auth/usePasskeyLogin";

const props = defineProps<{
method: MultiFactorMethod,
helpText: string,
passkeyError: string,
errors: Record<string, string>,
}>();

const form = useForm({
code: '',
});

const { loginWithPasskey } = usePasskeyLogin({ autofill: props.method === 'passkey' });
</script>

<template>
<AuthLayout>
<Title>
{{ __('sharp::pages/auth/login.title') }}
</Title>

<template v-if="Object.keys(errors).length || passkeyError">
<Alert class="mb-4" variant="destructive">
<AlertTitle class="mb-0">
{{ Object.values(errors)[0] || passkeyError }}
</AlertTitle>
</Alert>
</template>

<form @submit.prevent="method === 'passkey' ? loginWithPasskey() : form.post(route('code16.sharp.login.2fa.post'))">
<AuthCard :empty="method == 'passkey'">
<template #title>
{{ __('sharp::pages/auth/login.title') }}
</template>
<template v-if="helpText" #description>
<div class="space-y-2" v-html="helpText"></div>
</template>
<template v-if="method == 'passkey'">
<input class="sr-only" autocomplete="webauthn"></input>
</template>
<template v-else>
<FormItem>
<Label for="code">
{{ __('sharp::pages/auth/login.code_field') }}
</Label>
<Input type="text" id="code" v-model="form.code" />
</FormItem>
</template>
<template #footer>
<Button type="submit" class="w-full">
<template v-if="method === 'passkey'">
{{ __('sharp::pages/auth/login.passkey_button') }}
</template>
<template v-else>
{{ __('sharp::pages/auth/login.button') }}
</template>
</Button>
</template>
</AuthCard>
</form>
</AuthLayout>
</template>
99 changes: 40 additions & 59 deletions resources/js/Pages/Auth/Passkeys/Create.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,40 +11,15 @@
import { startRegistration } from "@simplewebauthn/browser";
import { api } from "@/api/api";
import { Field, FieldDescription, FieldError, FieldGroup, FieldLabel } from "@/components/ui/field";
import { usePasskeyRegister } from "@/Pages/Auth/usePasskeyRegister";

const props = defineProps<{
defineProps<{
prompt: boolean,
isMultiFactor: boolean,
cancelUrl: string,
}>();

const form = useForm({
name: '',
passkey: '',
});

async function submit() {
form.clearErrors();

try {
const optionsResponse = await api.post(route('code16.sharp.passkeys.validate'), {
name: form.name,
});

const registrationResponse = await startRegistration({
optionsJSON: optionsResponse.data.passkeyOptions,
});

form.passkey = JSON.stringify(registrationResponse);

form.post(route('code16.sharp.passkeys.store'));
} catch (error) {
if (error.response?.status === 422) {
form.setError({ name: error.response.data.errors?.name?.[0] });
} else {
console.error(error);
}
}
}
const { form, registerPasskey } = usePasskeyRegister();
</script>

<template>
Expand All @@ -53,7 +28,7 @@
{{ __('sharp::pages/auth/passkeys.title') }}
</Title>

<form @submit.prevent="submit">
<form @submit.prevent="registerPasskey()">
<AuthCard>
<template #title>
{{ __('sharp::pages/auth/passkeys.title') }}
Expand Down Expand Up @@ -88,39 +63,45 @@

<template #footer>
<div class="grid gap-2 w-full">
<Button type="submit" class="w-full" :disabled="form.processing">
{{ prompt ? __('sharp::pages/auth/passkeys.prompt_version.button') : __('sharp::pages/auth/passkeys.account_version.button') }}
</Button>

<template v-if="prompt">
<Button
type="button"
variant="outline"
class="w-full"
as="a"
:href="route('code16.sharp.home')"
>
{{ __('sharp::pages/auth/passkeys.prompt_version.skip_prompt_button') }}
</Button>
<Button
type="button"
variant="ghost"
class="w-full"
@click="useForm({}).post(route('code16.sharp.passkeys.skip-prompt'))"
>
{{ __('sharp::pages/auth/passkeys.prompt_version.never_ask_again_button') }}
<template v-if="isMultiFactor">
<Button type="submit" class="w-full" :disabled="form.processing">
{{ __('sharp::pages/auth/passkeys.prompt_version.button') }}
</Button>
</template>
<template v-else>
<Button
type="button"
variant="ghost"
class="w-full"
as="a"
:href="cancelUrl"
>
{{ __('sharp::pages/auth/passkeys.account_version.cancel_button') }}
<Button type="submit" class="w-full" :disabled="form.processing">
{{ prompt ? __('sharp::pages/auth/passkeys.prompt_version.button') : __('sharp::pages/auth/passkeys.account_version.button') }}
</Button>
<template v-if="prompt">
<Button
type="button"
variant="outline"
class="w-full"
as="a"
:href="route('code16.sharp.home')"
>
{{ __('sharp::pages/auth/passkeys.prompt_version.skip_prompt_button') }}
</Button>
<Button
type="button"
variant="ghost"
class="w-full"
@click="useForm({}).post(route('code16.sharp.passkeys.skip-prompt'))"
>
{{ __('sharp::pages/auth/passkeys.prompt_version.never_ask_again_button') }}
</Button>
</template>
<template v-else>
<Button
type="button"
variant="ghost"
class="w-full"
as="a"
:href="cancelUrl"
>
{{ __('sharp::pages/auth/passkeys.account_version.cancel_button') }}
</Button>
</template>
</template>
</div>
</template>
Expand Down
Loading
Loading