Firebase Authentication

Scale your application with confidence using our pre-built Firebase solution for user authentication. This powerful and versatile approach offers the perfect combination of security and convenience. Enjoy the peace of mind that comes with Firebase's comprehensive security features, while allowing users to log in with their preferred social media accounts for a frictionless experience.

By default, the template comes with the following built-in authentication methods:

• Email/Password - we added, by default, the traditional way of signing in
• Third Party Providers - we also added by default Google Auth sign-in

You're free to add (or remove) any of the methods supported by Firebase's Authentication.

Configuration

If you open the global configuration at src/config.ts, you'll find the auth object:

import { AuthStrategy } from '@/lib/auth/strategy';
 
export const config = {
  // ...
  auth: {
    strategy: AuthStrategy.FIREBASE,
  },
  // ...
};

To use this method, you need to set the auth.strategy to AuthStrategy.FIREBASE.

Getting Started

To get started with Firebase Authentication, you'll need a Google account. If you don't have one yet, you can sign up at https://google.com.

Once you have a Google account, follow these steps:

• Set Up Your Project in Firebase: Create a new project in your Firebase Console and configure an Web App with your desider authentication settings.
• Retrieve Firebase API Credentials: In your Firebase project settings, you'll find API credentials that you'll need to integrate authentication into your application.
• Set Up Environment Variables: Set up environment variables to use your Firebase API credentials. These variables will be used securely in your application.

Setup

Firebase needs a few settings to be configured in their Console to work correctly. This guide will walk you through the steps to get your Firebase authentication setup.

Authentication URLs

The first thing you need to do is to set the authentication URLs in the Firebase Console. These URLs are used to redirect users to the correct page after they have logged in or signed up.

1. Go to the Firebase Console.
2. Click on the project you want to use.
3. Go to the Authentication page.
4. Click on Sign-in method tab and enable the methods you want to use (email, Google, etc).
5. Click on Settings tab and configure your Authorized domains. This is the URL of your site (e.g. https://my-site.com).
6. Click on Templates tab and select Password reset template. Click on edit button, and then you need to customize the Action URL to redirect to your site with /auth/firebase/update-password (e.g. https://my-site.com//auth/firebase/update-password). Note that this affects every template. To handle this, you can create a custom page, that will check the action search param and redirect to the correct page.

Custom SMTP (optional)

If you want to send emails from your own domain, you can configure your SMTP settings in the Firebase Console.

This is optional, but recommended if you want to send emails from your own domain.

1. Go to the Firebase Console.
2. Click on the project you want to use.
3. Go to the Authentication page.
4. Click on Templates tab and select STMP settings.
5. Tweak the SMTP Settings settings to your liking according to your provider's documentation.

How it Works

1. User Login: When a user attempts to log in, the provided credentials are sent to the server for validation through Firebase Auth Client library. Then the Firebase checks the credentials against their user repository.
2. Creating a Session: Upon successful validation, Firebase generates a session token, uniquely identifying the user's session. This token is securely stored in an HTTP cookie on the client's browser.
3. React Server Components: With the session token in place, React Server Components come into play. These components are used to fetch user-specific data directly on the server, utilizing the session token for authentication. This ensures that sensitive user information remains secure.
4. Rendering React Components: The data fetched by React Server Components is then passed to the relevant React components for rendering. This allows us to provide a personalized user experience without exposing sensitive information to the client-side JavaScript.

Explore More