Logout not working on mobile 🔐

Wappler General Bugs
,
#21

Think we need to go back to basics here. A lot of confusion seems to have resulted for the mention of mobile and I understand this is NOT a mobile app, it is a responsive web app.
If so the platform on which it is running should be irrelevant as the api actions run at server level

So this is a PHP web app but for some reason doesn’t seem to be logging out when viewed on a mobile device but does on a desktop?
I assume to api action is as at the top of this post, simple logout and remove a session.
How are you calling the logout action?

1 Like
#22

If this is a PWA they are prone to caching everything. You need to clear this cache on exit. Plenty of documentation and solutions on this revealed in a quick search of Stack Overflow or the web.

Add the following to the end of your service-worker.js file

self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.filter(function(cacheName) {
          // Return true if you want to remove this cache,
          // but remember that caches are shared across
          // the whole origin
        }).map(function(cacheName) {
          return caches.delete(cacheName);
        })
      );
    })
  );
});
#23

You got it Brian.
I call the API from a menu
image

What’s mind boggling is that the php web app does log out successfully on desktop view.

#24

Indeed, the API that queries the avatar, name etc… is being re-run after logout and logically returns this then:
image
If I insert a security restrict here, the whole menu with login/logout links disappears.
image

#25

OK so the userid, redirect etc. are returning null which suggests the logout is working - if you add the Security Restrict step I guess you see an ‘Forbidden’ response to the API call in dev tools?

In terms of understanding more about the specifics on mobile:

  • Do you have a service worker on the page? (see @Dave 's point about caching above)
  • Do you have the PWA installed as an app on the device? or is this when using the devices browser?
  • Which browser/device are you using?
  • Does the page reload after logout? Do you redirect to another page?
  • When you say the menu has the name/avatar etc. what happens if you reload the page?
  • Have you republished the project once the changes have been made?
#26

OK, lets start at basics

check you dont have caching set for your server action

image

You say the logout is called form the menu - how have you coded that? Is the action called directly from the sub-menu link and if so how have you coded that that.

#27

This is with desktop view, where it’s working. This just to show the loging/logout setup is good.

  • No service worker, no PWA.
  • I tested on both Safari and Chrome (iOS), my colleague on chrome (Android). All fail.
  • The menu reloads after log out, with same avatar, userID, name displayed.
  • I’ve republished and even uploaded manually certain files to make sure:
    image
#28

also this looks strange to me, there should be a Steps entry between EXECUTE and the Database Query.

image

#29

The steps thing was removed as it wasn’t needed after the workflows redesign I believe unless it was brought back for some reason I’m currently on 4.4.1 (but assume it’s still the same in 4.4.5)

#30

No caching:

image
image357×747 14.5 KB

Here is a piece of the code with the logout call:

<div class="nav-item dropdown">
                <a class="nav-link dropdown-toggle text-light" data-bs-toggle="dropdown" href="#" id="dropdown1" role="button" aria-haspopup="true" aria-expanded="false">
<img src="" dmx-bind:src="'assets/userphotos/'+userIdentity.data.qryNameRolePic.photo" class="rounded-circle" width="22" height="22"> {{userIdentity.data.qryNameRolePic.firstname}}
                  {{userIdentity.data.qryNameRolePic.role}}{{userIdentity.data.qryNameRolePic.id}}
                </a>
                <div class="dropdown-menu" aria-labelledby="dropdown1">
                  <a class="dropdown-item" href="user-account" dmx-show="(userIdentity.data.qryNameRolePic.role == 'U')"><i class="fas fa-user fa-fw"></i> Account</a>
                  <a class="dropdown-item" href="consultant-account" dmx-show="(userIdentity.data.qryNameRolePic.role == 'C')"><i class="fas fa-user fa-fw"></i> Account</a>
                  <a class="dropdown-item" href="home" dmx-on:click="logout.load();notifies1.success('See you soon '+userIdentity.data.qryNameRolePic.firstname)"><i class="fas fa-sign-out-alt fa-fw"></i> Logout</a>
                  <p class="dropdown-item"><i class="fas fa-globe fa-fw"></i> {{userIdentity.data.qryNameRolePic.city}} <span dmx-show="(sessionHeader.data.TZDiff >= 0)">+</span>{{sessionHeader.data.TZDiff}}<BR><i class="fas fa-coins fa-fw"></i> {{userIdentity.data.qryNameRolePic.currency}}</p>
                </div>
#31

I think 2 possible solutions:

  1. Did you try executing the api in your phone device?
    [Right click in your api step (logout), open in browser, and catch the link for running in your phone]
    This can dismiss a server side problem.

  2. Did you try the incognito mode? Because maybe is something in the cookies of the session making troubles

#32

I have had issues in the past doing that way if i recall correctly, perhaps a timing issue.
Try converting the click event to a flow to make it run asynchronously.
Also, as to the logic (if i follow correctly) . If logout removes the user data how can you expect it appear in the success event?

success('See you soon '+userIdentity.data.qryNameRolePic.firstname)'##
#33

Also I assume you have a server action to load the current users details on the page.
In the success event of the logout action, perform a userIndentity.load() (correct connection name where appropriate) to force a refresh the data related to the current user

#34

@franse Yes I just tried that, and the response on desktop and on mobile browser is the same:

{"userid":null,"redirect":null}

So it seems the mobile browsers and the desktop do reset the userid to 0

@Hyperbytes You’re right, converting to a flow and adding a small Wait (1000ms) between the logout API call and the redirect to /home/ allowed the userid to be reset, and the homepage then is in loggedout state.

#35

That is not really a solution.
It’s just not correct to have the logout and redirect at the same dynamic event. The correct way is to run the logout server action on click and then add the redirect on logout server action dynamic events > success. This way the redirect will be called only after logout action has finished.

When you run two dynamic actions on the same event (on click for example) they run at the same time / simultaneously, so in your case the redirect executes before the logout finishes.

2 Likes
#36

I thought that all flows were Asynchronous?

#37

Got it.
Like so:

<a class="dropdown-item" dmx-on:click="logout.load({})">

Then:

<dmx-serverconnect id="logout" url="dmxConnect/api/Admin/userLogout.php" noload dmx-on:success="notifies1.success('See you soon '+userIdentity.data.qryNameRolePic.firstname);goTo.goto('/home')">
</dmx-serverconnect>

image
image344×641 12.7 KB

#38

Yes, that’s the optimal way to do it.

As an aside i do things like this:

Create a logout page
On the page and add a message “Are you sure you with to log out?” and a logout button linked to the logout action and the redirect on success()

The menu entry simply links to that page

So when logout is clicked i get:

image
image1560×325 8.91 KB

1 Like