How to build quick & safe redirects in Bubble
Redirects can be built easily in Bubble with the 'Go to...' action.
But what:
- if we want them to be secure, so a hacker can't prevent the redirection?
- and if we want them to happen without entering the page they are in so the page don't flash to the user, even briefly?
We need the redirect to be a 302 code (the user doesn't land on the page but is redirected to another page), no a 200 (the user lands on the page and then is redirected to another).
To achieve this, the redirect should be triggered on the server, not on the client (the user browser). To be triggered on the server, any condition should be performed on the server (not rely on info that is calculated on the page, a variable stored in a group for example).
Follow this simple rules:
1. The condition shouldn't use info that's on the page. This means: no using variables on the page on the condition.
2. The redirect has to be on a 'Page is loaded' workflow.
3. You can have several redirects ('Go to...' actions), but each one should be on a different 'Page is loaded' workflow. Only one action per workflow.
The 'Page is loaded' workflow can be on a reusable on the page and it'll work as if it were on the page, as all 'Page is loaded' are checked before anything else happens on the page.
You can check some of your redirections with an external service like: https://www.redirect-checker.org/index.php
In the following example I'm checking that you can access the account page if you aren't logged in and have the role you need to access it.
Note that I had to add the username and password of the app to the url for the bot to be able to try to access the page.
The result: a 302 redirect, tagged as a problem, it's not one. In fact it's just what we want, that no unauthorized user access the page (and the following 401 it's because the bot cannot open the page it's redirected to as it's a password protected page and the url has no username and password attached to it, this is normal).
As you can see on the following animation, the page account doesn't flash to the user, the redirect is done in the server and the user only see the page to which is redirected, in this example, the index page:
If you had set up the redirect correctly, you will see (Chrome developer console) that the server is answering with a 302 redirect and that the browser is not downloading any data.
See the example in the following screenshots when trying to access the Admin portal of a Bubble app:
The "admin" page response is a 302
The server respond with a 302 status
The browser didn't receive any data