User Authentication & Authorization
Relevant source files
The following files were used as context for generating this wiki page:
The User Authentication & Authorization system in the analiza-este-lovable-tamv project is built upon Supabase Auth, providing a secure and scalable mechanism for managing user identities and controlling access to project resources. This system handles the complete user lifecycle, from initial registration and session management to fine-grained access control based on user roles and permissions.
The architecture leverages a client-side integration via the Supabase SDK for handling authentication state within the UI, complemented by server-side logic in the form of edge functions and database triggers to maintain data integrity and synchronize user profiles.
Core Authentication Architecture
The authentication architecture is centered around the Supabase client, which communicates with the Supabase Auth service. The application uses a custom hook to provide a consistent interface for the frontend to interact with the current user session.
Authentication Flow
When a user attempts to sign in, the frontend sends credentials to the Supabase Auth API. Upon successful validation, Supabase returns a JSON Web Token (JWT) which is stored locally to persist the session.
The flow ensures that authentication state is synchronized between the client and the backend services.
Sources: src/integrations/supabase/client.js, src/hooks/use-auth.js
Supabase Integration
The project initializes the Supabase client using environment variables for the URL and the anonymous key. This client is the primary entry point for all authentication operations.
| Component | Description |
|---|---|
supabaseClient | The singleton instance used to interact with Supabase services. |
useAuth | A custom React hook that manages the user object and session state. |
AuthContext | A provider that wraps the application to ensure auth state is accessible globally. |
Sources: src/integrations/supabase/client.js:1-10, src/hooks/use-auth.js:5-25
Profile Synchronization & Webhooks
To maintain consistency between the Supabase Auth internal user store and the public profiles table, a webhook or database trigger is employed. This ensures that every authenticated user has a corresponding entry in the application's database for storing additional metadata.
Webhook Logic
The project includes a serverless function that listens for INSERT events from the auth service.
This diagram illustrates how the system automates profile creation to prevent orphaned authentication records.
Sources: supabase/functions/auth-webhook/index.ts:1-30
Implementation Details
Session Management
The application monitors session changes (SIGN_IN, SIGN_OUT, TOKEN_REFRESHED) using the onAuthStateChange listener provided by the Supabase SDK. This allows the UI to react immediately when a user's status changes.
// Example session listener implementation
supabase.auth.onAuthStateChange((event, session) => {
if (event === 'SIGNED_IN') {
console.log('User signed in:', session.user);
}
});
Sources: src/hooks/use-auth.js:15-40, src/integrations/supabase/auth.js
Database Permissions (RLS)
Authorization is enforced at the database level using Row Level Security (RLS) policies. These policies verify the JWT claims of the incoming request to determine if the user has permission to perform specific CRUD operations on tables like profiles or project-specific data.
Sources: README.md:1, src/integrations/supabase/client.js
Conclusion
The authentication and authorization module provides a robust foundation for the project by offloading identity management to Supabase while maintaining local control over user profiles and data access via RLS and edge functions. This hybrid approach ensures security, scalability, and a seamless developer experience.