Authentication

Authentication Overview

Finanzapp implements multiple authentication methods and security measures to protect user accounts while maintaining a seamless user experience. All authentication logic is processed on our secure remote server at pro.finanzapp.es.

The frontend provides the authentication interface, while all credential verification, token generation, and session management occur on the backend server.

Authentication Methods

1. Email and Password Authentication

Users can register and log in using email and password credentials.

Registration Flow

Step 1: Form Submission

The registration form collects user information:

Full name
Email address
Password
Password confirmation
Terms of service acceptance (required)
Optional notification preferences

Form location: app/register.php:122-160

<form id="registerForm" action="#" method="post">
    <input type="text" id="nombre" name="nombre" required>
    <input type="email" id="email" name="email" required>
    <input type="password" id="password" name="password" required>
    <input type="password" id="confirm-password" required>
    <input type="checkbox" name="terms" id="terms" required>
</form>

Step 2: Client-Side Validation

Before submission, JavaScript validates all inputs:Email validation:

// js/validationUtils.js:19-22
function validateEmail(email) {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(email);
}

Password requirements:

Minimum 8 characters
At least one uppercase letter (A-Z)
At least one number (0-9)

// js/validationUtils.js:25-28
function validatePassword(password) {
    const re = /^(?=.*[A-Z])(?=.*\d).{8,}$/;
    return re.test(password);
}

Password matching:

// js/registerValidation.js:61-64
if (passwordValue !== confirmPasswordValue) {
    showError("Las contraseñas no coinciden", passwordElem, confirmPasswordElem);
    isValid = false;
}

Step 3: Server Processing

Valid form data is sent to the remote authentication server:

// js/registerValidation.js:70-71
xhr.open('POST', 'https://pro.finanzapp.es/app/auth/sendRegister.php', true);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

The server:

Validates input again (server-side validation)
Checks for existing users
Hashes the password securely
Creates the user account
Establishes a session
Returns success/failure response

Step 1: Form Submission

The login form is minimal and secure:Form location: app/login.php:121-141

<form id="loginForm" action="#" method="post">
    <input type="email" id="email" name="email" required>
    <input type="password" id="password" name="password" required>
    <div class="g-recaptcha" data-sitekey="6LdpGAErAAAAABtf_pOcsJbRBnytt5t8_WahFXAY"></div>
    <button type="submit">Login</button>
</form>

Step 2: reCAPTCHA Verification

All login attempts are protected by reCAPTCHA v3 (see reCAPTCHA section).

Step 3: Credential Verification

Credentials are sent securely to the authentication server:

// js/loginValidation.js:58-59
xhr.open('POST', 'https://pro.finanzapp.es/app/auth/sendLogin.php', true);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

The server:

Verifies reCAPTCHA token
Checks for brute-force attempts
Validates credentials against database
Creates session if successful
Returns authentication result

Password credentials are NEVER stored in plain text. All passwords are hashed using industry-standard algorithms on the server before storage.

2. Google OAuth 2.0

Users can authenticate using their Google account for a faster, more secure login experience.

Google OAuth Configuration

Client ID: 665269631824-25f2bkbj039grhjavj17pkqjsjdqj0jr.apps.googleusercontent.com

Implementation Details

Google Sign-In is integrated on the login page:

<!-- app/login.php:102-117 -->
<div id="g_id_onload"
    data-client_id="665269631824-25f2bkbj039grhjavj17pkqjsjdqj0jr.apps.googleusercontent.com"
    data-context="signin"
    data-ux_mode="popup"
    data-callback="handleCredentialResponse"
    data-auto_prompt="false">
</div>

<div class="g_id_signin"
    data-type="standard"
    data-shape="rectangular"
    data-theme="outline"
    data-text="signin_with"
    data-size="large"></div>

Callback handler:

// app/login.php:179-198
function handleCredentialResponse(response) {
    fetch('https://pro.finanzapp.es/app/auth/google-callback-login.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ credential: response.credential })
    })
    .then(res => res.json())
    .then(data => {
        if (data.status === 'exists') {
            console.log('El usuario ya existe');
        } else if (data.status === 'inserted') {
            console.log('Usuario iniciado');
        }
        window.location.href = "/Finanzapp/index.php";
    });
}

Register with Google

Implementation Details

Google Sign-In for registration uses redirect mode:

