auth-flow-fullstack

Overview

This project demonstrates a full-stack implementation of user registration and login functionality, incorporating both:

Google OAuth2 Authentication
- Users can log in using their Google account via a dedicated button.
Email and Password Authentication
- Supports account registration with email confirmation via a link.
- Includes a password recovery flow for users who forget their password.
Policy Versioning
- Dynamically loads the latest versions of Terms and Conditions or Privacy Policies.
- Policy content is securely stored on the backend, allowing centralized updates and version control.

The project is split into two independent parts:

Frontend: A React application using Material-UI (MUI).
Backend: A Node.js application using Express, Knex, and PostgreSQL.

Each part is a standalone project with its own dependencies, scripts, and can be separated into individual repositories if needed.

Features

Frontend

Built with React and Material-UI for a modern and responsive UI.
Configurable via .env file for flexibility.

Backend

Built with Node.js, Express, Knex, and PostgreSQL.
Secure communication with the frontend using JWT tokens.
- Supports automatic token refresh using refresh tokens.
Configuration via .env files for development, test, and production environments.
Database setup with migration and seed scripts for creating tables and initial data population.
Comprehensive testing:
- Unit, integration, and smoke tests using Jest and Supertest.
- End-to-end (E2E) tests using Cypress.
Logging:
- Implemented using Winston, with different log levels and structured JSON logs.
- Configured for environment-specific needs:
  - Verbose logging in development.
  - Minimal and structured logging in production for performance and monitoring.
  - Debugging logs enabled for testing.
Policy Versioning:
- The application dynamically loads the latest versions of Terms and Conditions or Privacy Policies.
- Policy content is securely stored on the backend, enabling centralized updates and version control.

Screenshots

Landing Page

Register Page

Login Page

Dashboard

Logging

The logging system in this project is implemented using Winston, providing robust and environment-specific logging. The configuration ensures clear and structured logs during development and efficient file-based logging in production.

Key Features

1. Environment-Specific Logging

Development:
- Logs are displayed on the console with colorized output for easy readability.
- Log level is set to debug to provide detailed information for developers.
Production:
- Logs are written to files with daily rotation, ensuring older logs are archived automatically.
- Log level is set to info for concise and relevant information.
- Unhandled exceptions are logged separately for monitoring and debugging.

2. Console Logging

Colorized Output: Logs appear in different colors based on their level (e.g., info, error, warn), improving readability.
Testing Mode: Logs are suppressed during tests if the TEST_LOGS_SILENT environment variable is set to true.

3. File Logging (Production Only)

Logs are stored in the logs directory with daily rotation:
- Filename Pattern: Logs are named using a date pattern (%DATE%-combined.log).
- File Size Limit: Each log file is limited to 20 MB.
- Retention Policy: Logs are retained for 14 days by default.
Unhandled exceptions are logged in separate files (%DATE%-exceptions.log) for better debugging.

4. Configuration

The following environment variables control the logging behavior:

Variable	Description	Default Value
`NODE_ENV`	Defines the environment (`development`, `test`, `production`).	`development`
`TEST_LOGS_SILENT`	Suppresses logs during tests when set to `true`.	`false`
`LOG_MAX_SIZE` (TODO)	Maximum size for log files (e.g., `20m` for 20 MB).	`20m`
`LOG_MAX_DAYS` (TODO)	Retention period for log files (e.g., `14d` for 14 days).	`14d`

Security

Secure communication between client and server using JWT-based authentication.
Refresh tokens ensure session longevity without compromising security.

Portability

The repository does not include deployment configurations (e.g., GitHub Actions).
Easily deployable locally with appropriate .env files and PostgreSQL setup.

Prerequisites

Node.js: v20.15.1
npm: v10.7.0
PostgreSQL: Ensure the database server is running and configured.
1. Create a Database and User:
  - Access your PostgreSQL server using a client (e.g., psql or a GUI like pgAdmin).
  - Run the following commands to create a database and user with the necessary permissions:
```
-- Create a new database
CREATE DATABASE auth_flow_db;

-- Create a user with a password
CREATE USER auth_flow_user WITH PASSWORD 'your_password';

-- Grant privileges to the user on the database
GRANT ALL PRIVILEGES ON DATABASE auth_flow_db TO auth_flow_user;
```
  - Replace auth_flow_db, auth_flow_user, and your_password with your desired database name, username, and password.
2. Configure the Backend:
  - Ensure the database name, username, and password match the configuration in the backend's .env.development, .env.test and .env.production file:
```
DB_HOST=localhost
DB_PORT=5432
DB_NAME=auth_flow_db
DB_USER=auth_flow_user
DB_PASSWORD=your_password
```
  - Update these values in the .env file for each environment (e.g., development, test, production).
Set Up SMTP Server:
- To enable email-based features such as registration confirmation and password reset, configure SMTP credentials in the backend's .env.xxx files:
```
SMTP_SERVER=smtp.gmail.com
SMTP_PORT=587
SMTP_SECURE=false # Use true for port 465 (SSL) or false for STARTTLS
SMTP_USER=your_email@gmail.com
SMTP_USER_PASSWORD=your_email_password
EMAIL_FROM=your_email@gmail.com
EMAIL_NO_REPLY=noreply@yourdomain.com
```
- Important Notes:
  - Replace your_email@gmail.com and your_email_password with your actual email credentials.
  - For Gmail, ensure you enable "App Passwords" or "Less Secure App Access" in your account settings to use these credentials securely.
  - Adjust EMAIL_NO_REPLY to specify the sender for no-reply emails.

More on Server configuration will be explained below.

Setup Instructions

1. Clone the Repository

git clone <repository-url>
cd auth-flow-fullstack

2. Backend Setup

Navigate to the backend folder:
```
cd backend
```
Install dependencies:
```
npm install
```

Configure Environment Variables

Create .env.development, .env.test, and .env.production files as needed in the backend directory. These files store configuration values for different environments. Below is a detailed explanation of the environment variables used in the project, along with examples: