Feat: Add simple localStorage login and signup page#95
Open
Prateekiiitg56 wants to merge 2 commits intoBDutta18:mainfrom
Open
Feat: Add simple localStorage login and signup page#95Prateekiiitg56 wants to merge 2 commits intoBDutta18:mainfrom
Prateekiiitg56 wants to merge 2 commits intoBDutta18:mainfrom
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Overview
This pull request resolves the persistent configuration issues with external authentication providers (Firebase/Auth0) by replacing them with a simple, self-contained, and reliable client-side authentication system using the browser's localStorage.
This change removes all external dependencies and API key requirements for the login functionality, ensuring the feature works immediately without complex setup.
Problem
The previous implementation relied on Firebase, which required contributors to set up a project, enable services, and manage API keys. This led to several configuration errors (auth/api-key-not-valid, auth/unauthorized-domain) that blocked progress and created a difficult onboarding experience for new contributors.
Solution
To eliminate these issues, this PR introduces a mock authentication flow that simulates a real user session using localStorage.
No External Dependencies: The login system now runs entirely in the browser, with no need for Firebase, Auth0, or any other external service.
Error-Free Setup: Contributors can run the project and test the login flow without any configuration.
Clean User Experience: The UI flow remains professional. Users are directed to a dedicated login page and see their profile information on the main page after logging in.
Key Changes
New login.html:
Created a new, all-in-one login.html file that is completely self-contained.
It includes a themed login/signup form with inline CSS and JavaScript.
The script handles both "Login" and "Sign Up" actions by saving a user object to localStorage.
Updated index.html:
The main page now contains an inline <script> that checks localStorage on page load.
If a loggedInUser object is found, it dynamically displays a welcome message and a "Logout" button.
If no user is found, it displays the "Login" button.
The logout button simply removes the user object from localStorage and reloads the page.
Updated styles.css:
Added a few simple styles to ensure the user profile and logout button in the navigation bar are styled correctly.
Removed Obsolete Files:
The previous auth.js, login.js, and main-auth.js files are no longer needed and can be deleted.
How to Test
Pull down this branch and open the index.html file.
Verify that the "Login" button is visible in the navigation bar.
Click the "Login" button. You should be redirected to the new login.html page.
Enter any email and password and click the "Sign Up" button.
Verify that you are redirected back to index.html.
The navigation bar should now display a "Welcome, [username]!" message and a "Logout" button.
Click the "Logout" button.
The page should refresh, and the "Login" button should reappear.
Click "Login" again, enter the same credentials, and click the "Login" button to confirm the login flow also works.
This new implementation provides a seamless and functional authentication experience that is easy for everyone to use and maintain.