Added Authentication using firebase (Email, Google, GitHub)

[Prateekiiitg56]

This pull request implements a complete user authentication flow for the GoPredict frontend. It allows users to sign up, sign in (using email/password, Google, or GitHub), and sign out.

This is a foundational feature that enables global state management for logged-in users, which will be necessary for any future user-specific features.

Type of Change

[x] New feature (non-breaking change which adds functionality)

[ ] Bug fix (non-breaking change which fixes an issue)

[ ] Hotfix (a quick fix for a critical issue)

[ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)

[ ] Documentation update

[ ] Chore (routine task, e.g., updating dependencies)

Summary of Changes

This PR introduces several new files and updates existing ones to create a robust and secure authentication experience.

1. New Auth Pages & Routing:

src/pages/SignIn.tsx: A new page for user login.

src/pages/SignUp.tsx: A new page for user registration.

Both pages are styled to match the aesthetic of Home.tsx (animated background, header, and content card).

Both pages include options for email/password, Google Sign-In, and GitHub Sign-In.

2. Firebase Integration:

src/firebase.ts (New File): Initializes and exports the Firebase app and auth services. Note: This requires a .env.local file with Firebase keys to be present.

Updated SignIn.tsx and SignUp.tsx to handle all Firebase auth logic (signInWithEmailAndPassword, createUserWithEmailAndPassword, signInWithPopup, updateProfile).

3. Global State Management (Auth Context):

src/AuthContext.tsx (New File): A new React Context that provides global user and isLoading state to the entire application. It uses Firebase's onAuthStateChanged listener to keep the user state in sync.

src/main.tsx: Updated to wrap the entire component with the AuthProvider.

4. Route Protection & UI Updates:

src/PublicOnlyRoute.tsx (New File): A wrapper component that redirects users who are already logged in away from the /sign-in and /sign-up pages.

src/App.tsx: Updated to use PublicOnlyRoute for the authentication routes.

src/pages/Home.tsx: Updated to use the useAuth() hook. The header now conditionally displays a "Sign In" button or a "Sign Out" button based on the user's login status.

5. Robust Error Handling:

Implemented error handling for common auth issues (e.g., "Invalid email", "Password too weak").

Specifically fixed the auth/account-exists-with-different-credential error. The app now checks the login methods associated with an email and provides a helpful error message to the user (e.g., "This email is already linked with Google. Please sign in using Google.").

6. Build Fixes:

Corrected various import path errors by standardizing on relative paths (../) instead of path aliases (@/) to resolve build-time compilation failures.

How to Test This Change

Setup: Create a frontend/.env.local file and add your Firebase project's configuration keys (e.g., VITE_FIREBASE_API_KEY, etc.).

Install: Run pnpm install to add the firebase package.

Run: Run pnpm dev.

Test 1 (Sign Up):

Navigate to /sign-up.

Create a new account using Email and Password.

Verify: You are redirected to the homepage (/).

Verify: The header now shows a "Sign Out" button.

Test 2 (Sign Out):

Click the "Sign Out" button in the header.

Verify: You are still on the homepage.

Verify: The header now shows a "Sign In" button.

Test 3 (Sign In):

Navigate to /sign-in.

Log in with the account you just created.

Verify: You are redirected to the homepage.

Verify: The header shows "Sign Out".

Test 4 (Route Protection):

While you are logged in, manually type http://localhost:5173/sign-in (or your port) into the URL bar.

Verify: You are immediately redirected back to the homepage (/).

Repeat for /sign-up.

Test 5 (Social Login - Google):

Sign out. Go to /sign-in.

Click "Continue with Google" and sign in.

Verify: You are logged in and redirected to the homepage.

Test 6 (Social Error Handling):

Sign out.

Go to /sign-up.

Try to sign up using GitHub with the same email you just used for Google.

Verify: You should see an error message similar to: "This email is already linked to an account with Google. Please sign in using Google."

[netlify]

👷 Deploy request for gopredict pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	bf5e014

[netlify]

✅ Deploy Preview for storied-fudge-a7595c ready!

Name	Link
🔨 Latest commit	bf5e014
🔍 Latest deploy log	https://app.netlify.com/projects/storied-fudge-a7595c/deploys/690db04b8f63cd0008f69fce
😎 Deploy Preview	https://deploy-preview-50--storied-fudge-a7595c.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[harshitaphadtare]

@Prateekiiitg56 can you share a video with signup and loggin using the email and password / github and google? that would really help

[Prateekiiitg56]

Okayyy!!

[Prateekiiitg56]

Here the video with signup and login using the email and password / github and google

https://drive.google.com/file/d/1T0dhhbx46EEZuEKHcTLU9ASSXR9VoRBL/view?usp=sharing

[harshitaphadtare]

hey @Prateekiiitg56 the ui is perfect i loved how you implemented all the things so seemlessly. but the tests are failing can you please check what the issue is along with that here are some questions i have and few suggestions:

1. does it prevent the user to make predictions if they are not signed up?
2. have you updated the readme files and env sample file since you added firebase into this?
3. for password add hide and show (eye icon) functionality in both signup and login

[Prateekiiitg56]

I noticed that the CI/CD workflow is failing due to a Firebase authentication error (auth/invalid-api-key). This happens because the Firebase API key and other configuration values are not provided in the GitHub Actions environment. The error originates from the firebase.ts file, where the Firebase configuration relies on environment variables.

please carefully go through these screenshots

[Prateekiiitg56]

No it does not prevent the user to make predictions if they are not signed up they can still make prediction but for using profile and trip history they have to sign up

have you updated the readme files and env sample file since you added firebase into this? -- YES

[Prateekiiitg56]

@harshitaphadtare I had added the “hide/show password (eye icon)” feature in both SignUp and Login pages.
But while pushing the changes, GitHub blocked my push because of the serviceAccountKey.json file in the backend 😔
Somehow, that ended up wiping out all my backend files from the branch… I honestly feel so bad right now all that work just vanished in seconds 😞💔
It was just a small update, we can always add it later I just didn’t expect it to cost me the whole backend 🥺
please just merge this PR

[harshitaphadtare]

@Prateekiiitg56 you can revert back to previous commit and make changes again. and can you also make changes to the github workflow. this should include your firebase as well.

[Prateekiiitg56]

"I did, but my files in the backend folder got deleted somehow, and I don't know why. Even after reverting, they're still not coming back. 😔"

[harshitaphadtare]

unfortunately theres no other option for you but to recreat them then

[Prateekiiitg56]

Everything is okay..just show and hide password option is missing 😓

[harshitaphadtare]

@Prateekiiitg56 you can work on it again! since you have already raised a pr before the october end. this pr can be still considered under hacktoberfest if i merge it by nov 7. so please make the changes and commit them.

[harshitaphadtare]

@Prateekiiitg56 is there any update?

[Prateekiiitg56]

@harshitaphadtare yep its almost ready..

[Prateekiiitg56]

@harshitaphadtare its done now

[harshitaphadtare]

@Prateekiiitg56 the eye icon should be inside the password input field. on the right corner.