Add Firebase Sign In

.github/workflows/build-and-test.yml

@@ -41,3 +41,12 @@ jobs:
     with:
       dockerComposeFile: docker-compose-development.yml
       testscript: test.sh
+    secrets:
+      ENV_FILE: |
+        NEXT_PUBLIC_FIREBASE_API_KEY='${{ secrets.NEXT_PUBLIC_FIREBASE_API_KEY }}'
+        NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN='${{ secrets.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN }}'
+        NEXT_PUBLIC_FIREBASE_PROJECT_ID='${{ secrets.NEXT_PUBLIC_FIREBASE_PROJECT_ID }}'
+        NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET='${{ secrets.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET }}'
+        NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID='${{ secrets.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID }}'
+        NEXT_PUBLIC_FIREBASE_APP_ID='${{ secrets.NEXT_PUBLIC_FIREBASE_APP_ID }}'
+

.gitignore

@@ -23,6 +23,7 @@
 
 # production
 /build
+/public/authServiceWorker.js
 
 # misc
 .DS_Store

Dockerfile

@@ -32,6 +32,13 @@ COPY . .
 # Uncomment the following line in case you want to disable telemetry during the build.
 ENV NEXT_TELEMETRY_DISABLED 1
 
+ARG NEXT_PUBLIC_FIREBASE_API_KEY
+ARG NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
+ARG NEXT_PUBLIC_FIREBASE_PROJECT_ID
+ARG NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
+ARG NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
+ARG NEXT_PUBLIC_FIREBASE_APP_ID
+
 RUN npm run build
 
 # Production image, copy all the files and run next

app/(dashboard)/SignOutButton.tsx

@@ -0,0 +1,21 @@
+//
+// This source file is part of the Stanford Biodesign Digital Health ENGAGE-HF open-source project
+//
+// SPDX-FileCopyrightText: 2023 Stanford University and the project authors (see CONTRIBUTORS.md)
+//
+// SPDX-License-Identifier: MIT
+//
+'use client'
+import { Button } from '@stanfordbdhg/design-system/components/Button'
+import { auth } from '../../modules/firebase/clientApp'
+
+export const SignOutButton = () => (
+  <Button
+    variant="link"
+    onClick={async () => {
+      await auth.signOut()
+    }}
+  >
+    Sign out
+  </Button>
+)

app/(dashboard)/page.tsx

@@ -0,0 +1,27 @@
+//
+// This source file is part of the Stanford Biodesign Digital Health ENGAGE-HF open-source project
+//
+// SPDX-FileCopyrightText: 2023 Stanford University and the project authors (see CONTRIBUTORS.md)
+//
+// SPDX-License-Identifier: MIT
+//
+import { redirect } from 'next/navigation'
+import { SignOutButton } from './SignOutButton'
+import { getServerApp } from '../../modules/firebase/serverApp'
+import { routes } from '../../modules/routes'
+
+export const dynamic = 'force-dynamic'
+
+const DashboardPage = async () => {
+  const { currentUser } = await getServerApp()
+  if (!currentUser) redirect(routes.signIn)
+
+  return (
+    <div className="grid gap-6 p-10 text-center">
+      <h1 className="text-2xl">Dashboard</h1>
+      <SignOutButton />
+    </div>
+  )
+}
+
+export default DashboardPage

app/RegisterWorker.ts

@@ -0,0 +1,51 @@
+//
+// This source file is part of the Stanford Biodesign Digital Health ENGAGE-HF open-source project
+//
+// SPDX-FileCopyrightText: 2023 Stanford University and the project authors (see CONTRIBUTORS.md)
+//
+// SPDX-License-Identifier: MIT
+//
+'use client'
+import { type User } from '@firebase/auth-types'
+import { onAuthStateChanged } from 'firebase/auth'
+import { useRouter } from 'next/navigation'
+import { useEffect, useState } from 'react'
+import { auth } from '../modules/firebase/clientApp'
+import { firebaseConfig } from '../modules/firebase/config'
+import { routes } from '../modules/routes'
+
+export const RegisterWorker = () => {
+  const router = useRouter()
+  const [user, setUser] = useState<User | null>()
+
+  useEffect(() => {
+    if ('serviceWorker' in navigator) {
+      const serializedFirebaseConfig = encodeURIComponent(
+        JSON.stringify(firebaseConfig),
+      )
+      const serviceWorkerUrl = `/authServiceWorker.js?firebaseConfig=${serializedFirebaseConfig}`
+
+      void navigator.serviceWorker.register(serviceWorkerUrl)
+    }
+  }, [])
+
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, (user) => {
+      // @ts-expect-error Nested methods are not used anyway
+      setUser(user)
+    })
+    return () => unsubscribe()
+  }, [])
+
+  useEffect(() => {
+    // TODO: This is not ideal, results with double redirect. To investigate
+    const isSignIn = window.location.pathname === '/sign-in'
+    if (isSignIn && user) {
+      window.location.assign(routes.home)
+    } else if (!isSignIn && user === null) {
+      window.location.assign(routes.signIn)
+    }
+  }, [router, user])
+
+  return null
+}

