Search code examples
javascriptmeteorweb-applicationsroutesflow-router

Detect if route was entered via browser back button using flow router


I've created an app using meteorjs with FlowRouter as my router.

I have a pin protection screen that the user is redirected to when they try to enter a 'protected route'. This then asks for a pin and forwards the user to the 'protected route' template.

This all works fine moving forwards however when the user clicks the back button, the pin protection screen is of course shown and the back button needs to be clicked again to return to the previous state. I need the pin protection screen to be skipped or ignored when pressing back.

I have thought of a couple of solutions but am falling short when trying to implement them.

Possible solutions

  1. Ideally I would like the 'pin protection' redirect to load without pushing the history state. This would then mean that the screen the user started on would load when clicking back.

  2. If this doesn't work or isn't possible I would need to find a way to pick up whether or not the user clicked back when leaving the current route.

If anyone else has come across something similar and has a solution I would really appreciate some help. Thanks


Solution

  • I have come across something similar.

    Option 1: You could create a pinEntered boolean variable that is switched to true when the user successfully enters the pin. Then just check for this truthiness in your routing logic. If the var evaluates as true then you can add a condition where it skips that page altogether when the back button is pressed.

    • Set this var conditionally in the routing for your protected pages
    • Check for its value on the back button event