Authify is a simple and secure full-stack authentication web application built with the MERN stack (MongoDB, Express.js, React, Node.js). It allows users to register, log in, and manage their profiles effortlessly, with modern security standards and a clean user interface.
- User registration and login with secure authentication
- Login with Google account via Firebase
- Profile management (update username, email, password)
- Full-stack MERN architecture for scalable and responsive design
- Password hashing with bcrypt for security
- JWT-based authentication for session management
- Responsive frontend built with React and Tailwind CSS
Home Page
SignIn Page
SignUp Page
Profile Page
- Frontend: React, Tailwind CSS
- Backend: Node.js, Express.js
- Database: MongoDB
- Authentication: JWT, bcrypt, Firebase Authentication (Google Sign-In)
- git clone https://github.com/your-username/Authify.git
- cd mern-crud-auth
Backend:
- cd backend
- npm install
Frontend:
- cd ../frontend
- npm install
Create a .env file in the backend folder:
PORT=5000
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_secret_key
FIREBASE_API_KEY=your_firebase_api_key
(You can get these values from your Firebase project settings.)
Backend:
npm run dev
Frontend:
npm run dev
Your app should now be running at http://localhost:5173 (or Vite default port).
- Go to Firebase Console and create a project.
- Enable Google Authentication in the Authentication section.
- Copy Firebase config keys into your
.envfile. - The frontend automatically handles sign-in with Google using Firebase SDK.
mern-crud-auth/ │ ├─ backend/ │ ├─ models/ │ ├─ routes/ │ ├─ controllers/ │ └─ server.js │ | ├─ frontend/ # React frontend │ ├─ src/ │ │ ├─ components/ │ │ ├─ pages/ │ │ └─ App.jsx │ └─ index.css │ | └─ README.md
(Add link if deployed)
e.g., https://authify.onrender.com
This version highlights Firebase + Google Sign-In, and guides the user on how to set it up.