You’ve created a login screen using Bubble, but
non-logged-in users can still access pages that should only be available after login.
This is a common problem.
In this article, I’ll show you how to redirect non-logged-in users to the login screen
while allowing logged-in users to access member-only pages.
Background
When implementing a login screen,
I searched for various ways to implement Bubble’s login functionality.
While I found several articles explaining "You can log in with ID and password! Implementation is easy!",
I couldn’t find many resources about "redirecting non-logged-in users to the login screen and preventing them from seeing member-only pages."
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 implement a system where non-logged-in users are directed to the login screen,
and only logged-in users can view member-only pages
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, when you open the profile page link,
you won’t be redirected to the login screen, and instead, the profile page will be displayed.
Note: Although not covered in this article,
I’ve implemented functionality to redirect users to the page they were originally trying to access,
which is why it behaves this way.
The implementation method is described in the following article:
https://gonkunblog.com/redirect-to-page/1459/
Implementation
This implementation assumes you’re using Bubble’s "Log the user in method" for user login.
The implementation is quite simple.
You just need to add a login check when the page loads.
Add a page-is-loaded event.
Add an action to redirect to the login screen to the event you just created.
Then, set this action to execute only when the user is not logged in.
Set "Only when" to "Current User is logged out".
That’s it!
For any page you want to restrict to logged-in users,
simply create this event.
Conclusion
I’ve shown you how to implement redirection to the login screen for non-logged-in users,
preventing them from viewing restricted pages.
As an additional enhancement,
wouldn’t you also want to redirect users back to the page they were originally trying to access
after they log in?
I’ve covered this implementation in the following article,
so please check it out:
https://gonkunblog.com/redirect-to-page/1459/
That’s all.
