TutorialsBlocking 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 updates

Read more about
Tutorials

Cover Image for Caching a Next.js API with Redis

Caching a Next.js API with Redis

·5 min read

Find out how to cache a Next.js Serverless API with Redis

Cover Image for The complete guide to Stripe and Next.js

The complete guide to Stripe and Next.js

·20 min read

Learn everything you need to start collecting payments for your Next.js application with Stripe Checkout

Cover Image for Improve your Next.js website Core Web Vitals

Improve your Next.js website Core Web Vitals

·7 min read

In this post, we share how to optimize the performance of your Next.js website and improve your Core Web Vitals

Cover Image for How to call an API with Next.js

How to call an API with Next.js

·8 min read

Learn how to call API endpoints in your Next.js application

Cover Image for When to use SSR with Next.js

When to use SSR with Next.js

·4 min read

Learn when to use SSR or SSG with your Next.js application

Cover Image for How to make a Convertkit sign-up form with Next.js

How to make a Convertkit sign-up form with Next.js

·5 min read

Want to grow your Newsletter list? Learn how to build a sign-up form with Convertkit and Next.js