Skip to content

Commit 0db3bcd

Browse files
committed
docs: update docs for the 2fa plugin
1 parent e4d2eab commit 0db3bcd

1 file changed

Lines changed: 19 additions & 13 deletions

File tree

adminforth/documentation/docs/tutorial/08-Plugins/02-TwoFactorsAuth.md

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -229,7 +229,7 @@ So such users will have suggestion to setup 2FA, but will be able to skip it wit
229229
230230
You might want to to allow to call some custom critical/money related actions with additional 2FA approval. This eliminates risks caused by user cookies theft by some virous/doorway software after login.
231231
232-
To do it, first, create frontend custom component which wraps and intercepts click event to menu item, and in click handler do a call to `window.adminforthTwoFaModal.getCode(cb?)` frontend API exposed by this plugin. This is awaitable call wich shows 2FA popup and asks user to authenticate with 2nd factor (if passkey is enabled it will be suggested first, with ability to fallback to TOTP)
232+
To do it, first, create frontend custom component which wraps and intercepts click event to menu item, and in click handler do a call to `get2FaConfirmationResult` frontend API exposed by this plugin. This is awaitable call wich shows 2FA popup and asks user to authenticate with 2nd factor (if passkey is enabled it will be suggested first, with ability to fallback to TOTP)
233233
234234
```ts title='/custom/RequireTwoFaGate.vue'
235235
<template>
@@ -239,6 +239,9 @@ To do it, first, create frontend custom component which wraps and intercepts cli
239239
</template>
240240

241241
<script setup lang="ts">
242+
import { use2faApi } from '@/custom/plugins/TwoFactorsAuthPlugin/use2faApi.ts';
243+
244+
const { get2FaConfirmationResult } = use2faApi();
242245
const emit = defineEmits<{ (e: 'callAction', payload?: any): void }>();
243246
const props = defineProps<{ disabled?: boolean; meta?: Record<string, any> }>();
244247

@@ -247,8 +250,7 @@ To do it, first, create frontend custom component which wraps and intercepts cli
247250
return;
248251
}
249252

250-
const verificationResult = await window.adminforthTwoFaModal.get2FaConfirmationResult(); // this will ask user to enter code
251-
253+
const verificationResult = await get2FaConfirmationResult(); // this will ask user to enter code
252254
emit('callAction', { verificationResult }); // then we pass this verification result to action (from fronted to backend)
253255
}
254256
</script>
@@ -333,20 +335,19 @@ Frontend (Save Interceptor component injected via pageInjections):
333335
```vue title='/custom/SaveInterceptor.vue'
334336
<script setup>
335337
import { useAdminforth } from '@/adminforth';
338+
import { use2faApi } from '@/custom/plugins/TwoFactorsAuthPlugin/use2faApi.ts';
336339

340+
const { get2FaConfirmationResult } = use2faApi();
337341
const { registerSaveInterceptor } = useAdminforth();
338342

339343
registerSaveInterceptor(async ({ action, values, resource }) => {
340344
// action is 'create' or 'edit'
341-
const modal = (window as any)?.adminforthTwoFaModal;
342-
if (modal?.get2FaConfirmationResult) {
343-
const confirmationResult = await modal.get2FaConfirmationResult('Confirm to save changes');
344-
if (!confirmationResult) {
345-
return { ok: false, error: 'Two-factor authentication cancelled' };
346-
}
347-
// Pass data to backend; the view will forward extra.confirmationResult to meta.confirmationResult
348-
return { ok: true, extra: { confirmationResult } };
345+
const confirmationResult = await get2FaConfirmationResult('Confirm to save changes');
346+
if (!confirmationResult) {
347+
return { ok: false, error: 'Two-factor authentication cancelled' };
349348
}
349+
// Pass data to backend; the view will forward extra.confirmationResult to meta.confirmationResult
350+
return { ok: true, extra: { confirmationResult } };
350351
else {
351352
throw new Error('No Two-Factor Authentication modal found, please ensure you have latest version of @adminforth/two-factors-auth installed and instantiated on resource');
352353
}
@@ -439,9 +440,12 @@ Imagine you have some button which does some API call
439440

440441
<script setup lang="ts">
441442
import { callApi } from '@/utils';
443+
import { use2faApi } from '@/custom/plugins/TwoFactorsAuthPlugin/use2faApi.ts';
444+
445+
const { get2FaConfirmationResult } = use2faApi();
442446

443447
async function callAdminAPI() {
444-
const verificationResult = await window.adminforthTwoFaModal.get2FaConfirmationResult();
448+
const verificationResult = await get2FaConfirmationResult();
445449

446450
const res = await callApi({
447451
path: '/myCriticalAction',
@@ -480,12 +484,14 @@ You might want to protect this call with a second factor also. To do it, we need
480484
<script setup lang="ts">
481485
import { callApi } from '@/utils';
482486
import { useAdminforth } from '@/adminforth';
487+
import { use2faApi } from '@/custom/plugins/TwoFactorsAuthPlugin/use2faApi.ts';
483488

489+
const { get2FaConfirmationResult } = use2faApi();
484490
const { alert } = useAdminforth();
485491

486492
async function callAdminAPI() {
487493
// diff-add
488-
const verificationResult = await window.adminforthTwoFaModal.get2FaConfirmationResult();
494+
const verificationResult = await get2FaConfirmationResult();
489495

490496
const res = await callApi({
491497
path: '/myCriticalAction',

0 commit comments

Comments
 (0)