Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Firebase Sign In #5

Merged
merged 50 commits into from
Jul 23, 2024
Merged

Add Firebase Sign In #5

merged 50 commits into from
Jul 23, 2024

Conversation

arkadiuszbachorski
Copy link
Collaborator

@arkadiuszbachorski arkadiuszbachorski commented Jun 10, 2024

Add Firebase Sign In

♻️ Current situation & Problem

Application has no Firebase integration and Sign In.

⚙️ Release Notes

  • Add Firebase Sign In

📚 Documentation

  • Adds Firebase
  • Adds design-system components
  • Adds Sign-in
  • Adds protection mechanism of routes and redirects

image

✅ Testing

  • Sign-in requires testing, WIP

Code of Conduct & Contributing Guidelines

By submitting creating this pull request, you agree to follow our Code of Conduct and Contributing Guidelines:

Copy link

codecov bot commented Jun 11, 2024

Codecov Report

Attention: Patch coverage is 48.23151% with 161 lines in your changes missing coverage. Please review.

Project coverage is 50.14%. Comparing base (264e653) to head (1cbbedc).

Additional details and impacted files

Impacted file tree graph

@@             Coverage Diff             @@
##             main       #5       +/-   ##
===========================================
- Coverage   61.82%   50.14%   -11.67%     
===========================================
  Files           9       51       +42     
  Lines          55      359      +304     
  Branches       13       51       +38     
===========================================
+ Hits           34      180      +146     
- Misses         20      171      +151     
- Partials        1        8        +7     
Files Coverage Δ
...ges/design-system/src/components/Button/Button.tsx 100.00% <ø> (ø)
...ackages/design-system/src/components/Card/Card.tsx 100.00% <100.00%> (ø)
...ckages/design-system/src/components/Card/index.tsx 100.00% <100.00%> (ø)
...kages/design-system/src/components/Error/Error.tsx 100.00% <100.00%> (ø)
...kages/design-system/src/components/Error/index.tsx 100.00% <100.00%> (ø)
...kages/design-system/src/components/Input/Input.tsx 100.00% <100.00%> (ø)
...kages/design-system/src/components/Input/index.tsx 100.00% <100.00%> (ø)
...kages/design-system/src/components/Label/Label.tsx 100.00% <100.00%> (ø)
...kages/design-system/src/components/Label/index.tsx 100.00% <100.00%> (ø)
...sign-system/src/components/Separator/Separator.tsx 100.00% <100.00%> (ø)
... and 37 more

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 264e653...1cbbedc. Read the comment docs.

@arkadiuszbachorski arkadiuszbachorski marked this pull request as ready for review June 11, 2024 20:41
@arkadiuszbachorski
Copy link
Collaborator Author

This might still update, because we need tests and probably I'll modularize sign-in a bit more, but opening to review as we could handle it as follow-up PRs.

Copy link
Member

@PSchmiedmayer PSchmiedmayer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for working on the feature @arkadiuszbachorski!

I started the project locally, tested it with out dev credentials, and could successfully login using email and password 👍

It might be great to explore if and how we can write a small integration tests that uses the firebase emulator + an automated test to validate the login logic + functionality.

I had some smaller comments throughout the PR and added them to the relevant files. Great job 🚀

app/(dashboard)/page.tsx Outdated Show resolved Hide resolved
app/RegisterWorker.ts Outdated Show resolved Hide resolved
env.ts Outdated Show resolved Hide resolved
messages/en.json Outdated Show resolved Hide resolved
.github/workflows/build-and-test.yml Outdated Show resolved Hide resolved
app/sign-in/SignInForm.tsx Outdated Show resolved Hide resolved
app/sign-in/layout.tsx Outdated Show resolved Hide resolved
packages/design-system/src/forms/Field/Field.tsx Outdated Show resolved Hide resolved
app/sign-in/SignInForm.tsx Outdated Show resolved Hide resolved
@arkadiuszbachorski arkadiuszbachorski mentioned this pull request Jun 17, 2024
1 task
@arkadiuszbachorski
Copy link
Collaborator Author

It might be great to explore if and how we can write a small integration tests that uses the firebase emulator + an automated test to validate the login logic + functionality.