<!-- app/register.php:101-118 -->
<div id="g_id_onload"
    data-client_id="665269631824-25f2bkbj039grhjavj17pkqjsjdqj0jr.apps.googleusercontent.com"
    data-context="signup"
    data-ux_mode="redirect"
    data-login_uri="https://pro.finanzapp.es/app/auth/google-callback.php"
    data-auto_prompt="false">
</div>

The redirect URI handles:

Google credential verification
User account creation (if new)
Session establishment
Redirect to dashboard

Google OAuth provides additional security benefits:

No password storage required
Two-factor authentication support (if enabled in Google account)
Automatic email verification
Reduced phishing risk

reCAPTCHA v3 Integration

Finanzapp uses Google reCAPTCHA v3 to protect against automated attacks and bot traffic.

Site Configuration

Site Key: 6LdpGAErAAAAABtf_pOcsJbRBnytt5t8_WahFXAY

Integration Points

reCAPTCHA is required for all login attempts:

<!-- app/login.php:64 -->
<script src="../js/api.js" 
    integrity="sha384-CdhidNt+STVg/jxRNtQC1nw7l1Ys8/TxZI2ZVTypU9tDQ6goYcuMYbd8VR23C6/x" 
    crossorigin="anonymous"></script>

<!-- app/login.php:134 -->
<div class="g-recaptcha" data-sitekey="6LdpGAErAAAAABtf_pOcsJbRBnytt5t8_WahFXAY"></div>

API Script

The reCAPTCHA API is loaded from a local, integrity-verified script:Location: js/api.jsThis script loads the reCAPTCHA v3 library with:

Subresource Integrity (SRI) - Ensures script hasn’t been tampered with
CORS settings - Cross-origin anonymous requests
Localization - Spanish interface (recaptcha__es.js)

How reCAPTCHA Works

User interaction - User fills out login form
Challenge display - reCAPTCHA checkbox appears
Token generation - Upon verification, reCAPTCHA generates a token
Form submission - Token is included with login credentials
Server verification - Backend verifies token with Google’s API
Score evaluation - Server receives risk score (0.0 to 1.0)
Access decision - Login proceeds if score is acceptable

reCAPTCHA v3 runs in the background and assigns a risk score without requiring user interaction in most cases. The visible checkbox provides an additional challenge when needed.

Brute-Force Protection

While the frontend doesn’t implement rate limiting directly, the backend server provides comprehensive brute-force protection.

Server-Side Protection Measures

Implemented on pro.finanzapp.es:

Rate Limiting

Maximum login attempts per IP address
Maximum login attempts per email address
Progressive delays between failed attempts
Temporary account lockouts after threshold

IP-Based Blocking

Automatic IP blocking for suspicious patterns
Geo-location analysis for anomalous access
Known bad actor IP blacklisting

Account Protection

Email notifications for failed login attempts
Account lockout after multiple failures
Security verification for account recovery
Password reset with secure tokens

CSRF Protection

Cross-Site Request Forgery protection is implemented:

<!-- app/login.php:131 -->
<li><strong>csrf_token</strong>: Helps protect against CSRF attacks.</li>

CSRF tokens are:

Generated on form load
Validated on form submission
Single-use and time-limited
Tied to user session

Session Management

Secure session handling is critical for maintaining authenticated state.

PHP Session Configuration

// config/config.php:13-15
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

Session features:

Automatic session start - Initialized when needed
Status checking - Prevents duplicate session starts
Language persistence - User preferences stored in session
Secure cookies - HttpOnly and Secure flags (server-side)

Session Security Best Practices

Implemented on the backend:

Session ID regeneration on login
Secure session cookies (HttpOnly, Secure, SameSite)
Session timeout after inactivity
Session invalidation on logout
Protection against session fixation

Sessions contain minimal data on the frontend. Sensitive session data and authentication tokens are stored securely on the server.

Password Security

Client-Side Requirements

Passwords must meet these minimum requirements:

Length: Minimum 8 characters
Uppercase: At least one letter (A-Z)
Numbers: At least one digit (0-9)

// js/validationUtils.js:25-28
function validatePassword(password) {
    const re = /^(?=.*[A-Z])(?=.*\d).{8,}$/;
    return re.test(password);
}

Server-Side Security

Passwords are processed securely on the backend:

