Using the Livewire component | laravel-one-time-passwords | Spatie SPATIE Laravel One-Time Passwords ============================= spatie.be/open-source [Docs](https://spatie.be/docs) [Laravel-one-time-passwords](https://spatie.be/docs/laravel-one-time-passwords/v2) Basic-usage Using the Livewire component Version v2 v1 Other versions for crawler [v2](https://spatie.be/docs/laravel-one-time-passwords/v2) [v1](https://spatie.be/docs/laravel-one-time-passwords/v1) Using the Livewire component - [ Introduction ](https://spatie.be/docs/laravel-one-time-passwords/v2/introduction) - [ Support us ](https://spatie.be/docs/laravel-one-time-passwords/v2/support-us) - [ Installation & setup ](https://spatie.be/docs/laravel-one-time-passwords/v2/installation-setup) - [ Questions and issues ](https://spatie.be/docs/laravel-one-time-passwords/v2/questions-issues) - [ Changelog ](https://spatie.be/docs/laravel-one-time-passwords/v2/changelog) - [ About us ](https://spatie.be/docs/laravel-one-time-passwords/v2/about-us) Basic usage ----------- - [ Introducing one-time-passwords ](https://spatie.be/docs/laravel-one-time-passwords/v2/basic-usage/introducing-one-time-passwords) - [ Creating one-time passwords ](https://spatie.be/docs/laravel-one-time-passwords/v2/basic-usage/creating-one-time-passwords) - [ Configuring notifications ](https://spatie.be/docs/laravel-one-time-passwords/v2/basic-usage/configuring-notifications) - [ Consuming one-time passwords ](https://spatie.be/docs/laravel-one-time-passwords/v2/basic-usage/consuming-one-time-passwords) - [ Using the Livewire component ](https://spatie.be/docs/laravel-one-time-passwords/v2/basic-usage/using-the-livewire-component) Configuring security -------------------- - [ Introduction ](https://spatie.be/docs/laravel-one-time-passwords/v2/configuring-security/introduction) - [ Enforcing origin ](https://spatie.be/docs/laravel-one-time-passwords/v2/configuring-security/enforcing-origin) - [ Configuring password format ](https://spatie.be/docs/laravel-one-time-passwords/v2/configuring-security/configuring-password-format) - [ Allowing multiple passwords ](https://spatie.be/docs/laravel-one-time-passwords/v2/configuring-security/allowing-multiple-passwords) - [ Setting default expiration time ](https://spatie.be/docs/laravel-one-time-passwords/v2/configuring-security/setting-default-expiration-time) Advanced usage -------------- - [ Customizing actions ](https://spatie.be/docs/laravel-one-time-passwords/v2/advanced-usage/customizing-actions) - [ Using your own model ](https://spatie.be/docs/laravel-one-time-passwords/v2/advanced-usage/using-your-own-model) - [ Handling events ](https://spatie.be/docs/laravel-one-time-passwords/v2/advanced-usage/handling-events) Using the Livewire component ============================ ### On this page 1. [ Customizing the styling ](#content-customizing-the-styling) The package provides a Livewire component that can create and consume one-time passwords. Here's how you can use it in your view. ``` ``` It will render a form asking for the user's email address and a button to send the one-time password. After the user submits the form, it will send a one-time password to the provided email address. ![image](/docs/laravel-one-time-passwords/v2/images/form-email.png) The component will then display a form asking for the one-time password and a button to verify it. After the user submits the form, it will verify the one-time password and log the user in if the verification is successful. ![image](/docs/laravel-one-time-passwords/v2/images/form-code.png) ### Only consuming a one-time password If you want to use the component only for consuming a one-time password, you can pass the `email` prop to the component. ``` ``` This will skip the email address input and directly show the form for entering the one-time password. ### Redirecting after successful authentication By default, authenticated users will be redirected to the url specified in the `redirect_successful_authentication_to` property of the `one-time-passwords` config file. To customize the redirect URL, you can also pass an url to the `redirect-to` prop. ``` ``` ### Using the Flux OTP input component When [Flux](https://fluxui.dev) is installed, the Livewire component will automatically use the [Flux OTP input component](https://fluxui.dev/components/otp-input), which is much nicer than the default text input. You can install Flux by following the instructions on their website: Once Flux is installed, the package will automatically detect it and use the Flux OTP input component instead of the default text input. ![image](/docs/laravel-one-time-passwords/v2/images/flux.jpg) Customizing the styling ----------------------------------------------------------------------------------------------------------------------------- You can customize the styling of the component by publishing the package's assets. To do this, run the following command: ``` php artisan vendor:publish --tag=one-time-passwords-views ``` This will publish the package's views to the `resources/views/vendor/one-time-passwords` directory. You can then customize the views as needed. ### Customizing the component To have full control over the component, you can create your own Livewire component, and let it extend `Spatie\OneTimePasswords\Livewire\OneTimePasswordComponent`. This way, you can override any methods or properties you want. A good match? ------------- ### What we do best - All things Laravel - Custom frontend components - Building APIs - AI-powered features - Simplifying things - Clean solutions - Integrating services ### Not our cup of tea - WordPress themes - Cutting corners - Free mockups to win a job - "Just execute the briefing" In short: we'd like to be a **substantial part** of your project. [ Get in touch via email ](mailto:info@spatie.be?subject=A%20good%20match%21&body=Tell%20us%20as%20much%20as%20you%20can%20about%0A-%20your%20online%20project%0A-%20your%20planning%0A-%20your%20budget%0A-%20%E2%80%A6%0A%0AAnything%20that%20helps%20us%20to%20start%20straightforward%21)