As described in other comments, I've restructured everything to make ir I've added many unit and integration tests. I didn't cover complete flow of sign in + redirect + guards. I think this requires full E2E flow, which is quite time consuming to write and set up, so I'd leave it for now. What do you think?

Could you please re-review the changes?

Copy link
Member

@PSchmiedmayer PSchmiedmayer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for continuing to work in this @arkadiuszbachorski; some great next steps and improvements!

I had some smaller and bigger comments in the PR diff that would be great to be addressed. I can also see them being addressed in smaller follow-up PRs as we start to address the reusability and code separation of some elements.

One main element that I would suggest doing before merging the PR would be testing the Stanford SSO integration using a Firebase deployment (comment further down details why the deployment is failing at this point) to ensure that we can test this properly in a deployed use case before merging the PR. This might mean that we have to disable the sign in check cloud function temporarily (you can do this in the Firebase Authentication setting on firebase by selecting that no function should be run on sign up).

Fell free to merge the PR after you have verified the deployment works + SSO is configured correctly. I have also fixed the codecov setup in #6 & #7 which allows us to get a proper coverage report for this PR as well.
I am fine with a coverage drop for now for this PR and you have admin permissions to merge the PR despite a failed check. I would aim to avoid this in the future and use that as a motivation to continuously build out a reasonable testing coverage as we build out new features or refactor the code base to make it reusable across different projects.

env.ts Outdated
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need to ensure that these variables are available during the deployment outside of the GitHub Actions + Docker setup.
The Firebase setup is using an "automated" & "worry free" deployment and we will need to define these secrets as part of the Firebase App Hosting deployment as well: https://firebase.google.com/docs/app-hosting/configure.

I have tested the deployment and as expected it fails with the missing secrets. Seems like we need to use cloud secrets manager for this.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@PSchmiedmayer I don't have access to Google Secret Manager to modify secret myself with role of "Firebase Admin".

Missing permissions:
  secretmanager.secrets.list

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@arkadiuszbachorski Sorry for the late reply! Just added you as an owner to the Google Cloud project. Just our dev/testing project so feel free to modify it to your needs 👍

modules/firebase/guards.tsx Outdated Show resolved Hide resolved
modules/messages/i18n.ts Outdated Show resolved Hide resolved
modules/messages/translations/en.json Outdated Show resolved Hide resolved
components/AsideEngageLayout/AsideEngageLayout.tsx Outdated Show resolved Hide resolved
authServiceWorker.ts Outdated Show resolved Hide resolved
packages/design-system/src/forms/Field/Field.tsx Outdated Show resolved Hide resolved
@arkadiuszbachorski arkadiuszbachorski force-pushed the arek/add-firebase branch 2 times, most recently from 6877cce to 0f24e25 Compare July 9, 2024 15:11
Copy link
Member

@PSchmiedmayer PSchmiedmayer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank for the improvements here; let me know where I can help to get this across the finish line. As noted on Slack the user accounts seems to be successfully created but the web dashboard doesn't render as planned.

I will also push some additions to the README to detail how to setup Stanford SSO for the Stanford Setup to ensure that things are easy to reproduce for someone else.

apphosting.yaml Outdated
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@arkadiuszbachorski It would be great to add some documentation to the README that links to documentation where to add these secrets & maybe a screenshot of the relevant Google Cloud Console Screen to make it easy for Stanford IT or someone else to setup the system deployment themselves.
We should do the same thing with a link to Google Cloud Firebase Hosting.

@@ -28,7 +30,20 @@ You can run the project using the following command. You will need to install No
npm install
```

1. Start the Next.js Application
2. Setup Firebase Environment Values
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@arkadiuszbachorski I have added some more information about the .env setup here as I updated the README. Might make sense to integrate this with a local Firebase emulator setup & add some default values for this in this repo as we do it for the iOS and other apps.


### Deployment Configuration

...
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added some deployment SSO configuration information. Would be great if you can add some missing elements here about the secrets and the other general deployment information.

@arkadiuszbachorski arkadiuszbachorski merged commit 6fdf440 into main Jul 23, 2024
8 of 10 checks passed
@arkadiuszbachorski arkadiuszbachorski deleted the arek/add-firebase branch July 23, 2024 18:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

2 participants