Implement Unrecognized Device Login Alerts in React

A few years ago, my PayPal account was hacked. I received an email notifying me that an unrecognized device from another country had accessed my account. Thanks to that timely alert, I was able to change my password quickly and prevent any financial loss. This experience underscored the importance of alerting users when their accounts are accessed from unfamiliar devices—a simple yet effective way to combat phishing attacks and unauthorized access.

As a React developer and technical entrepreneur, I searched for an easy-to-implement API that could enable my React web app to send unrecognized device alerts to users. Surprisingly, I found that this feature was either missing from popular authentication solutions like Firebase or only available through costly enterprise services. So, I decided to create a solution myself and share it with the community.

Introducing AuthAlert

AuthAlert is an API designed to help you integrate unrecognized device sign-in alerts into your React applications effortlessly. It allows you to notify users when their accounts are accessed from new devices, enhancing security and user trust.

How Do Unrecognized Device Sign-in Alerts Work?

To implement this feature, your application needs to keep track of known devices for each user. When a user logs in from a new device, the system can flag it as unrecognized and trigger an alert. This process requires storing device information in a server-side database—something React alone cannot handle.

AuthAlert provides an API that simplifies this process. It securely manages the storage of known devices and sends alerts to users via email, including critical information like device model, operating system, and location. These details help users quickly assess potential risks and take necessary actions to secure their accounts.

Live Demo

Curious to see how AuthAlert works in action? Try our live demo and experience it yourself in just one minute. Visit AuthAlert Live Demo and follow the instructions to get a firsthand look at how unrecognized device alerts can enhance your application's security.

How to Implement Unrecognized Device Alerts in Your React App

Installation

First, install the authalert npm package in your React project:

npm install authalert

Setup

1. Sign Up on AuthAlert: Go to AuthAlert and create a free account.
2. Create a Project: After signing up, create a new project to obtain your unique Project ID.
3. Authorize Your App: Include your React app's domain name in the project settings to authorize API calls.
4. Configure Email Templates: Set up your Mailgun templates for alert emails to customize the notifications your users will receive.

Calling the API

In your React app, import the authalert package and call the API right after user authentication:

import AuthAlertAPI from 'authalert';

const projectId = 'your_project_ID';

const result = await AuthAlertAPI(projectId, {
  user_id: user.id,
  email: user.email,
  first_name: user.first_name,
  last_name: user.last_name,
});

console.log(result);

Replace 'projectId' with the Project ID from AuthAlert, and ensure you pass the correct user details to the API.

Note: AuthAlert does not store personal information like the user's email, first name, or last name. This data is only passed to your Mailgun account for sending alert emails.

Testing the Implementation

To test, log in to your React app from one device, and then log in from a different device using the same account. You should receive an alert email immediately upon the second login.

Enhancing User Experience

If your application uses multi-factor authentication (MFA), AuthAlert can improve the user experience by providing flags about new devices. You can use these flags to trigger MFA only when users sign in from unrecognized devices, making the login process smoother and less intrusive for regular users.

Backend Integration

AuthAlert also supports webhook requests to your backend, allowing you to integrate alerts with other systems. For example, you could automatically flag high-risk users in your CRM based on unrecognized device logins.

Your Feedback

Integrating unrecognized device login alerts into your React application is a proactive step toward enhancing account security. AuthAlert simplifies this process with an easy-to-use API and straightforward implementation.

It's free to get started, so give it a try and let me know your feedback. Together, we can make the web a safer place for everyone.