Hashing Algorithm

Passwords are hashed using modern algorithms (bcrypt or Argon2) before storage. Plain text passwords are never stored.

Salt Generation

Each password receives a unique salt to prevent rainbow table attacks.

Password Updates

Password changes require:

Current password verification
New password meeting requirements
Re-authentication after change

Password Reset

Secure password recovery is available: Reset link: /app/reset.php The reset process:

User provides registered email
Secure token generated and emailed
Token expires after time limit
User creates new password
All sessions invalidated

Real-Time Validation

The frontend provides immediate feedback during form entry:

// js/validationUtils.js:52-77
function liveValidateInputs() {
    const emailInput = document.getElementById("email");
    const passwordInput = document.getElementById("password");
    const confirmPasswordInput = document.getElementById("confirm-password");

    if (emailInput) {
        emailInput.addEventListener("input", () => {
            const isValid = validateEmail(emailInput.value.trim());
            toggleErrorClass(emailInput, !isValid);
        });
    }

    if (passwordInput) {
        passwordInput.addEventListener("input", () => {
            const isValid = validatePassword(passwordInput.value.trim());
            toggleErrorClass(passwordInput, !isValid);
        });
    }

    if (confirmPasswordInput && passwordInput) {
        confirmPasswordInput.addEventListener("input", () => {
            const isMatch = confirmPasswordInput.value.trim() === passwordInput.value.trim();
            toggleErrorClass(confirmPasswordInput, !isMatch);
        });
    }
}

This provides:

Instant validation feedback
Visual error indicators
Improved user experience
Reduced invalid submissions

Authentication Best Practices

For Users

Strong Passwords

Create passwords with:

Mix of uppercase and lowercase
Numbers and special characters
Avoid common words or patterns
Use unique passwords per service

Account Security

Enable two-factor authentication (via Google OAuth)
Monitor login notifications
Report suspicious activity immediately
Keep recovery information updated

For Developers

Never modify authentication logic in the frontend. All authentication changes must be made on the secure backend server.

Always use HTTPS for authentication pages
Validate inputs on both client and server
Never log or expose sensitive data
Follow secure coding guidelines
Keep dependencies updated

Getting Started

Core Features

User Guide

Security

Authentication Overview

Authentication Methods

1. Email and Password Authentication

Registration Flow

2. Google OAuth 2.0

Google OAuth Configuration

Register with Google

reCAPTCHA v3 Integration

Site Configuration

Integration Points

How reCAPTCHA Works

Brute-Force Protection

Server-Side Protection Measures

CSRF Protection

Session Management

PHP Session Configuration

Session Security Best Practices

Password Security

Client-Side Requirements

Server-Side Security

Password Reset

Real-Time Validation

Authentication Best Practices

For Users

Strong Passwords

Account Security

For Developers

Security Overview

Data Protection

Additional Resources

Build docs developers (and LLMs) love

Getting Started

Core Features

User Guide

Security

​Authentication Overview

​Authentication Methods

​1. Email and Password Authentication

​Registration Flow

​Login Flow

​2. Google OAuth 2.0

​Google OAuth Configuration

​Login with Google

​Register with Google

​reCAPTCHA v3 Integration

​Site Configuration

​Integration Points

​How reCAPTCHA Works

​Brute-Force Protection

​Server-Side Protection Measures

​CSRF Protection

​Session Management

​PHP Session Configuration

​Session Security Best Practices

​Password Security

​Client-Side Requirements

​Server-Side Security

​Password Reset

​Real-Time Validation

​Authentication Best Practices

​For Users

Strong Passwords

Account Security

​For Developers

​Related Documentation

Security Overview

Data Protection

​Additional Resources

Build docs developers (and LLMs) love

Authentication Overview

Authentication Methods

1. Email and Password Authentication

Registration Flow

Login Flow

2. Google OAuth 2.0

Google OAuth Configuration

Login with Google

Register with Google

reCAPTCHA v3 Integration

Site Configuration

Integration Points

How reCAPTCHA Works

Brute-Force Protection

Server-Side Protection Measures

CSRF Protection

Session Management

PHP Session Configuration

Session Security Best Practices

Password Security

Client-Side Requirements

Server-Side Security

Password Reset

Real-Time Validation

Authentication Best Practices

For Users

For Developers

Related Documentation

Additional Resources