Set up login page

[wmiq84]

Changes

• Setup Firebase login flow, with boilerplate borrowed from Veteran Sisters project
• Added the respective failure and success notification components
• When committing, I noticed that the secret-scan was scanning and flagging its own file, so I added a .gitignore file to fix this issue
• Adjust page.module.css and page.tsx to fit the Figma design
• Remove sign-up option
• On failure notification is modified to fit Figma design of red box and text
• Only allow

Authorization

• Backend: set up the backend to verify login tokens from the frontend using Firebase. Now, the backend can check if a user is actually logged in before letting them access certain endpoints - only authenticated users can reach protected routes.
  • backend/src/firebase/admin.ts: Initializes Firebase Admin SDK using service account from environment variable
  • backend/src/middleware/auth.ts: Exports verifyToken middleware function, extracts Bearer token from Authorization header, verifies token using Firebase Admin auth.verifyIdToken(), attaches user info (uid, email) to request object.
  • backend/src/app.ts: Added express.json() middleware, imported Firebase admin, and added example public route and protected route.
• Frontend: checks every page request, and if you don't have a login cookie, it automatically redirects you to the login page. Only the login page itself is accessible without being logged in.
  • frontend/src/middleware.ts

Testing

• For testing, use email: tsehomestart@gmail.com and password: homestart999

• Screenshot below confirms authentication works (successful login currently redirects to home page)

• updated UI screenshots of correct password and invalid password:

• UI on phone:

Testing

To test middleware, login after being redirected to the login page, at which point you should be able to view other routes like "/". You can test again on an incognito tab.

Todo

• Logout button that removes cookie added on login

[nakazawak]

Everything lgtm, hopefully nothing breaks lol🤞

[nakazawak]

When running the frontend on this branch, I hit Missing environment variables: NEXT_PUBLIC_FIREBASE. I couldn’t find setup instructions or a .env.example in the repo. After I receive the env variable I will test the log in and follw up on whether everything is good.

[nakazawak]

Okay I just tested it out and the logic seems to be working as described in the documentation. Looks fire.

[navyaa31]

Looks great! Great job on the responsive design.

I used Michael's email and the pw test1234 to log in, but can we change it to the home start email so that everyone can log in and test the reset feature?

Also, could you create a middleware.ts so that an unauthenticated user isn't able to access any other routes, and redirect them to the log in page

[wmiq84]

Just updated the login details to user: tsehomestart@gmail.com and password: homestart999

[CharlieSuarezRobles]

Everything seems fine to me. There's just a small bug regarding the eye functionality in the login. You can see it in the comment down below.