Problem Statement: The need for a seamless and secure login system for users with varying roles (government, hospital, patient) in health-related platforms.
Goal: Provide a secure, user-friendly authentication flow that ensures different user roles can access relevant data and dashboards.
What it does
OTP-based Authentication: Allows users to log in using their phone number with a one-time password (OTP) verification.
Role-based Access Control: Redirects users to specific dashboards (District Dashboard, Hospital Dashboard, or Patient Dashboard) based on their roles.
Secure and Scalable: Integrates Firebase Authentication, Firestore, and Firebase Storage for a robust, real-time, and scalable solution.
How we built it
Frontend: React.js for building dynamic and responsive interfaces, enhanced with Lottie animations for a smoother user experience.
Backend: Firebase Authentication for OTP-based login, Firestore for data storage, and Firebase Functions for handling logic such as OTP verification.
Role-based Redirection: Firebase Authentication triggers role checks, and users are dynamically redirected based on their role in the system.
UI/UX Design: Tailwind CSS for modern and responsive styling.
Challenges we ran into
OTP Flow Issues: Initially faced issues with OTP verification, especially related to the configuration of Firebase authentication settings (e.g., missing app verification in testing mode).
Role-based Navigation: Ensuring users are accurately redirected based on their roles required additional logic and state management.
Real-time Data Handling: Keeping user data up-to-date in real-time across multiple devices using Firestore presented challenges related to synchronization and performance.
Accomplishments that we're proud of
Seamless Authentication: Successfully implemented OTP-based phone number authentication with Firebase.
Smooth Role-based Redirection: Users are redirected to their respective dashboards (Government, Hospital, Patient) based on their role, streamlining their experience.
Scalability: The architecture is designed for scalability, with Firebase handling authentication, database management, and storage.
Smooth User Experience: Integration of Lottie animations and Tailwind CSS ensures an aesthetically pleasing and responsive UI.
What we learned
Firebase Authentication: Gained hands-on experience with Firebase’s powerful tools for secure authentication and real-time data synchronization.
State Management: Learned to efficiently manage user data using React’s Context API for role-based access control.
Error Handling: Gained insight into handling errors in OTP systems and learned the importance of thorough testing in Firebase’s configuration and security rules.
What's next for Untitled
Expand User Roles: Implement additional user roles and permissions for more granular control over data access.
User Analytics: Integrate Firebase Analytics to gather insights on user behavior and improve engagement.
Enhanced Security Features: Add more layers of security, such as multi-factor authentication (MFA), to further protect sensitive data.
Real-time Features: Expand the real-time capabilities of the app to include live updates in the dashboards and notifications for users.
Log in or sign up for Devpost to join the conversation.