Qore.works Business

Appearance

Qore frontend ​

The Qore Frontend package provides application scaffolding and authentication functionality for building customer-facing portals in the Qore.works Business ecosystem.

What it provides ​

Authentication & User Management ​

  • Portal authentication: Pre-built Livewire components for login, registration, password reset, email verification, and logout (using Livewire Flux UI)
  • Passkeys (WebAuthn): Passwordless sign-in and passkey management (via laravel/fortify + laravel/passkeys). See Authentication → Passkeys
  • Welcome notifications: Automated welcome emails with time-limited access links for new platform users
  • Email verification: Built-in email verification workflow with custom notifications

Installation ​

  1. Install the package via composer:
bash
composer require qore-works-business/qore-frontend --with-all-dependencies
  1. Run the artisan install script to install the qore-frontend.
bash
php artisan qore-frontend:install

Scaffold a new portal application ​

To scaffold a new application based on the Portal template you can run:

shell
  php artisan scaffold:application Portal portal --create
  npm install
  npm run build

If route, config, or ServiceProviders already exist these won't be replaced with a newer version.
To redeploy the latest version of these files, you can add the --force flag.

Update User model ​

Make sure to add the trait HasWelcomeNotification to the user model so it wil receive notifications when creating a platform user from a Person inside the Admin.

Make sure to add the HasVerifyEmailNotification trait to the user model so it will receive an email to verify its email address before being allowed to access the platform.

php
use QoreWorksBusiness\QoreFrontend\Concerns\HasVerifyEmailNotification;
use QoreWorksBusiness\QoreFrontend\Concerns\HasWelcomeNotification;

class User extends QoreAdminBaseUser implements MustVerifyEmail
{
    use HasVerifyEmailNotification;
    use HasWelcomeNotification;
}

Adding middleware aliases ​

The frontend and routing ships with aliases for middleware as default, this makes using the correct middleware easy, without having to read config files.
Add the following snippet to bootstrap/app.php to setup the middleware.

php
use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Middleware;
use QoreWorksBusiness\QoreFrontend\QoreFrontendRouting;

return Application::configure()
    ->withMiddleware(function (Middleware $middleware) {
        QoreFrontendRouting::aliasMiddleware($middleware, 'portal');
    });

This registers the following aliases for the portal application handle:

  • qore-portal-auth → Authenticate middleware
  • qore-portal-guest → RedirectIfAuthenticated middleware
  • qore-portal-verified → EmailVerified middleware

The handle parameter matches your application handle, so for a portal application it generates qore-portal-* aliases.

Alternatively the aliases can be added in a service provider using the following snippet.
Using the bootstrap/app.php is recommended but for some testing setups this doesn't work.

php
use Illuminate\Contracts\Http\Kernel;
use QoreWorksBusiness\QoreFrontend\QoreFrontendRouting;

// Add global middleware to Kernel. In projects, this is done in the bootstrap/app.php
$aliases = app(Kernel::class)->getMiddlewareAliases();
app(Kernel::class)->setMiddlewareAliases(QoreFrontendRouting::aliasMiddleware($aliases, 'portal'));

Deprecated: QoreFrontendRouting::aliasPortalMiddleware() is deprecated and will be removed in a future version. Use aliasMiddleware($middleware, 'portal') instead.

Using livewire components ​

All frontend Livewire components are registered under the application.{handle} prefix, where {handle} is the application handle (e.g. portal). This means they can be used directly in Blade templates without any additional setup:

blade
<livewire:application.portal.auth.login-card />
<livewire:application.portal.auth.register-card />
<livewire:application.portal.auth.forgot-password-card />
<livewire:application.portal.auth.verify-email-card />
<livewire:application.portal.auth.welcome-card />
<livewire:application.portal.auth.logout-button />
<livewire:application.portal.navigation-menu />
<livewire:application.portal.guest-navigation-menu />

See Authentication for details on each auth component.

Styling livewire components ​

The frontend package ships with a handful of livewire components, who's views are not published to projects by default. The tailwind config should search the view files for tailwind classes already, but if styling issues occur, verify the vendor path is included.

With Tailwind CSS v4, use @source directives in your CSS file (e.g. resources/css/application/portal/app.css):

css
@import "tailwindcss";

@source '../../../../vendor/qore-works-business/qore-frontend/resources/views/**/*.blade.php';
@source '../../../../resources/views/application/portal/**/*.blade.php';

Tailwind CSS v3 (legacy) ​

For projects still using Tailwind CSS v3, include the vendor path in your tailwind.config.js:

js
export default {
    content: {
        relative: true,
        files: [
            '../../../../vendor/qore-works-business/qore-frontend/resources/views/application/portal/**/*.blade.php',
        ],
    }
}

Customizing the packages views can be done by publishing them.

bash
php artisan vendor:publish --tag=qore-frontend-views

This publishes all package views to resources/views/vendor/qore-frontend/.

Alternatively, you can extend the livewire class and render your own view using the render() function.

php
use QoreWorksBusiness\QoreFrontend\Integrations\Portal\Livewire\auth\LoginCard;

class Login extends LoginCard 
{
    public function render() 
    {
        return view('your-view')
    }
}