I can't get browser to redirect on Server Connect Unauthorize Event

[kidino]

OK, here’s where I am at.

I successfully put together the login page, backend server action and redirect. I can get data of the logged in user with a user_data Server Action. And using the Server Connect, I want to redirect the user when she/he arrives on the page but not logged in. The user_data does send a 401 Unauthorize. I added a Browser Component and Dynamic Action on the Server Connect to redirect when Unauthorize – but it is not redirecting. It’s as if the Unauthorize event did not trigger.

[kidino]

Actually, together with this, I am still not successful on redirecting user after logging out. The logout works though.

[Teodor]

Do you see any errors in the console? What’s the code of the server action component with the redirect?

[kidino]

I get two errors, which are expected. One is missing favicon, and the other is the 401 Unauthorized.

[kidino]

This is my Server Action setup for retrieving user data.

Step 1 - Security Provider
Step 2 - Security Restrict – nothing in Permission, Login URL & Forbidden URL
Step 3 - Database Query – retrieving logged in user data. I do get this on the frontend

[Teodor]

Can you please paste the code here?

@Teodor

What’s the code of the server action component with the redirect?

[kidino]

Frontend PHP include code for header nav

    <div is="dmx-browser" id="browserx" dmx-on:ready="" dmx-on:load=""></div><!-- Wappler include fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="" appConnect="local" components="{dmxBootstrap5Navigation:{},dmxBrowser:{}}" -->
    <dmx-serverconnect id="serverconnect1" url="/dmxConnect/api/logout.php" noload dmx-on:success="browserx.goto('/login.php')"></dmx-serverconnect>
    <dmx-serverconnect id="serverconnect2" url="/dmxConnect/api/user_data.php" dmx-on:unauthorized="browserx.goto('/login.php')"></dmx-serverconnect>

    <header>
      <div class="container-fluid bg-primary">
        <div class="row">
          <div class="col">
    <nav class="navbar navbar-expand-lg navbar-dark">
      <a class="navbar-brand ms-auto" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar1_collapse" aria-controls="navbar1_collapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-end" id="navbar1_collapse">
        <div class="navbar-nav">
          <a class="nav-item nav-link active" href="#">Home</a>
          <a class="nav-item nav-link" href="#">About</a>
          <button id="btn1" class="btn" dmx-on:click="serverconnect1.load(true)">Logout</button>
        </div>
      </div>
    </nav>      </div>
        </div>
      </div>
    </header>

[Teodor]

Thanks, that was what i was interested in:

<dmx-serverconnect id="serverconnect2" url="/dmxConnect/api/user_data.php" dmx-on:unauthorized="browserx.goto('/login.php')"></dmx-serverconnect>

We will check if there’s any issue with the unauthorized event.

[Teodor]

I checked this, but the redirect works fine for all the events.
What page are you working on exactly - is this a full page? Or a content page of a SPA site?

[kidino]

I am building a PHP site. I see that Wappler’s method is mostly like SPA with API backend. So I understand that the communications are mostly via XHR, and I am following this method when working with Wappler.

Currently I am learning how to work with Authentication using Wappler.

[kidino]

I also have another Server Connect for Logout. The logout works, with the Server Connect Dynamic Event, but I can’t get the redirect to work. I am using Success Event, with Browser Component and the Goto action.

Could it be something the Server Component Dynamic Events? It’s like these events are not triggering, for the user_data and the logout.

[Teodor]

@kidino

I am building a PHP site. I see that Wappler’s method is mostly like SPA with API backend. So I understand that the communications are mostly via XHR, and I am following this method when working with Wappler.

So is this a SPA content page you are testing the redirect - it's not really clear from your explanation?
Or is it a full page with html/head/body tags?

[kidino]

Trying to DRY (don’t repeat yourself), I have

• private_header.php - where I will have the navigation for logged in users, including logout button. This is what I shared above, where I have serverconnect1 for user_data and serverconnect2 for logout process
• protected_pages.php - this will be other pages, where it will add private_header.php via PHP include

Is this clearer?

[Teodor]

@kidino

• private_header.php - where I will have the navigation for logged in users, including logout button. This is what I shared above, where I have serverconnect1 for user_data and serverconnect2 for logout process

So is this a PHP include which you are testing? Or is it included on some page? Please explain this more detailed.
The issue from what i see is that the js include for the browser component is most probably missing from the page this PHP include is used on.

[kidino]

• I have login.php – no include. This contains the login form.
• I have private_header.php –
• I have the test.php – testing the private page.

Checking out the source code at the browser, I see that login.php has this

<script src="/dmxAppConnect/dmxBrowser/dmxBrowser.js" defer=""></script>

But test.php, which includes private_header.php does not.

[kidino]

I added this to test.php, and it works.

<script src="/dmxAppConnect/dmxBrowser/dmxBrowser.js" defer=""></script>

But it would be better if that is handled in private_header.php where the browser component is being used.

[Teodor]

The js includes are added in the head tags of the main pages, where the PHP includes are used.
You can just move (cut/paste):

<script src="/dmxAppConnect/dmxBrowser/dmxBrowser.js" defer=""></script>

in your PHP include.

[kidino]

I am afraid that it doesn’t work. The <script> gets removed on save.

[Teodor]

Once again: Is this a PHP Include or a Content Page loaded in the main page?

[kidino]

I am sorry if my explanation is rather vague. I am still trying to get used with all the terms. And thank you for being patient with me.

I believe private_header.php is a PHP include file. It does not have <head>, <meta> etc. But this is where I plan to use the Browser component for redirecting users, and protecting private pages.

Then I have test.php which has include() that calls private_header.php. I believe this is what you refer as Content Page. My initial plan is to have all the private pages include private_header.php.

With this setup, I tried moving the <script> for the browser component into private_header.php. But it gets removed upon file save.