Custom Components

You can include additional customizations by adding your own Blade components, overriding the default components provided by the package.

#Creating Custom Components

#Step 1: Publish the Default Components

To start with the current components from the Auth package, you can publish them to your application's resources/views/components/auth/elements directory:

php artisan vendor:publish --tag=auth:components

Any components in this folder can be used instead of the default components. This gives you ultimate flexibility in customizing the appearance and behavior of your authentication pages.

Next, you need to specify which component you want to override.

#Step 2: Override the Component

To use your custom component instead of the default one, you need to register it in your AppServiceProvider:

namespace App\Providers;

use Illuminate\Support\Facades\Blade;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    public function register()
    {
        //
    }

    public function boot()
    {
        Blade::component('components.auth.elements.button', 'auth::elements.button');
        // Add more components as needed
    }
}

For instance, the code above will now use the button component from your local resources/views/components/auth/elements folder.

#Step 3: Customize the Component

You can now customize the Blade component as much as you would like. These components utilize Tailwind CSS and Alpine.js, so that is how you can customize styles or functionality.

#Step 4: Update the Assets

You may have added some additional Tailwind classes in your custom component that are not included by the default components. To rebuild the stylesheet, run the following command:

npx tailwindcss -c ./vendor/devdojo/auth/tailwind.config.js -o ./public/auth/build/assets/styles.css

You will now see your updated styles within your authentication pages.

Tip: if you are trying to override styles that are set by Auth itself — for instance the background color — you may have to use !important (e.g. !bg-pink-500), although the best approach is to use the button color settings in the authentication setup pages.

#Testing

It's best to have your CI set up to run through the authentication functionality whenever you make a new PR. This way, if you break something when adding your own custom component, you will be aware. See the GitHub Action workflow that ships with the package.