Firebase Authentication
Add user login and authentication to your Golex web app using Firebase
Overview
Adding user authentication to your web app is essential for creating personalized experiences, securing content, and managing user-specific data. With Golex’s Firebase integration, you can implement secure authentication with minimal effort.
Before You Begin
Make sure you’ve completed the Firebase Setup guide before proceeding with authentication setup.
Step 1: Enable Authentication in Firebase
First, you need to enable the Authentication service in your Firebase project:
- Go to the Firebase Console
- Select your project
- In the left sidebar, click on Authentication
- Click the Get started button if you haven’t enabled Authentication yet
- You’ll now see the Authentication dashboard where you can configure sign-in methods
Step 2: Configure Authentication Providers
Firebase offers multiple authentication methods. Choose the ones that best suit your application:
Email/Password Authentication
The most common authentication method:
- In the Authentication dashboard, click on the Sign-in method tab
- Click on Email/Password in the list of providers
- Toggle the Enable switch to the on position
- Click Save
Google Authentication
Allow users to sign in with their Google accounts:
- In the Sign-in method tab, click on Google
- Toggle the Enable switch to the on position
- Select the Project support email (usually your email address from which you created the firebase project)
- Click Save
Other Providers
Firebase supports many other authentication providers:
- Apple
- GitHub
- Microsoft
- Phone Number
- Anonymous
The setup process is similar for most providers - enable the provider and configure the required settings.
Step 3: Configure Authorized Domains
For security reasons, Firebase only allows authentication from authorized domains. When using third-party providers (like Google, Facebook, etc.), you need to add your Golex app’s domain:
- In the Authentication dashboard, click on the Settings tab
- Scroll down to the Authorized domains section
- Click Add domain
- Add your Golex app’s domain:
{webappid}.myurl.live
(replace{webappid}
with your actual web app ID). Find reference in the above screenshot. Available in the url bar in preview section. - Also add the sandbox domain for testing
{webappid}.prvw.live
. (replace{webappid}
with your actual web app ID). Find reference in the above screenshot. - Click Add
Important Note
Without adding your Golex app’s domain to the authorized domains list, third-party authentication providers will not work in your deployed application.
Step 4: Using Authentication in Your Golex App
Once you’ve set up Firebase Authentication, Golex makes it easy to implement authentication features in your app:
Adding Login Components
Golex provides pre-built components for user authentication:
- In the Golex editor, navigate to the page where you want to add authentication
- Open the components panel
- Search for “auth” to find authentication components
- Drag and drop the desired component (Login Form, Sign Up Form, etc.) onto your page
Managing Authentication State
Golex automatically integrates with Firebase Authentication, allowing you to:
- Create protected routes that only authenticated users can access
- Display different UI elements based on the user’s authentication status
- Access user information in your components and logic
Step 5: Testing Your Authentication
To ensure your authentication is working properly:
- Preview your app in Golex
- Try signing up with a new account
- Log out and log back in
- Test any protected routes or authentication-dependent features
Common Issues and Solutions
Next Steps
Now that you’ve set up Firebase Authentication, consider exploring:
- Cloud Firestore - Store user data securely
If you encounter any issues with Firebase Authentication, contact Golex Support for assistance.