STCMS Documentation

Complete guide to building modern, secure React/PHP applications with STCMS framework

Get Started Learn Architecture

Authentication & Security

Complete guide to STCMS security model and authentication

JWT Security Model

Server-Side: JWT only exposed to React when authenticated

Security: All sensitive logic handled server-side

API Calls: React uses JWT for API requests

Sessions: Session management handled by PHP backend

Security Headers (.htaccess)

.htaccess

# Security headers
<IfModule mod_headers.c>
    Header always set X-Content-Type-Options nosniff
    Header always set X-Frame-Options DENY
    Header always set X-XSS-Protection "1; mode=block"
</IfModule>

# File protection
<Files ".env">
    Order allow,deny
    Deny from all
</Files>

info: These headers protect against common web vulnerabilities and prevent access to sensitive files.

Authentication Check

Twig Template

{% verbatim %}{% if is_authenticated() %}
    <div id="user-profile-root" data-user="{{ user|json_encode }}" data-jwt="{{ jwt }}"></div>
{% else %}
    <div class="bg-blue-50 p-4 rounded">
        <p>Please log in to view your profile.</p>
    </div>
{% endif %}{% endverbatim %}

Tip: Use the is_authenticated() function to check user authentication status in templates.

React Authentication

React Component

import React, { useState, useEffect } from 'react';

export default function UserProfile() {
    const [user, setUser] = useState(null);
    const [loading, setLoading] = useState(true);
    
    useEffect(() => {
        // Get user data from data attributes
        const userData = JSON.parse(
            document.getElementById('user-profile-root').dataset.user
        );
        setUser(userData);
        setLoading(false);
    }, []);
    
    if (loading) return <div>Loading...</div>;
    
    return (
        <div className="p-4 bg-green-50 rounded">
            <h3 className="text-lg font-semibold mb-2">Welcome, {user.name}!</h3>
            <p>Email: {user.email}</p>
            <p>Role: {user.role}</p>
        </div>
    );
}

info: React components receive authentication data via data attributes and JWT tokens.

API Security

ApiClient.php

use Gemvc\Stcms\Core\ApiClient;

$apiClient = new ApiClient($_ENV['API_BASE_URL']);

// POST request with JWT
$response = $apiClient->post('/users', [
    'name' => 'John Doe',
    'email' => 'john@example.com'
], $jwt);

// PUT request
$updated = $apiClient->put('/users/123', [
    'name' => 'Jane Doe'
], $jwt);

Tip: Always pass JWT tokens for authenticated API requests to ensure security.

Security Best Practices

Always validate JWTs on the backend for every API request
Never generate or verify JWTs in the frontend
Use HTTPS in production to protect data in transit
Implement proper session management on the PHP backend
Regularly update dependencies to patch security vulnerabilities
Use environment variables for sensitive configuration