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:

  1. Go to the Firebase Console
  2. Select your project
  3. In the left sidebar, click on Authentication
  4. Click the Get started button if you haven’t enabled Authentication yet
  5. 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:

  1. In the Authentication dashboard, click on the Sign-in method tab
  2. Click on Email/Password in the list of providers
  3. Toggle the Enable switch to the on position
  4. Click Save

Google Authentication

Allow users to sign in with their Google accounts:

  1. In the Sign-in method tab, click on Google
  2. Toggle the Enable switch to the on position
  3. Select the Project support email (usually your email address from which you created the firebase project)
  4. Click Save

Other Providers

Firebase supports many other authentication providers:

  • Apple
  • Facebook
  • Twitter
  • 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:

  1. In the Authentication dashboard, click on the Settings tab
  2. Scroll down to the Authorized domains section
  3. Click Add domain
  1. 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.
  2. Also add the sandbox domain for testing {webappid}.prvw.live. (replace {webappid} with your actual web app ID). Find reference in the above screenshot.
  3. 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:

  1. In the Golex editor, navigate to the page where you want to add authentication
  2. Open the components panel
  3. Search for “auth” to find authentication components
  4. 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:

  1. Preview your app in Golex
  2. Try signing up with a new account
  3. Log out and log back in
  4. Test any protected routes or authentication-dependent features

Common Issues and Solutions

Next Steps

Now that you’ve set up Firebase Authentication, consider exploring:

If you encounter any issues with Firebase Authentication, contact Golex Support for assistance.