Laravel Inertia Vue Error with session flash message

Question

I am currently working on a project in Laravel Inertia with a Jetstream starter pack that works with vue3. I have to customize the login method. Basically, the logic will be if the user status is Inactive user will be prompted with an error using a session flash message.

Here is my login method

App\Providers\JetstreamServiceProvider.php

public function boot(): void

{
    Fortify::authenticateUsing(function (Request $request) {
    
    

        $user       = User::where('email', $request->email)->first();
        $active     = User::where('email', $request->email)->where('status','1')->first();
        $inactive   = User::where('email', $request->email)->where('status','0')->first();
        if ($user &&
            Hash::check($request->password, $user->password) && $active ) {
                return $user;
        
            }
        else if
            ($user && $inactive) {
           $request->session()->flash('message', 'Your account is disabled. Please contact IT for support.');
            return false;
               

            }   
});
    $this->configurePermissions();

    Jetstream::deleteUsersUsing(DeleteUser::class);
}

This is my frontend view

Login.vue

    <div v-if="message"
        class="mb-4 text-sm font-bold tracking-wide border-l-4 border-red-700 text-center text-red-700 bg-red-100 px-2 py-4 rounded">
        {{ $page.props.flash.message }}
    </div>

according to the Inertia documentation the following code should display the message. But I'm getting the following error

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'flash') at setup (Login.vue:14:38)

Also Im getting a warning from vue

app.js:18 [Vue warn]: Unhandled error during execution of setup function at <Login jetstream= {canCreateTeams: false, canManageTwoFactorAuthentication: true, canUpdatePassword: true, canUpdateProfileInformation: true, hasEmailVerification: false, …} auth= {user: null} errorBags= [] ...

at <Inertia initialPage= {component: 'Auth/Login', props: {…}, url: '/', version: '1dcda246d0ee45f4b6bb48a97081b75f'} initialComponent= {__name: 'Login', props: {…}, __hmrId: 'e4ebae0a', setup: ƒ, render: ƒ, …} resolveComponent=fn ... > at

Any expert can help me with this error ?

Rayhan Ahmed Rakib · Accepted Answer · 2023-09-13 16:29:38Z

0

For someone who is facing the same :

Here is the fix

I have updated the HandelInertiaRequests.php from the Middleware

HandelInertiaRequests.php

public function share(Request $request): array
{ 
    return array_merge(parent::share($request), [
   'flash' => 
        [
          'message' => session('message')  
        ]
    ]);
 }

answered Sep 13, 2023 at 16:29

Rayhan Ahmed Rakib

10210 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Laravel Inertia Vue Error with session flash message

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related