Project Overview

NASA’s Secrets is a full-stack authentication project demonstrating secure user login, session handling, and protected routes. Users must create an account and authenticate before accessing restricted content, simulating how real-world web applications protect private resources.

This project was built as part of a technical challenge to demonstrate comfort with modern web technologies, databases, and authentication workflows.

GitHub Repository:

https://github.com/Shenabeth/react-authentication-system

Demo Note:

The live version is deployed on Vercel as a frontend preview to demonstrate layout, user flow, and protected routing behavior. Full authentication and database functionality operate correctly ONLY in a local environment, as they are not hosted due to database service limitations.

Sign Up Page

URL:  https://react-authentication-system-demo.vercel.app/signup

GitHub File: ../src/components/SignUp.js

Sign In Page

URL:  https://react-authentication-system-demo.vercel.app/signin

GitHub File: ../src/components/SignIn.js

Authenticated Secure Page

URL:  https://react-authentication-system-demo.vercel.app/securepage

GitHub File: ../src/components/SecurePage.js

1.  Users create an account using a signup form.

2. Credentials are securely processed and stored in a MySQL database.

3. Passwords are hashed before storage.

4. Upon login, a server-side session is created.

5. Protected routes verify authentication status.

6. Unauthorized users are redirected with an error message.

7. Logging out invalidates the session immediately.

Frontend

• React.js

• Client-side routing & protected pages

• Frontend demo deployed on Vercel

Backend

• Node.js + Express

• Session-based authentication

• Password hashing with bcrypt

• REST API architecture

Database

• MySQL

• Structured relational schema for user accounts

•  Hashed passwords (never stored in plain text)

• Server-side session validation

• Protected routes that block unauthenticated access

• Explicit logout that invalidates the session

• Error handling for unauthorized access attempts

This stack was chosen to balance performance, scalability, and real-world relevance:

• React enables fast, dynamic UI updates and clean component structure

• Node.js + Express provides a lightweight, scalable backend

• MySQL ensures reliable relational data storage and is widely used in production systems

All technologies used are open-source and commonly found in professional environments.

GitHub Repository:

https://github.com/Shenabeth/react-authentication-system

The repository includes:

• Backend API logic

• Database connection handling

• Authentication flow

• Environment variable configuration

• Scripts to recreate the database for testing

What This Project Demonstrates:

• Full-stack development (frontend + backend)

• Authentication system design

• Secure credential handling

• Session management

• Database integration

• Deployment across multiple services