Customizing prehooks in Frontegg

Custom prehooks are hooks executed before a specific event occurs. They are especially useful in authentication flows. They provide a way to insert custom logic or additional checks before the main action is completed, increasing flow security and giving you further personalization over user flows. Frontegg's custom prehooks allow you to extend the logic of flows within Frontegg without performing any actions on your end. You are granted ultimate control over your users' flows.

This topic will cover the benefits and integration of custom prehooks into your user flows.

Benefits and use cases

The ability to customize prehooks is a game-changer if you wish to customize your users' flows:

• You can use custom prehooks to perform additional verification for users attempting to access sensitive account features from a new device or from an unusual location, enhancing security measures beyond standard authentication.
• You can limit access according to multiple user traits and consequently automate the user journey according to the logic you want to enforce.
• Enhanced security and compliance: Custom prehooks allow you to add extra layers of security before completing the authentication process. You can perform a risk analysis check or assess a device's security posture.
• Customize your user's experience: You can create a more personalized login experience. Depending on factors like user roles, location, or access time, their login process can be customized - enroll in MFA? blocked acocrding to domain? the possibilities are endless.

Creating custom prehook

Creating a custom prehook can be done in several easy steps:

1. Head over to your prehooks tab [ENVIRONMENT] → Prehooks, and press the Create Prehook button to create a new prehook.

2. Define your required settings e.g., Trigger event, Code type (in our case, it would be a Custom code prehook), the prehooks' timeout, etc.

3. Test your prehook before activation.

Custom prehook use case

Custom prehooks extend your existing Frontegg flows to allow you to customize your user journey further. The following example demonstrates how to customize a prehook for a user authentication flow with the ability to control the verdict (see possible verdicts in the Prehooks topic) of the user after opting to login. Note that this option has a predefined template that you can use.

The following code sample checks if an email address provided during a sign-up event is valid and belongs to an allowed domain. If the email is invalid or not from an allowed domain, it blocks the sign-up process; otherwise, it allows the user to proceed with the flow.

const ALLOWED_DOMAINS = ['gmail.com'];

/**
 * Handle the event
 * @param {SignUpEventData} eventData - the event details
 * @returns {Promise<SignUpHandlerResponse>} event handler response
 */
async function onEvent(eventData) {
   // ensure user email is present
   if (!eventData.data.user.email) {
      // note that userMessage (the second parameter) is displayed in red on the failed sign-up prompt
      return {
         continue: false,
         verdict: "block",
         error: {
            status: 400,
            message: ["Email is invalid"]
         }
      }
   }

   // ensure a reasonable format for the email
   const splitEMail = eventData.data.user.email.split('@');
   if (splitEMail.length !== 2) {
      // note that userMessage (the second parameter) is displayed in red on the failed sign-up prompt
      return {
         continue: false,
         verdict: "block",
         error: {
            status: 400,
            message: ["Email is invalid"]
         }
      }
   }

   // if the email domain is not explicitly in our allow list, deny access
   const domain = splitEMail[1].toLowerCase();
   if (ALLOWED_DOMAINS.indexOf(domain) < 0) {
      // note that userMessage (the second parameter) is displayed in red on the failed sign-up prompt
      return {
         continue: false,
         verdict: "block",
         error: {
            status: 400,
            message: ["Email is not allowed"]
         }
      }
   }

   return {
      continue: true,
      verdict: "allow",
      response: {}
   }
}

exports.onEvent = onEvent;

Single prehook view

After testing and creating your prehook, you can view/change its settings and monitor its performance.

Logs and monitoring

Prehooks can be monitored via the [ENVIRONMENT] → Prehooks → Logs tab. You can see the verdict that was determined per flow and whether the prehook was successful or not.