How to build user authentication in Bubble

Create a login page with a central Group. At the top, add social login buttons (Sign in with Google, Sign in with Facebook) that trigger their respective OAuth plugin actions. Below, add a divider with text 'or continue with email'. Below that, add email and password Input elements and a Log In button. For registration, add a toggle link that shows a registration form with Name, Email, Password, and Confirm Password fields. Use custom states to toggle between login and registration views without separate pages.

In the login workflow, use the Log the user in action. After this action, add an Only when condition that checks for errors. Bubble provides an 'An unhandled error occurs' event that you can use at the page level. Create this event and add conditionals: when Current workflow error's message contains 'INVALID_LOGIN_CREDENTIALS', show an Alert with 'Incorrect email or password.' When it contains 'USER_NOT_FOUND', show 'No account found with this email.' When it contains any other error, show a generic 'Something went wrong. Please try again.' Store error messages in a custom state and display them in a red Text element below the form.

On every page that requires login, add a Page is loaded event with an Only when condition: Current User is logged out. In the workflow, add a Go to page action targeting the login page. For a centralized approach, create a Reusable Element called Auth Guard containing this workflow, and place it on every protected page. To preserve the intended destination, add a URL parameter: append ?redirect= followed by the current page path. After successful login, read this parameter and redirect the user to their intended page.

When a user signs up with Google and later tries to log in with email using the same address (or vice versa), Bubble creates separate accounts. To prevent this, after social login check if a user with that email already exists. If yes, link the social identity to the existing account using the Make changes to a thing action to update the existing user's record. Show a message saying 'We found an existing account with this email. Your accounts have been linked.' Handle the reverse case by checking for social identities during email registration.

Bubble maintains sessions using cookies by default. For custom session control, create a custom state or database field called Last Activity (date) on the User. Update it on each page load and significant user action. Add a recurring Do when condition is true event that checks if Current date/time minus Current User's Last Activity exceeds your timeout threshold (such as 30 minutes). When triggered, log the user out and redirect to the login page with a message 'Your session has expired.'

When authentication fails unexpectedly, use these diagnostic steps. In preview mode, open the Debugger and step through the login workflow to see which action fails. Check the Server Logs for error details. Common issues: the Privacy Rules on the User Data Type blocking the login lookup (temporarily disable to test), email casing mismatch (Bubble is case-sensitive for emails), or a plugin conflict with the authentication flow. Test with a fresh browser profile to rule out cached cookie issues.