How to Display Custom Error Messages for Contact Number Validation in Azure Entra External ID Custom Authentication Extension

Question

I’ve integrated a custom authentication extension in Azure Entra External ID to validate Irish contact numbers during the signup process. This validation works as expected—if the contact number doesn’t match the specified Irish format, the signup process halts. However, I’m having trouble with error handling in the user interface.

Currently, when an invalid contact number is provided, the form displays a default error message: “Something went wrong. Contact your IT department if the problem persists.” Instead of this generic message, I’d like to display a custom error message that specifies the format issue with the contact number.

Questions:

1. Is it possible to display a custom error message on the form when the contact number validation fails?
2. If so, could someone guide me on how to implement this? Are there specific fields or properties within the onAttributeCollectionSubmit response (or another area) that I need to configure to replace the default message with a custom one?
3. If this approach isn’t possible, are there any other recommended methods for providing more user-friendly feedback on validation errors within Azure Entra External ID during signup?

Thank you in advance for any insights or examples of handling custom error messages in this scenario.

Answer 1

Hi @Aakash Goswami , yes you can do this. Please let me know if you have any questions and I can help you further.

You can configure custom error messages by modifying the onAttributeCollectionSubmit response. This involves specifying the error message that should be displayed when the contact number validation fails. In your custom authentication extension, you can handle the validation logic and return a specific error message if the contact number does not match the Irish format.

You can use the onAttributeCollectionSubmit method to validate the contact number. If the validation fails, you can set a custom error message. Here’s an example of how you can implement this:

 onAttributeCollectionSubmit: function (context) {
    var contactNumber = context.request.body.contactNumber;
    var irishNumberPattern = /^(\+353|0)[1-9]\d{8}$/; // Example pattern for Irish numbers

    if (!irishNumberPattern.test(contactNumber)) {
        context.response.status = 400;
        context.response.body = {
            "error": {
                "code": "InvalidContactNumber",
                "message": "The contact number provided is not in the correct Irish format. Please enter a valid Irish contact number."
            }
        };
        return context.done();
    }

    // Proceed with the normal flow if validation passes
    context.done();
}

Check that your front-end application is configured to display the custom error message returned by the onAttributeCollectionSubmit method. This might involve updating the form validation logic to handle and display the specific error message.

If modifying the onAttributeCollectionSubmit response isn't feasible, you can consider using client-side validation to provide immediate feedback to the user before the form is submitted. This can be done using JavaScript to validate the contact number format and display a custom error message if the validation fails.

Please let me know if you have any questions and I can help you further.

If this answer helps you please mark "Accept Answer" so other users can reference it.

Thank you,

James

Answer 2

I use the onAttributeCollectionSubmit method in my custom authentication extension to validate the contact number and return error responses when validation fails. Below is an example of the error response sent back: Below is my azure function code.

module.exports = async function (context, req) {
    context.log('JavaScript HTTP trigger function processed a request.');

    // Extract user sign-up attributes from the request body
    const userSignUpInfo = req.body?.data?.userSignUpInfo?.attributes;
    context.log("userSignupInfo is ", userSignUpInfo);

    if (!userSignUpInfo) {
        // Return error response if userSignUpInfo is missing
        context.res = {
            status: 400,
            body: {
                data: {
                    "@odata.type": "microsoft.graph.onAttributeCollectionSubmitResponseData",
                    actions: [
                        {
                            "@odata.type": "microsoft.graph.attributeCollectionSubmit.showValidationError",
                            message: "Invalid request format: missing userSignUpInfo",
                            attributeErrors: {}
                        }
                    ]
                }
            }
        };
        return;
    }

    // Extract contact number and validate it
    const contactNumber = userSignUpInfo?.extension_29ed4f67dea64c99a4c5fc193b63c929_TelephoneNumber?.value || '';
    const irelandPhoneNumberRegex = /^(?:\+353|0)(8[356789]\d{7}|1\d{7,8}|\d{7,9})$/;

    context.log("contact number is ", contactNumber);

    // Validate the contact number
    if (!contactNumber) {
        // Handle case where contact number is missing
        context.res = {
            status: 400,
            body: {
                data: {
                    "@odata.type": "microsoft.graph.onAttributeCollectionSubmitResponseData",
                    actions: [
                        {
                            "@odata.type": "microsoft.graph.attributeCollectionSubmit.showValidationError",
                            message: "Contact number is required.",
                            attributeErrors: {
                                contactNumber: "Missing contact number"
                            }
                        }
                    ]
                }
            },
            headers: {
                "Content-Type": "application/json"
            }
        };
        return;
    }

    if (!irelandPhoneNumberRegex.test(contactNumber)) {
        // Return error response if contact number is invalid
        context.log(`Invalid contact number format: ${contactNumber}`);
        
        context.res = {
            status: 400,
            body: {
                data: {
                    "@odata.type": "microsoft.graph.onAttributeCollectionSubmitResponseData",
                    actions: [
                        {
                            "@odata.type": "microsoft.graph.attributeCollectionSubmit.showValidationError",
                            message: "Invalid contact number format. Please provide a valid Irish contact number.",
                            attributeErrors: {
                                contactNumber: `Invalid format for ${contactNumber}. Example of valid format: +353851234567 or 0851234567`
                            }
                        }
                    ]
                }
            },
            headers: {
                "Content-Type": "application/json"
            }
        };
        return;
    }

    context.log("Contact number validation passed.");

    // Send the success response if contact number is valid
    context.res = {
        status: 200,
        body: {
            data: {
                "@odata.type": "microsoft.graph.onAttributeCollectionSubmitResponseData",
                actions: [
                    {
                        "@odata.type": "microsoft.graph.attributeCollectionSubmit.continueWithDefaultBehavior",
                        message: "Contact number validated successfully."
                    }
                ]
            }
        },
        headers: {
            "Content-Type": "application/json"
        }
    };

    context.log("Contact number validated successfully.");
};

Despite returning the error response as described, the custom error message does not appear inline on the form. Instead, the generic error message persists.

I would greatly appreciate any guidance on achieving this functionality or alternative suggestions to enhance the user experience in this context. Thank you in advance!