Added Firebase Hosting to simplify OAuth redirect

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "lifecal-backend"
+  }
+}

.github/workflows/firebase-hosting-merge.yml

@@ -0,0 +1,20 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on merge
+'on':
+  push:
+    branches:
+      - main
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - run: npm run build
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_LIFECAL_BACKEND }}'
+          channelId: live
+          projectId: lifecal-backend

.github/workflows/firebase-hosting-pull-request.yml

@@ -0,0 +1,21 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on PR
+'on': pull_request
+permissions:
+  checks: write
+  contents: read
+  pull-requests: write
+jobs:
+  build_and_preview:
+    if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - run: npm run build
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_LIFECAL_BACKEND }}'
+          projectId: lifecal-backend

firebase.json

@@ -0,0 +1,16 @@
+{
+  "hosting": {
+    "public": "dist",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}

src/Login.tsx

@@ -1,16 +1,17 @@
 import { z } from "zod"
 import { useState } from "react"
-// import { IconBrandGoogle, IconBrandGithub } from "@tabler/icons-react"
+import { IconBrandGoogle, IconBrandGithub } from "@tabler/icons-react"
 import { useForm } from "@mantine/form"
 import {
     TextInput,
     PasswordInput,
     Group,
     Button,
     Box,
-    // ButtonProps,
+    ButtonProps,
     Stack,
     Title,
+    Divider,
 } from "@mantine/core"
 
 import { useUserStore } from "./user"
@@ -19,7 +20,7 @@ import TextLoader from "./TextLoader"
 export const Login = () => {
     const { login } = useUserStore()
     const [loggingIn, setLoggingIn] = useState(false)
-    // const valEmailRegex = (email: string): boolean => { return (/^\S+@\S+$/.test(email)) }
+    // const valEmailRegex = (email:    string): boolean => { return (/^\S+@\S+$/.test(email)) }
     const valEmailZod = (email: string): boolean => {
         return z.string().email().safeParse(email).success
     }
@@ -48,7 +49,7 @@ export const Login = () => {
             <Title order={2} mb={20}>
                 Login or register
             </Title>
-            {/* <Group grow mb="md" mt="md">
+            <Group grow mb="md" mt="md">
                 <GoogleButton
                     radius="md"
                     onClick={() => login("google", undefined)}
@@ -67,7 +68,7 @@ export const Login = () => {
                 label="Or continue with email"
                 labelPosition="center"
                 my="lg"
-            /> */}
+            />
 
             <form onSubmit={form.onSubmit(onSubmitEmailPasswordLogin)}>
                 <Stack>
@@ -105,14 +106,14 @@ export const Login = () => {
     )
 }
 
-// function GoogleButton(
-//     props: ButtonProps & React.ComponentPropsWithoutRef<"button">
-// ) {
-//     return <Button leftSection={<IconBrandGoogle />} {...props} />
-// }
+function GoogleButton(
+    props: ButtonProps & React.ComponentPropsWithoutRef<"button">
+) {
+    return <Button leftSection={<IconBrandGoogle />} {...props} />
+}
 
-// function GithubButton(
-//     props: ButtonProps & React.ComponentPropsWithoutRef<"button">
-// ) {
-//     return <Button leftSection={<IconBrandGithub />} {...props} />
-// }
+function GithubButton(
+    props: ButtonProps & React.ComponentPropsWithoutRef<"button">
+) {
+    return <Button leftSection={<IconBrandGithub />} {...props} />
+}

src/user.ts

@@ -8,9 +8,9 @@ import {
     signInWithEmailAndPassword,
     createUserWithEmailAndPassword,
     signOut,
-    // signInWithPopup,
-    // GithubAuthProvider,
-    // GoogleAuthProvider,
+    signInWithPopup,
+    GithubAuthProvider,
+    GoogleAuthProvider,
     // browserPopupRedirectResolver,
 } from "firebase/auth"
 import { formatISO } from "date-fns"
@@ -145,20 +145,20 @@ export const useUserStore = create<UserState>()(
                                 data.password
                             )
                         }
-                    // } else if (authMethod === "github") {
-                    //     await signInWithPopup(
-                    //         auth,
-                    //         new GithubAuthProvider().addScope("read:user")
-                    //         // browserPopupRedirectResolver
-                    //     )
-                    // } else if (authMethod === "google") {
-                    //     await signInWithPopup(
-                    //         auth,
-                    //         new GoogleAuthProvider().addScope(
-                    //             "https://www.googleapis.com/auth/userinfo.email"
-                    //         )
-                    //         // browserPopupRedirectResolver
-                    //     )
+                    } else if (authMethod === "github") {
+                        await signInWithPopup(
+                            auth,
+                            new GithubAuthProvider().addScope("read:user")
+                            // browserPopupRedirectResolver
+                        )
+                    } else if (authMethod === "google") {
+                        await signInWithPopup(
+                            auth,
+                            new GoogleAuthProvider().addScope(
+                                "https://www.googleapis.com/auth/userinfo.email"
+                            )
+                            // browserPopupRedirectResolver
+                        )
                     } else {
                         console.error("Invalid auth method specified")
                         return Promise.reject(FetchStatus.Error)