How To Add Push Authentication In Your React Native App With Authsignal

Push authentication offers a secure and convenient password-free way to verify user identity with just a tap on their mobile device. Let's see how you can implement this in your React Native application using Authsignal.

What is Push Authentication?

Push authentication enables users to verify login attempts with a simple tap on their mobile device. When someone tries to access an account from a web browser, the account owner receives an authentication request on their phone. They can then approve or deny the login attempt directly from their device.

‍

‍

This approach is based on public key cryptography:

• A private/public key pair is generated
• The private key remains securely on the user's mobile device
• The public key is stored by Authsignal

‍

Authentication Flow

The complete flow is as follows:

1. Track Action: The sequence starts with your server API tracking an authentication action
2. Challenge Initiation: The system creates a challenge and sends it to your user's device
3. Push Notification: The user receives a notification on their mobile device
4. User Response: Using the Authsignal SDK, the user approves or rejects the request
5. Verification: The system verifies the user's response using cryptographic signatures
6. Result: After polling for the result, the server validates the challenge
7. Access Granted: Upon successful validation, the authenticated transaction proceeds

‍

Sequence Diagram

Below is a sequence diagram illustrating the complete push authentication flow:

‍

Prerequisites

Before users can receive push authentication challenges, they must first enroll their device by adding push credentials through the mobile SDK. This one-time setup creates the cryptographic keys needed for secure authentication.

Important: Push challenges can only be initiated for users who have already enrolled at least one push authenticator. Without this enrollment, attempts to initiate push authentication will fail.

‍

Let’s Start With Implementation

The complete source code is available in our GitHub repository. This guide's code samples are taken directly from this implementation.

Setting Up the SDK

First, initialize the Authsignal SDK in your React Native app:

‍

To get your Tenant ID and Base URL, head to Authsignal Portal.

Registering the Device

When a user first opens your app, you'll need to register their device:

‍

This code handles two critical operations:

1. Registering a new device (generating the key pair)
2. Checking for any pending authentication challenges

Creating the Challenge Response UI

Next, implement a screen where users can approve or deny authentication requests:

‍

Configuring Navigation

Add the challenge screen to your navigation stack:

‍

Cleanup on Logout

When a user logs out, clean up their push authentication registration:

‍

How It Works: The Complete Flow

1. Device Enrollment: The user's device must first be enrolled for push authentication using addCredential()
2. Login Attempt: The user attempts to log in from a web browser on another device
3. Challenge Creation: The server creates an authentication challenge through Authsignal
4. Challenge Detection: When the user opens your app, it checks for pending challenges
5. User Response: The app displays the challenge details, and the user can approve or deny the login
6. Authentication Completion: Based on the user's decision, the login in the web browser either succeeds or fails

‍

Key API Methods

The Authsignal React Native SDK provides several methods for push authentication:

Adding a Credential

‍

Getting a Challenge

This checks for any pending authentication requests.

‍

Updating a Challenge

This sends the user's response (approve or deny) back to the system.

‍

Removing a Credential

‍

Benefits of Push Authentication

• Enhanced Security: Eliminates password vulnerabilities
• User Convenience: Simple tap instead of typing passwords
• Reduced Friction: Faster authentication process
• Device-Based Security: Authentication tied to a physical device
• Cryptographic Verification: Uses public key cryptography for strong security

Conclusion

Push authentication offers a significant improvement over traditional methods, combining security with user convenience. By implementing it in your React Native app, you provide users with a modern, secure authentication experience that feels effortless.

Authsignal offers dedicated SDKs for iOS, Android, React Native, and Flutter, so you can implement push authentication regardless of your platform choice.