feat(auth): add Firebase email/password login/signup flow while keeping Google sign-in#126
feat(auth): add Firebase email/password login/signup flow while keeping Google sign-in#126PanditG4303 wants to merge 3 commits intoruxailab:mainfrom
Conversation
There was a problem hiding this comment.
Pull request overview
Adds a new /auth screen to support Firebase email/password login & signup while preserving Google popup sign-in, and wires basic routing changes to steer users into the new flow.
Changes:
- Added
Auth.vueview with login/signup toggle, validation, loading state, and error messaging. - Added
firebaseAuth.jsservice wrapping Firebase Auth (email/password + Google) and basic user profile persistence to Firestore. - Updated router and toolbar entry points to route users to
/auth.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| src/views/Auth.vue | New combined login/signup UI and Google sign-in entry point |
| src/services/firebaseAuth.js | New Firebase auth + Firestore user-profile helper functions |
| src/router/index.js | Adds /auth route and a navigation guard based on Firebase auth state |
| src/components/general/InvisibleToolbar.vue | Updates login button route to /auth |
| src/components/general/Toolbar.vue | Updates route-name check to align with new Auth route |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| router.beforeEach(async (to, from, next) => { | ||
| if (to.path !== '/' && to.path !== '/auth') { | ||
| next() | ||
| return | ||
| } |
There was a problem hiding this comment.
The navigation guard only runs for '/' and '/auth'. This means unauthenticated users can still directly access '/dashboard' (and other app routes) by entering the URL. Consider marking protected routes (e.g., /dashboard, /calibration/*) with meta.requiresAuth and enforcing auth in the guard, and decide whether '/' (LandingPage) should remain public or be turned into a redirect route instead of being blocked here.
| export const signInWithGoogle = async () => { | ||
| const provider = new firebase.auth.GoogleAuthProvider() | ||
| const result = await firebase.auth().signInWithPopup(provider) | ||
| const user = result.user | ||
|
|
||
| await saveUserProfile(user) | ||
|
|
There was a problem hiding this comment.
signInWithGoogle() awaits saveUserProfile(user). If the Firestore write fails (e.g., missing permissions), this will reject the whole sign-in flow even though the Firebase auth sign-in succeeded. Consider catching/logging profile-save errors and still returning the authenticated user, unless blocking is an explicit requirement.
| validateForm() { | ||
| if (!this.email || !this.password) { | ||
| this.errorMessage = 'Please enter both email and password.' | ||
| return false | ||
| } | ||
|
|
||
| if (this.password.length < 6) { | ||
| this.errorMessage = 'Password must be at least 6 characters long.' | ||
| return false | ||
| } |
There was a problem hiding this comment.
validateForm() checks this.email directly, so whitespace-only input (e.g., ' ') passes validation but then trim() produces an empty email that will fail later with a Firebase error. Trim (and ideally normalize) the email during validation and validate against the trimmed value.
| <v-text-field | ||
| id="auth-password" | ||
| v-model="password" | ||
| label="Password" | ||
| type="password" | ||
| autocomplete="current-password" | ||
| outlined | ||
| dense | ||
| :disabled="loading" | ||
| @keyup.enter="submitAuth" |
There was a problem hiding this comment.
The password field always uses autocomplete="current-password". In signup mode this should be new-password to avoid browser autofill issues and to better match password-manager expectations. Consider binding autocomplete based on isSignup.
| <v-btn text dark to="/" v-if="$route.name != 'Dashboard'"> | ||
| {{ $route.name != 'Login' ? 'Calibration' : 'Home' }} | ||
| {{ $route.name != 'Auth' ? 'Calibration' : 'Home' }} | ||
| </v-btn> |
There was a problem hiding this comment.
On the Auth route this button label changes to 'Home' but it still links to '/'. With the new guard redirecting unauthenticated '/' -> '/auth', clicking it from /auth will just navigate back to /auth (no-op). Either keep '/' publicly accessible, or change this button's target/visibility so it leads somewhere meaningful from /auth.
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Copilot <[email protected]>
Closes #66
Changes
Files Changed
Local Verification
Notes
Firebase credentials were unavailable locally, so full end-to-end authentication against a live Firebase project could not be completed. This PR verifies UI behavior and auth logic integration within the app.
Suggested Screenshots
Please attach:
##Screenshot of Login page
