Client authentication hookup & navbar

[kevy-kev]

Changes

Authentication

• Uses the Firebase JavaScript SDK to authenticate users
• Sign in, sign up, password recovery implemented for email + password
• Google sign in implemented
• Authentication service is initialized and state is stored in the AuthProvider React context - access this with useContext(AuthContext)
• All the credentials for initializing Firebase auth are on the client-side, which the docs say is the norm. Tried to put them in a .env in case we feel like having different Firebase environments in the future, but spent a lot of time scratching my head on how to securely pass a .env file into our Docker container using our current build pipeline. So I'm just keeping them in the client side for now

Firebase emulator

• Allows for testing authentication in local development without tampering with live data
• When NODE_ENV=development (should be the default when running npm run dev), the auth service will attempt to connect to the emulator
• Run emulator first before running the web app in development so it can connect! Use npm run emulate - you can then access the Firebase emulator GUI from the link

Navbar

• Added navbar with logout button and links (most links 404 right now because the pages don't exist)

Preview

https://github.com/Legend-Mama/legend-mama/assets/113942748/61f223dc-f95a-4ce5-9edd-ae8ceac81597

Known issues

• User nickname doesn't load when redirected to tavern page after signup
  • Tavern page is just placeholder for now so will be revisited and can be fixed then
• Google login requires manual whitelisting for each Cloud Run deployment
  • OAuth doesn't accept unknown domains for security reasons - because of this, preview deployments must be manually whitelisted at the moment at https://console.firebase.google.com/u/0/project/legend-mama/authentication/settings

[github-actions[bot]]

Preview Deployment

Your preview deployment is hosted at: ~~ :sparkles: :sparkles: ~~ This preview deployment has been deleted after the PR was closed

[kevy-kev]

Great work! I was able to sign up and sign in using Google and the email/password combination. I wasn't able to get an email for password recovery for the account I signed up with a email/password. Not sure if this is implemented yet, but I like the dialog!

@megw-school I was able to get the password reset for both my gmail and oregonstate.edu accounts. Is the email perhaps being sent to your junk mail?

[kevy-kev]

Updates

• Fix: user nickname not updated by the time they reach tavern page
  • Fixed the .then chain to correctly wait for updateProfile() to finish before redirecting

https://github.com/Legend-Mama/legend-mama/assets/113942748/b771b7a6-755c-4f20-b013-a89ab93e6149

• Added loading state for login/signup buttons so user knows it's working and can't spam the button

https://github.com/Legend-Mama/legend-mama/assets/113942748/6e0dff3d-7eba-42fd-876b-455b9abfc453