Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

zerosAndOnes's avatar

Update entire View after login

Hello guys, I have a page that extends my layout/app file. The app file is non livewire, but I have a page where I have decided to use modal for user authentication, and I am using livewire on this page.

The only problem is this: On the header of the website, I have links to login, and register, so after user logs in with livewire, they still see login and register at the top of the page, unless they refresh the page.

Is there a way for me to fix this?

==THIS IS FOR A DIFFERENT ERROR==

The modal for the authentication doesn't clear errors if a user faces an error (say incorrect password, which is being displayed with the span tag), and closes the modal, when they open it again, the previous error will still be there.

Thanks.

0 likes
5 replies
tykus's avatar

You can redirect after a successful login.

zerosAndOnes's avatar

@tykus I tried that. But because of how I close the modal, the redirect will not work well in this case.

public function closeModal() 
{
   		$this->showLoginModal = false;
		return redirect->back() //doesn't get here, and if I do the opposite, the modal will not close
}
Sinnbeck's avatar

Maybe show the code so we can see how you handle it? Otherwise we just guess

zerosAndOnes's avatar

@Sinnbeck What part exactly?

The app.blade.php, is the generic laravel one, and this holds the header section.

The livewire login function is housed in a blade file, and it is extending the app.blade.php

zerosAndOnes's avatar
zerosAndOnes
OP
Best Answer
Level 3

I have managed to come up with a quick solution. I set an id to the header, then after login, I also dispatch a browser event, and use jQuery to refresh only the header by targeting the ID.

//refresh header to show login (in my livewire php file)

$this->dispatchBrowserEvent('userLoggedIn');

//in blade

<script>
    window.addEventListener('userLoggedIn', event => {
            $("#nav").load(" #nav > *");
     })
 </script>

And kinda same thing for the modal form.

Please or to participate in this conversation.