Adding 2fa feature for Vue Starter

[tnylea]

This PR will add Two Factor Auth Functionality to the Vue Starter Kit.

In the settings page, users will now see a Two-Factor Auth button.

Clicking this will take them to their 2FA settings page.

They can enable 2FA and they will see a modal with a QR code and secret key.

After scanning the QR code with an authenticator app, they can click on continue and they'll see the 2FA confirmation screen.

After the user successfully confirms they will see that 2FA is now active on their account.

They will also see their recovery codes on the previous screen. Now, upon logging in as their user, they will also have to verify a 2FA code.

You will also find the relevant PR's for this feature in the other Starter Kits.

Other Starter Kit 2FA Feature PR's

React: github.com/laravel/react-starter-kit/pull/101
Livewire: github.com/laravel/livewire-starter-kit/pull/84

[laserhybiz]

Why bring in unplugin-vue-components?

[Maarten-Dekker]

This package isn't used anywhere

[Maarten-Dekker]

I'm curious, what's the reason for using Reka UI's Pin Input component directly instead of going through the shadcn/vue integration?
https://www.shadcn-vue.com/docs/components/pin-input.html

[tnylea]

I experienced issues with the ShadCN pin input not functioning and displaying correctly. Instead of submitting an issue and waiting to hear back about the fixes, I decided to go right to the source and use the component from the underlying library.

If you'd like to give the ShadCN Vue Pin Input a try, please let me know how it goes. It could have been user error, but I spent over an hour trying to debug some issues.

[ibrunotome]

@tnylea the livewire PR is not using generateSecretKey(16) and it is using RendererStyle(800) instead of RendererStyle(400) like this PR or react PR.

I’m curious why the team decided to rewrite backend logic in all the starter kits instead of using Fortify, since it already includes these features (like this option to configure secret length laravel/fortify#568)

[David-Grass-Feria]

@ibrunotome Thats right! All of this starterkids can use fortify! Soo much work for nothing....
The laravel team can save the power for other things. Create only the blade views for livewire, or react, or vue components and use fortify.

[tnylea]

@ibrunotome and @David-Grass-Feria, thanks for letting me know about the generateSecretKey(16) and the RendererStyle(800).

This PR is not final and there are still many iterations that we are going through. Many of the logic from Fortify has been ported over and we are still working on finalizing this functionality. I appreciate the input.

Thanks.