{"id":28220110,"url":"https://github.com/alexisrodriguezcs/biometricauthenticationsystem","last_synced_at":"2026-04-06T08:01:21.291Z","repository":{"id":203809611,"uuid":"709982497","full_name":"AlexisRodriguezCS/BiometricAuthenticationSystem","owner":"AlexisRodriguezCS","description":"Web application developed using HTML, CSS, JavaScript, Python, Flask, and PostgreSQL, utilizes biometrics and the face-api.js library for user authentication.","archived":false,"fork":false,"pushed_at":"2024-08-11T07:46:07.000Z","size":6239,"stargazers_count":9,"open_issues_count":1,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-10T03:06:59.027Z","etag":null,"topics":["css","face-api","face-api-js","flask","html","javascript","postgresql","python"],"latest_commit_sha":null,"homepage":"https://biometricauthenticationsystem.netlify.app/","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AlexisRodriguezCS.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-10-25T19:07:44.000Z","updated_at":"2025-04-27T05:11:25.000Z","dependencies_parsed_at":null,"dependency_job_id":"87223ad9-6e2c-46ee-932f-8ab4ce4b7db1","html_url":"https://github.com/AlexisRodriguezCS/BiometricAuthenticationSystem","commit_stats":null,"previous_names":["alexisrodriguezcs/biometricauthenticationsystem"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AlexisRodriguezCS/BiometricAuthenticationSystem","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlexisRodriguezCS%2FBiometricAuthenticationSystem","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlexisRodriguezCS%2FBiometricAuthenticationSystem/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlexisRodriguezCS%2FBiometricAuthenticationSystem/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlexisRodriguezCS%2FBiometricAuthenticationSystem/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AlexisRodriguezCS","download_url":"https://codeload.github.com/AlexisRodriguezCS/BiometricAuthenticationSystem/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlexisRodriguezCS%2FBiometricAuthenticationSystem/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31464101,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-05T21:22:52.476Z","status":"online","status_checked_at":"2026-04-06T02:00:07.287Z","response_time":112,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","face-api","face-api-js","flask","html","javascript","postgresql","python"],"created_at":"2025-05-18T04:14:31.824Z","updated_at":"2026-04-06T08:01:21.281Z","avatar_url":"https://github.com/AlexisRodriguezCS.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ca name=\"readme-top\"\u003e\u003c/a\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/AlexisRodriguezCS/BiometricAuthenticationSystem/main/images/biometric.jpg\" alt=\"Grid\" style=\"display:block;margin:auto;\" height=\"500\"\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003eBiometric Authentication System\u003c/h1\u003e\n\n\u003c!-- TABLE OF CONTENTS --\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#about\"\u003eAbout The Project\u003c/a\u003e •\n  \u003ca href=\"#project-structure\"\u003eProject Structure\u003c/a\u003e •\n  \u003ca href=\"#getting-started\"\u003eGetting Started\u003c/a\u003e •\n  \u003ca href=\"#usage\"\u003eUsage\u003c/a\u003e •\n  \u003ca href=\"#contact\"\u003eContact\u003c/a\u003e •\n  \u003ca href=\"#credit\"\u003eCredit\u003c/a\u003e\n\u003c/p\u003e\n\n\u003c!-- ABOUT THE PROJECT --\u003e\n\n\u003ca name=\"about\"\u003e\u003c/a\u003e\n\n## About The Project\n\n**Welcome to the Biometric Authentication System project!** This full-stack web application combines HTML, CSS, and JavaScript on the front-end, featuring the remarkable [face-api.js](https://github.com/justadudewhohacks/face-api.js) library for advanced facial recognition. On the back-end, we've harnessed the power of Python, Flask, PostgreSQL, JWT (JSON Web Tokens), and bcrypt to craft a robust and secure authentication system.\n\n### Overview\n\nThis project's primary goal is to deliver a secure and user-friendly authentication system that harmoniously integrates traditional username and password credentials with state-of-the-art biometric technology. Users can easily register by providing their email, username, and a password. For those equipped with a webcam, we provide an option to employ their facial features as a biometric identifier. The magic of face recognition is enabled through the integration of the face-api.js library.\n\nOnce registered, users can conveniently log in using either their email/username and password or their previously scanned face. We've also implemented an account deletion feature, which removes all associated data.\n\nThis project is designed for demonstration purposes, and we do not engage in the sale or sharing of biometric data.\n\n### Hosting\n\nThe frontend of the application is hosted on Netlify, while the backend is deployed on Render.\n**You can access the live website at this link:\n\u003ca href=\"https://biometricauthenticationsystem.netlify.app/\" target=\"_blank\"\u003eBiometric Authentication System\u003c/a\u003e**\n\n\u003cmark\u003e**Please note that the backend, hosted on Render's free tier for demonstration purposes, may take a minute or two to start up. \u003cins\u003eHowever, once the backend is up and running, the website will function as intended.**\u003c/ins\u003e\u003c/mark\u003e\n\n### Key Technologies Used\n\n- Python: The primary programming language used to develop the Flask backend.\n- Flask: A micro web framework for building the backend of the application.\n- SQLAlchemy: Used for database operations to interact with the PostgreSQL database.\n- PostgreSQL: A powerful open-source relational database management system.\n- JWT (JSON Web Tokens): Utilized for user authentication and token-based security.\n- bcrypt: A library for hashing passwords securely.\n- Face-api.js: A JavaScript library for face detection and recognition.\n- Webcam API: For accessing and capturing video from the user's webcam.\n- HTML and CSS: For creating the user interface of the website.\n- JavaScript: For client-side scripting to handle user interactions.\n- Fetch API: Used for making asynchronous requests to the backend.\n- CORS (Cross-Origin Resource Sharing): Used for enabling cross-origin requests.\n- Bootstrap MDB (Material Design for Bootstrap): A framework for building responsive and visually appealing user interfaces.\n- Google Fonts: For custom fonts and typography on the website.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- GETTING STARTED --\u003e\n\n\u003ca name=\"project-structure\"\u003e\u003c/a\u003e\n\n## Project Structure\n\n### Front-End\n\nThe front-end of the application is organized into the following directories:\n\n- `\\client`: Contains the main client-side web application code.\n  - `\\face-api`: Houses JavaScript code for face recognition using TensorFlow.js.\n  - `\\mdb`: Utilizes Material Design for Bootstrap 5 and Vanilla JavaScript for creating the user interface.\n\n### Components\n\n| File              | Description                                                        |\n| ----------------- | ------------------------------------------------------------------ |\n| face-scan.html    | A page to capture biometric data using a webcam.                   |\n| index.html        | The main page with left and right containers for content.          |\n| login.html        | A log-in form for returning users.                                 |\n| signup.html       | A sign-up form for registering new users.                          |\n| user-profile.html | A user profile page displaying details.                            |\n| face-scan.css     | Styles for the face-scan.html page.                                |\n| index.css         | Styles for the main index.html page.                               |\n| user-profile.css  | Styles for the user-profile.html page.                             |\n| face-scan.js      | Handles webcam access and biometric authentication.                |\n| index.js          | Manages user authentication, content loading, and backend startup. |\n| form.js           | Manages user registration and login processes.                     |\n| user-profile.js   | Manages profile details, and token handling.                       |\n\n### Back-End\n\nThe back-end of the application is organized into the following directories:\n\n- `server` Folder:\n  - `database:` Database configurations and migration scripts.\n  - `migrations`: Database schema evolution scripts.\n  - `models`: Database model definitions.\n  - `routes`: API route definitions and controllers.\n  - `app.py`: Main Flask application configuration.\n  - `requirements.txt`: Project dependencies list.\n\n### Components\n\n| File             | Description                                                        |\n| ---------------- | ------------------------------------------------------------------ |\n| db.py            | Database Configuration using Flask-SQLAlchemy.                     |\n| models/user.py   | User Model for representing registered users.                      |\n| routes/user.py   | User Routes for various user-related functionality.                |\n| app.py           | Flask Application Configuration with initialized extensions.       |\n| requirements.txt | List of Python packages and versions required for the application. |\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- GETTING STARTED --\u003e\n\n\u003ca name=\"getting-started\"\u003e\u003c/a\u003e\n\n## Getting Started\n\nTo access the online hosted version of the project, click [here](https://biometricauthenticationsystem.netlify.app/).\n\nTo set up a project locally, follow these simple steps.\n\n### Prerequisites\n\n_Software I used to run the program._\n\n- [Visusal Studio Code](https://code.visualstudio.com/)\n\n- [Python](https://www.python.org/downloads/)\n\n- [PostgreSQL](https://www.postgresql.org/download/)\n\n- [pgAdmin 4](https://www.pgadmin.org/download/pgadmin-4-windows/)\n\n- [Git](https://git-scm.com/)\n\n- [Postman](https://www.postman.com/downloads/)\n\n- [Live Sever](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)\n\n### Installation\n\n_Here's how to install and set up the program._\n\nFrom your command line:\n\n```bash\n# Clone this repository\n$ git clone https://github.com/AlexisRodriguezCS/BiometricAuthenticationSystem.git\n\n# Go into the repository\n$ cd BiometricAuthenticationSystem\n\n# Right-click on the HTML file (index.html)\n$ Open with Live Server.\n\n# Go into the repository\n$ cd server\n\n# Create a virtual environment\n$ python -m venv venv\n\n# Activate the virtual environment\n$ venv\\Scripts\\activate\n\n# Install the Python packages listed in a requirements.txt\n$ pip install -r requirements.txt\n\n# Run your Flask app\n$ python app.py\n```\n\n```bash\n# Flask app will start and should display something like this:\n$ * Running on http://127.0.0.1:5000/\n```\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- USAGE --\u003e\n\n\u003ca name=\"usage\"\u003e\u003c/a\u003e\n\n## Usage\n\n1. Visit the [Biometric Authentication System Website](https://biometricauthenticationsystem.netlify.app/).\n2. Wait for the backend to start. This may take a minute or two, so please be patient.\n\n### New Users\n\n1. On the website, you can create an account by following these steps:\n   - Click on \"Register\" link.\n   - Provide your email, a username, and a secure password.\n2. Grant the necessary permissions for web access in your browser.\n3. Ensure your webcam is active and select the correct camera source.\n4. Follow the on-screen instructions to scan your face accurately.\n5. Click the \"Start Scan\" button to initiate the face scan.\n6. Once the face scan is completed, you can use it for authentication.\n\n### Returning Users\n\n1. If you're a returning user, go to the login form on the website.\n2. Provide either your email or username, along with your password to log in.\n3. Alternatively, if you have previously scanned your face, you can use it for authentication.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- CONTACT --\u003e\n\n\u003ca name=\"contact\"\u003e\u003c/a\u003e\n\n## Contact\n\nAlexis Rodriguez - [LinkedIn](https://www.linkedin.com/in/alexisrodriguezcs/) - alexisrodriguezdev@gmail.com\n\nProject Link: [https://github.com/AlexisRodriguezCS/BiometricAuthenticationSystem.git](https://github.com/AlexisRodriguezCS/BiometricAuthenticationSystem.git)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003ca name=\"credit\"\u003e\u003c/a\u003e\n\n## Credits\n\n[face-api.js](https://github.com/justadudewhohacks/face-api.js) - The face recognition library used in this project.\n\n[Material Design for Bootstrap 5](https://mdbootstrap.com/) - Framework for building responsive and visually appealing user interfaces.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexisrodriguezcs%2Fbiometricauthenticationsystem","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexisrodriguezcs%2Fbiometricauthenticationsystem","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexisrodriguezcs%2Fbiometricauthenticationsystem/lists"}