app/globals.css

@@ -11,3 +11,29 @@ SPDX-License-Identifier: MIT
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  *::selection {
+    @apply bg-primary/30;
+  }
+
+  body {
+    @apply bg-surface text-foreground;
+  }
+}
+
+@layer components {
+  .focus-ring {
+    @apply ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
+  }
+}
+
+@layer utilities {
+  .flex-center {
+    @apply flex items-center justify-center;
+  }
+
+  .interactive-opacity {
+    @apply focus-ring transition-opacity hover:opacity-60;
+  }
+}

app/layout.tsx

@@ -6,10 +6,13 @@
 // SPDX-License-Identifier: MIT
 //
 import type { Metadata } from 'next'
+import { NextIntlClientProvider } from 'next-intl'
+import { getLocale, getMessages } from 'next-intl/server'
 import type { ReactNode } from 'react'
-import './globals.css'
 import '@stanfordbdhg/design-system/main.css'
 import { themeToCSSVariables, lightTheme } from '@stanfordbdhg/design-system'
+import { RegisterWorker } from './RegisterWorker'
+import './globals.css'
 
 export const metadata: Metadata = {
   title: 'ENGAGE-HF Web Frontend',
@@ -20,18 +23,27 @@ interface RootLayoutProps {
   children: ReactNode
 }
 
-export default function RootLayout({ children }: RootLayoutProps) {
+export const dynamic = 'force-dynamic'
+
+export default async function RootLayout({ children }: RootLayoutProps) {
+  const locale = await getLocale()
+  const messages = await getMessages()
+
   return (
-    <html lang="en">
+    <html lang={locale}>
       <head>
         <style>
           {`
           :root { ${themeToCSSVariables(lightTheme)} }
           `}
         </style>
       </head>
-
-      <body>{children}</body>
+      <body>
+        <RegisterWorker />
+        <NextIntlClientProvider messages={messages}>
+          {children}
+        </NextIntlClientProvider>
+      </body>
     </html>
   )
 }

app/sign-in/SignInForm.tsx

@@ -0,0 +1,88 @@
+//
+// This source file is part of the Stanford Biodesign Digital Health ENGAGE-HF open-source project
+//
+// SPDX-FileCopyrightText: 2023 Stanford University and the project authors (see CONTRIBUTORS.md)
+//
+// SPDX-License-Identifier: MIT
+//
+'use client'
+import { signInWithEmailAndPassword, signInWithPopup } from 'firebase/auth'
+import { useTranslations } from 'next-intl'
+import { z } from 'zod'
+import { Button } from '@stanfordbdhg/design-system/components/Button'
+import { Input } from '@stanfordbdhg/design-system/components/Input'
+import {
+  Separator,
+  SeparatorText,
+} from '@stanfordbdhg/design-system/components/Separator'
+import { Field } from '@stanfordbdhg/design-system/forms/Field'
+import { useForm } from '@stanfordbdhg/design-system/forms/useForm'
+import { auth, authProvider } from '../../modules/firebase/clientApp'
+
+const formSchema = z.object({
+  email: z.string().min(1, 'Email is required'),
+  password: z.string().min(1, 'Password is required'),
+})
+
+export const SignInForm = () => {
+  const t = useTranslations()
+  const form = useForm({
+    formSchema,
+    defaultValues: { email: '', password: '' },
+  })
+
+  const handleSubmit = form.handleSubmit(async ({ email, password }) => {
+    try {
+      await signInWithEmailAndPassword(auth, email, password)
+    } catch (error) {
+      if (
+        error instanceof Error &&
+        'code' in error &&
+        error.code === 'auth/invalid-credential'
+      ) {
+        form.setFormError(t('signIn_formError_invalidCredentials'))
+      } else {
+        form.setFormError(t('signIn_formError_unknown'))
+      }
+    }
+  })
+
+  return (
+    <div className="mx-auto grid w-[350px] gap-4">
+      <h1 className="mb-4 text-center text-2xl font-bold">{t('signIn')}</h1>
+      <Button
+        variant="outlineBg"
+        onClick={() => signInWithPopup(auth, authProvider.apple)}
+      >
+        {t('signIn_apple')}
+      </Button>
+      <Button
+        variant="outlineBg"
+        onClick={() => signInWithPopup(auth, authProvider.stanford)}
+      >
+        {t('signIn_stanford')}
+      </Button>
+      <Separator className="my-5">
+        <SeparatorText>{t('signIn_separator')}</SeparatorText>
+      </Separator>
+      <form className="grid" onSubmit={handleSubmit}>
+        <Field
+          control={form.control}
+          name="email"
+          label={t('signIn_field_email')}
+          render={({ field }) => (
+            <Input type="email" placeholder="[email protected]" {...field} />
+          )}
+        />
+        <Field
+          control={form.control}
+          name="password"
+          label={t('signIn_field_password')}
+          render={({ field }) => <Input type="password" {...field} />}
+          error={form.formError}
+        />
+        <Button type="submit">{t('signIn_submit')}</Button>
+      </form>
+    </div>
+  )
+}