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/v1)  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)

- [ Introduction ](https://spatie.be/docs/laravel-one-time-passwords/v1/introduction)
- [ Support us ](https://spatie.be/docs/laravel-one-time-passwords/v1/support-us)
- [ Installation & setup ](https://spatie.be/docs/laravel-one-time-passwords/v1/installation-setup)
- [ Questions and issues ](https://spatie.be/docs/laravel-one-time-passwords/v1/questions-issues)
- [ Changelog ](https://spatie.be/docs/laravel-one-time-passwords/v1/changelog)
- [ About us ](https://spatie.be/docs/laravel-one-time-passwords/v1/about-us)

Basic usage
-----------

- [ Introducing one-time-passwords ](https://spatie.be/docs/laravel-one-time-passwords/v1/basic-usage/introducing-one-time-passwords)
- [ Creating one-time passwords ](https://spatie.be/docs/laravel-one-time-passwords/v1/basic-usage/creating-one-time-passwords)
- [ Configuring notifications ](https://spatie.be/docs/laravel-one-time-passwords/v1/basic-usage/configuring-notifications)
- [ Consuming one-time passwords ](https://spatie.be/docs/laravel-one-time-passwords/v1/basic-usage/consuming-one-time-passwords)
- [ Using the Livewire component ](https://spatie.be/docs/laravel-one-time-passwords/v1/basic-usage/using-the-livewire-component)

Configuring security
--------------------

- [ Introduction ](https://spatie.be/docs/laravel-one-time-passwords/v1/configuring-security/introduction)
- [ Enforcing origin ](https://spatie.be/docs/laravel-one-time-passwords/v1/configuring-security/enforcing-origin)
- [ Configuring password format ](https://spatie.be/docs/laravel-one-time-passwords/v1/configuring-security/configuring-password-format)
- [ Allowing multiple passwords ](https://spatie.be/docs/laravel-one-time-passwords/v1/configuring-security/allowing-multiple-passwords)
- [ Setting default expiration time ](https://spatie.be/docs/laravel-one-time-passwords/v1/configuring-security/setting-default-expiration-time)

Advanced usage
--------------

- [ Customizing actions ](https://spatie.be/docs/laravel-one-time-passwords/v1/advanced-usage/customizing-actions)
- [ Using your own model ](https://spatie.be/docs/laravel-one-time-passwords/v1/advanced-usage/using-your-own-model)
- [ Handling events ](https://spatie.be/docs/laravel-one-time-passwords/v1/advanced-usage/handling-events)

      You are viewing the documentation for **an older version** of this package. You can check the version you are using with the following command:

 `                                    composer show spatie/laravel-one-time-passwords                                                                                                                                                                                                                                    `

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/v1/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/v1/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.

```

```

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.