After being redirected to the login screen and logging in, the page you originally wanted to see is displayed.
In this article, I’ll show you how to implement this common web app feature using Bubble.
For information on how to redirect non-logged-in users to the login screen,
please see the following article:
https://gonkunblog.com/redirect-unlogin-user/1455/
Background
You’ve probably experienced being redirected to the home page after logging in…
And then having to navigate back to the page you originally wanted to view, which is annoying.
That’s why we want to store information about the page the user was originally trying to access,
and instead of displaying the home page after login,
redirect them to their originally requested page.
This is a mechanism you’ll want to implement to improve user experience.
Since this is a common web feature that many people probably want to implement,
I decided to write this article.
Target Audience
- People who want to implement login functionality with Bubble
- Those who want to redirect users to their originally requested page after login
Final Result
When you click a link while not logged in, you’ll be redirected to the login screen.
After clicking the "Log in with test account" button
and logging in as a sample user, you’ll be redirected to the profile page.
If you try to access the post creation page and are redirected to the login screen,
after logging in, you’ll be redirected to the post creation page.
Implementation
Prerequisites:
- You have implemented user login using the “Log the user in method“
- You have implemented redirection to the login screen for non-logged-in users
(Reference: https://gonkunblog.com/redirect-unlogin-user/1455/)
We’ll implement a mechanism to save the URL the user was originally trying to access before being redirected to the login screen,
and then redirect them to that URL after they log in.
Settings are required for both the redirect source and the login screen.
Let’s start with the redirect source settings.
On the post creation page, there’s a "Page is loaded" event,
and an action is set to redirect to the login screen when the user is not logged in.
As shown in the image below, check "Send more parameters to the page" in this action and set the key to "before_url = This url".
Next, let’s configure the login screen.
When the login button on the login screen is pressed,
you probably have two actions set: "Log the user in" and "Go to xxx".
The former is the login process, and the latter is the default redirect page after login.
Add an "Open an external website" action between these two actions.
This action will use the "before_url" parameter we set earlier.
Set the Destination to "Get before_url from page URL" and
Only when to "Get before_url from page URL is not empty".
(Refer to the settings at the bottom of the image above)
By setting "Only when", you can configure it so that redirection to the original page happens only when an originally requested page exists.
That completes the setup, so let’s test it.
Conclusion
I’ve shown you how to implement a mechanism where after being redirected to the login screen and logging in, the page you originally wanted to see is displayed.
I hope this article is helpful to someone.
That’s all.
