Face & Touch ID

🔗Demo Page: https://chakor-plugin-demo-6.bubbleapps.io/version-test/block_print_page

🔗Editor Link: https://chakor-plugin-demo-6.bubbleapps.io/version-test/block_print_page

The Face & Touch ID Plugin provides seamless biometric authentication for Face ID and Touch ID. This plugin allows you to verify users' identities before granting them access to specific pages or features within your Bubble.io application.

🚀 Key Features:

✅ Face ID & Touch ID Authentication – Securely authenticate users with biometrics.
✅ Register & Authenticate Users – Users can register their biometric credentials and use them for authentication.
✅ Restrict Access to Pages & Features – Allow access to sensitive areas only after biometric verification.

🔹 How It Works:

User Registration – Users register their biometric credentials (Face ID / Touch ID).
Authentication – Users authenticate using their stored credentials.
Conditional Access – Only authenticated users can access a restricted page or feature.

Step-by-Step Setup in Bubble

1️⃣ Install the Plugin
Install the Face & Touch ID Plugin from the Bubble Plugin Marketplace.

2️⃣ Add the Plugin Element

Drag & drop the Face & Touch ID element onto the page where authentication is required.

3️⃣ Register the User (First Time Setup)

Create a Register button and trigger the Register User action.
Store the returned unique ID in the database to link it with the user.

👉 Example Workflow for Registration:

When the "Register" button is clicked → Trigger Register User Action → Save the Credential_ID from state "credential_id" to the User database.

4️⃣ Authenticate the User Before Granting Access

When a user tries to access a restricted page or feature, trigger the Authenticate User action. providing the credential_id saved in current user.
If authentication succeeds, allow the user to proceed.

👉 Example Workflow for Authentication:

When the "Authenticate" button is clicked → Trigger Authenticate User Action → If authentication is successful, navigate the user to a protected page.

🔹 Restricting Access to a Page (Conditional Redirection)

To prevent unauthorized users from accessing a page:
Create a Workflow on Page Load:
Check if the user is authenticated.
If not authenticated, redirect them back to the home/login page.

👉 Example Condition:

When Page is Loaded → If authentication state is false, navigate to the login page.

🔹 Restricting Access to a Feature (Hiding UI Elements)

To hide/show UI elements based on authentication status:
Set a Custom State:
Create a custom state is_authenticated (yes/no).
Set this state to "yes" when authentication succeeds.
Apply Conditional Visibility:
Show the restricted feature only if is_authenticated is "yes".

👉 Example Condition for a Button:

Show the "Restricted Feature" button only when is_authenticated is yes.

🔹 Example Use Cases

🔒 Secure Dashboard Access – Require Face/Touch ID before showing the dashboard.
🔒 Protect Financial Transactions – Verify the user before processing a payment.
🔒 Restrict Access to VIP Content – Allow premium users to access exclusive content.
🔒 Secure Profile Updates – Require authentication before changing personal information.

With the Face & Touch ID Plugin, you can enhance security in your Bubble.io app by requiring biometric authentication before allowing access to sensitive pages or features.

🚀 Start integrating biometric authentication today and secure your app effortlessly!