Blocking authentication with Firebase Auth Functions

Firebase has introduced functions that allow us to write server logic before or after authenticating. Let's see how to use them.

·2 min read
Cover Image for Blocking authentication with Firebase Auth Functions

Firebase Auth Functions are blocking functions that allow us to write server-side logic when the user creates an account or when signs in. This has been one of the most requested features, which is why we're so excited about it.

The two blocking functions are:

  1. beforeCreate: use this function before signing the user up to your Auth Database

  2. beforeSignIn: use this function when the user is verified upon signing in (i.e. when the sign-in process is successful). This function is also called when the user is signing up.

Firebase Authentication Blocking Functions: Use-Cases

These functions can be used for various use-cases, such as:

  • only allow users signing up with an allowed email or domain
  • prevent users from accessing using certain IP addresses
  • modifying user's data upon signing in (for example, set certain custom claims)
  • ... and many others!

Requirements: Update to Firebase Authentication with Identity Platform

To use this new functionality you have to upgrade your Firebase project to Firebase Authentication with Identity Platform using the Firebase Console.

Preventing users from creating an account with Firebase Auth

One common scenario is to prevent the user from signing up based on certain criteria, such as: email domain, IP address, and so on.

To do so, we can use the beforeCreate Firebase Auth function so that we can check if the details provided meet the criteria for signing up to your Firebase application.

In the example below, we have a list of allowed domain names, and we check if the user's email is among the list:

import functions from 'firebase-functions';

const ALLOWED_DOMAINS: string[] = [
  '@yourapp.com'
];

export const beforeCreate = functions.auth.user()
  .beforeCreate((user) => {
    const canAccess = ALLOWED_DOMAINS.some(domain => {
      return user.email.includes(domain);
    });

    if (!canAccess) {
      throw new functions.auth.HttpsError(
        'invalid-argument',
        `Unauthorized email "${user.email}"`
      );
    }
  });

Preventing users from signing in with Firebase Auth

We can also prevent user from signing in after they've created a profile. For example, let's assume an IP is acting suspiciously and we have banned it from the application:

export const beforeSignIn = functions.auth.user()
  .beforeSignIn((user) => {
    const ip = context.ipAddress;

    if (isSuspiciousIpAddress(ip)) {
      throw new functions.auth.HttpsError(
        'permission-denied',
        'Unauthorized access!'
      );
    }
  });

Another common scenario can be blocking access to your application from mobile or unsupported devices:

export const beforeSignIn = functions.auth.user()
  .beforeSignIn((user) => {
    const userAgent = context.userAgent;

    if (isMobile(userAgent)) {
      throw new functions.auth.HttpsError(
        'permission-denied',
        'Unauthorized access!'
      );
    }
  });

Deploy Firebase Auth Blocking Functions

Finally, remember to deploy your functions:

firebase deploy --only functions

To know more about Firebase's blocking functions and the detailed API, visit the Firebase documentation.


Stay informed with our latest resources for building a SaaS

Subscribe to our newsletter to receive updatesor

Read more about

Cover Image for Authenticating users with Remix and Supabase

Authenticating users with Remix and Supabase

·16 min read
Learn how to use Remix and Supabase to authenticate users in your application.
Cover Image for How Makerkit helps boost your SaaS SEO

How Makerkit helps boost your SaaS SEO

·4 min read
Learn how Makerkit can help boost your SaaS SEO thanks to its optimized codebase and SEO-friendly features.
Cover Image for How to sell code with Gumroad and Github

How to sell code with Gumroad and Github

·7 min read
Sell and monetize your code by giving private access to your Github repositories using Gumroad
Cover Image for Migrating to Next.js Server Components Layouts

Migrating to Next.js Server Components Layouts

·6 min read
A simple guide to migrating your _app.tsx component to the new Server Components released with Next.js 13
Cover Image for Getting Started with Next.js Server Components

Getting Started with Next.js Server Components

·8 min read
A simple introduction to using Server Components and the new Layouts Folder Structure with Next.js 13
Cover Image for Counting a collection's documents with Firebase Firestore

Counting a collection's documents with Firebase Firestore

·2 min read
In this article, we learn how to count the number of documents in a Firestore collection using a custom React.js hook.