Login page redirecting on API call

[pedroponte]

Hi,

I have tried following the Docs for creating a login flow but they use databases instead of APIs.

So I created my own API flow that sends the input from the login page onto the oauth/api server and receives a JWT token.

It authenticates correctly and I store it on a session cookie, however the browser redirects to the API response page instead of staying on the form.

How can I fix it and how to dynamically navigate to a new page based on the return message (success or not authorised?)

Update:

I have tried adding a browser element and controlling the navigation through the dynamic events as per the pic below but the form still shows me the API response instead of either staying on the login page or navigating to the user dashboard.

Many thanks

[Apple]

@pedroponte

How can I fix it and how to dynamically navigate to a new page based on the return message (success or not authorised?)

You need to use the Response step to return a non-authorised HTTP error code (401) if the login fails. On your server-action, you can check if the login was successful based on the contents of api.data (use a Condition step). And only then you can use the Dynamic Events to check if the login was successful or not authorised

@pedroponte

the form still shows me the API response

Can you show a screenshot? That sounds really weird

[pedroponte]

Thanks.

First pic is from when wrong credentials are provided.

Using strapi as backend API.

I also have a condition check but doesn’t seem to be catching this error…

The pic below is from an API workflow

TIA

[pedroponte]

I figured it out kind of…

I had to disable the pass error flag on the API call.

Still haven’t figured out how to make a call and stay on the page though.

Also, is my solution correct? Not too happy with the redirect calls, was expecting to be able to use the router to navigate through the pages rather than issuing a server redirect page call…

TIA

[Apple]

Good catch on the pass error thing, always untick that box to prevent hard to find “bugs” (I complained about it in the past)

Instead of server redirect steps, use the response step and specify the status code to 200 if success, 401 if unauthorised, and then you can use Dynamic Events on the front-end

[pedroponte]

Thanks.

But how can I dynamically navigate the user from the login page to the dashboard page without using the (server) redirect? With reactJS I used the router navigate on the client side, not sure here on node with wappler… TIA

[pedroponte]

@Apple

Dynamic Events

Found it, thank you!

[pedroponte]

Actually, without the redirects, I still get the output on the page…

Any clues please?

Thanks

##Edited##

[Apple]

The button should not have a Dynamic Event “Click”

[pedroponte]

I removed it from the button but I still get the same api output

Any other suggestions please? Let me know if you need me to share any further details.
The form currently has some modifiers on submit as per below.

TIA

All redirects steps on the pic are disabled

[Apple]

Take out the Dynamic Event On Submit, you don’t need any of those (edit: any of those modifiers)

[pedroponte]

It seems I had a problem with the template.

I have created a specific template for login.

How can I navigate the user on login success without using the browser dynamic event then?
I have also disabled the server redirect url.

TIA

[Apple]

@pedroponte

How can I navigate the user on login success without using the browser dynamic event then?

Removing the Dynamic Event “Submit” won’t affect the remaining dynamic events “Success”, “Forbidden” and so on

[pedroponte]

Thank you, got it, had to re-read that again

[Apple]

Yeah, sorry about that, when I said “you don’t need any of those” I meant any of those modifiers you had on the Dynamic Event “Submit”

Hope it’s working now?

[pedroponte]

It fixed the problem, thank you!