Blade file updates session only after a user refresh.

I have an external API which handles the authentication and returns the token in which i store it in the session. However whenever i log out and remove the session, the blade file doesn't update the session till i refresh the page.

Below is how i save the authentication state when user has logged in and logged out

// User logged in
$request->session()->put('authenticated', true);
$request->session()->put('token', $data->response->token);
$request->session()->put('user', $data->response->user);
$request->session()->save();

// User logged out
$request->session()->put('authenticated', false);
$request->session()->forget(['token', 'user']);
$request->session()->save();

Whenever the user has logged out my blade file still detects the authenticated session and renders as it the user is still logged in

@if (session('authenticated'))
  <header-auth-block :is_login="true" class="ml-lg-3"></header-auth-block>
@else
  <header-auth-block :is_login="false" class="ml-lg-3"></header-auth-block>
@endif

Anyone able to assist me on this? Or is there an alternative to saving the user authentication state.

EDIT

My logout function is called from Vue and the window would redirect back to login page. I suspect that when the user is redirected via VueJS, the session doesn't get updated or it doesn't fetch a new request from the server.

async sendLogoutAPI(){
  axios.post('/auth/logout').then((response) => {
    if(response.status == 200){
      window.location.href = '/auth/login'
    }
  }).catch(error => {
    console.log(error);
  })
}

Tray2

4 years ago

Level 73

I take it you are using javascript to handle the calls to the api? Since blade is rendered server side you need to refresh the page to get the updates.

So either use javascript to redirect somewhere after the login/logout or update the page using javascript.

You should also take a look at livewire.

dexter_siah

4 years ago

Level 1

Hello @tray2 thanks for the reply. The API calls are handled on on Laravel using Guzzle.

I should have given more information on the issue, After the user has logged out, I redirect the user back to the login page using return redirect()->route('login');.

After being redirected to the login page, I try navigating to the home page and it would still show that the user is still logged in due to the session not being updated.

My home page is not a protected route but instead the header would just render different Vue component based on the authenticated session

Snapey

4 years ago

Level 122

after logout you should regenerate the session

dexter_siah

4 years ago

Level 1

Hey @snapey , I have tried regenerating the session as you mentioned, however it still seems like the issue is persisting.

Here is a short snippet of my controller method as well and VueJs method. Hope this would help.

// Auth Controller
public function logout(Request $request)
{
    $data = $this->authServiceApi->logout($request);

    // Remove user state from session
    $request->session()->forget(['token', 'user','authenticated']);
    $request->session()->save();
    $request->session()->invalidate();


    return response()->json([
        'error' => false ,
        'userMessage' => 'user logged out',
        ], 200); ;
}


// Vue JS method
async sendLogoutAPI(){

  axios.post('/auth/logout').then((response) => {
    if(response.status == 200){
      window.location.href = '/auth/login'
    }
  }).catch(error => {
    console.log(error);
  })
}

Snapey

4 years ago

Level 122

Any chance you have remember_token set? In which case the user will be logged back in on the next request. If they actively log out, you should clear the remember_token from the user table.

dexter_siah

4 years ago

Level 1

There isn't any Models or Migrations that is used within the project, all authentication and data all fetched from an external API.

Please or to participate in this conversation.