feat: supabase auth

functions/src/supabaseSync/index.ts

@@ -10,16 +10,6 @@ import { IUser } from 'oa-shared'
  * Side-effects to be carried out on various question updates, namely:
  * - update the _createdBy user stats with the question id
  *********************************************************************/
-export const supabaseProfileCreate = functions
-  .runWith({
-    memory: '512MB',
-    secrets: ['SUPABASE_API_URL', 'SUPABASE_API_KEY', 'TENANT_ID'],
-  })
-  .firestore.document(`${DB_ENDPOINTS.users}/{id}`)
-  .onCreate(async (docSnapshot, _) => {
-    await insertOrUpdateProfile(docSnapshot)
-  })
-
 export const supabaseProfileUpdate = functions
   .runWith({
     memory: '512MB',
@@ -45,16 +35,6 @@ export const supabaseProfileUpdate = functions
     }
   })
 
-export const supabaseProfileDelete = functions
-  .runWith({
-    memory: '512MB',
-    secrets: ['SUPABASE_API_URL', 'SUPABASE_API_KEY', 'TENANT_ID'],
-  })
-  .firestore.document(`${DB_ENDPOINTS.users}/{id}`)
-  .onDelete(async (docSnapshot, _) => {
-    await deleteProfile(docSnapshot)
-  })
-
 async function insertOrUpdateProfile(
   docSnapshot: firestore.QueryDocumentSnapshot,
 ) {
@@ -64,7 +44,7 @@ async function insertOrUpdateProfile(
   const profileRequest = await client
     .from('profiles')
     .select()
-    .eq('firebase_auth_id', user._authID)
+    .eq('username', user.userName)
     .limit(1)
 
   if (profileRequest.data?.at(0)) {
@@ -78,7 +58,7 @@ async function insertOrUpdateProfile(
         country: user.location?.countryCode || null,
         roles: user.userRoles,
       })
-      .eq('firebase_auth_id', user._authID)
+      .eq('username', user.userName)
 
     if (error) {
       functions.logger.log({ ...error })
@@ -88,7 +68,6 @@ async function insertOrUpdateProfile(
     const { error } = await client
       .from('profiles')
       .insert({
-        firebase_auth_id: user._authID,
         display_name: user.displayName,
         is_verified: user.verified,
         photo_url: user.userImage?.downloadUrl || null,
@@ -97,22 +76,14 @@ async function insertOrUpdateProfile(
         username: user.userName,
         roles: user.userRoles,
       })
-      .eq('firebase_auth_id', user._authID)
+      .eq('username', user.userName)
 
     if (error) {
       functions.logger.log({ ...error })
     }
   }
 }
 
-async function deleteProfile(docSnapshot: firestore.QueryDocumentSnapshot) {
-  const { client } = createSupabaseServerClient()
-
-  const user = docSnapshot.data() as IUser
-
-  await client.from('profiles').delete().eq('firebase_auth_id', user._authID)
-}
-
 function arraysAreEqual(arr1: string[], arr2: string[]) {
   // Check if lengths are different
   if (arr1.length !== arr2.length) {

packages/components/src/CreateComment/CreateComment.tsx

@@ -150,7 +150,7 @@ const LoginPrompt = () => {
     <Box sx={{ padding: [3, 4] }}>
       <Text data-cy="comments-login-prompt">
         <Link
-          to="/sign-in"
+          to={'/sign-in?returnUrl=' + encodeURIComponent(location.pathname)}
           style={{
             textDecoration: 'underline',
             color: 'inherit',

packages/components/src/FollowButton/FollowButton.tsx

@@ -34,7 +34,13 @@ export const FollowButton = (props: IProps) => {
           py: 0,
           ...sx,
         }}
-        onClick={() => (isLoggedIn ? onFollowClick() : navigate('/sign-in'))}
+        onClick={() =>
+          isLoggedIn
+            ? onFollowClick()
+            : navigate(
+                '/sign-in?returnUrl=' + encodeURIComponent(location.pathname),
+              )
+        }
       >
         {hasUserSubscribed ? 'Following' : 'Follow'}
       </Button>

packages/components/src/UsefulStatsButton/UsefulStatsButton.tsx

@@ -40,7 +40,11 @@ export const UsefulStatsButton = (props: IProps) => {
         data-tooltip-content={props.isLoggedIn ? '' : 'Login to add your vote'}
         data-cy={props.isLoggedIn ? 'vote-useful' : 'vote-useful-redirect'}
         onClick={() =>
-          props.isLoggedIn ? handleUsefulClick() : navigate('/sign-in')
+          props.isLoggedIn
+            ? handleUsefulClick()
+            : navigate(
+                '/sign-in?returnUrl=' + encodeURIComponent(location.pathname),
+              )
         }
         disabled={disabled}
         sx={{

src/common/Alerts/AlertProfileVerification.tsx

@@ -33,7 +33,8 @@ export const AlertProfileVerification = () => {
 
     if (!isVerificationSuccessful) {
       try {
-        await userStore.sendEmailVerification()
+        // TODO
+        // await userStore.sendEmailVerification()
         setVerificationState('sent')
       } catch (error) {
         setVerificationState('error')

src/common/UserAction.tsx

@@ -1,6 +1,5 @@
-import { observer } from 'mobx-react-lite'
-
-import { useCommonStores } from './hooks/useCommonStores'
+import { useContext } from 'react'
+import { SessionContext } from 'src/pages/common/SessionContext'
 
 interface IProps {
   loggedIn: React.ReactNode
@@ -9,13 +8,11 @@ interface IProps {
 
 type IUserVerificationConditions = 'loggedIn' | 'loggedOut'
 
-export const UserAction = observer((props: IProps) => {
+export const UserAction = (props: IProps) => {
+  const session = useContext(SessionContext)
   const { loggedIn, loggedOut } = props
 
-  const { userStore } = useCommonStores().stores
-  const authUser = userStore.authUser
-
-  const userCondition: IUserVerificationConditions = authUser
+  const userCondition: IUserVerificationConditions = session?.id
     ? 'loggedIn'
     : 'loggedOut'
 
@@ -25,4 +22,4 @@ export const UserAction = observer((props: IProps) => {
     default:
       return loggedOut
   }
-})
+}

src/pages/Question/QuestionListHeader.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useContext, useEffect, useState } from 'react'
 import { Link, useSearchParams } from '@remix-run/react'
 import debounce from 'debounce'
 import { CategoryVerticalList, SearchField, Select } from 'oa-components'
@@ -11,13 +11,15 @@ import {
 import { Button, Flex } from 'theme-ui'
 
 import { ListHeader } from '../common/Layout/ListHeader'
+import { SessionContext } from '../common/SessionContext'
 import { headings, listing } from './labels'
 import { QuestionSortOptions } from './QuestionSortOptions'
 
 import type { Category } from 'oa-shared'
 import type { QuestionSortOption } from './QuestionSortOptions'
 
 export const QuestionListHeader = () => {
+  const session = useContext(SessionContext)
   const [categories, setCategories] = useState<Category[]>([])
   const [searchString, setSearchString] = useState<string>('')
 
@@ -79,14 +81,26 @@ export const QuestionListHeader = () => {
   const actionComponents = (
     <UserAction
       loggedIn={
-        <Link to="/questions/create">
+        <Link
+          to={
+            session?.id
+              ? '/questions/create'
+              : '/sign-in?returnUrl=' + encodeURIComponent(location.pathname)
+          }
+        >
           <Button type="button" data-cy="create-question" variant="primary">
             {listing.create}
           </Button>
         </Link>
       }
       loggedOut={
-        <Link to="/sign-up">
+        <Link
+          to={
+            session?.id
+              ? '/questions/create'
+              : '/sign-up?returnUrl=' + encodeURIComponent(location.pathname)
+          }
+        >
           <Button type="button" data-cy="sign-up" variant="primary">
             {listing.join}
           </Button>

src/pages/Research/Content/ResearchListHeader.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useContext, useEffect, useState } from 'react'
 import { Link, useSearchParams } from '@remix-run/react'
 import debounce from 'debounce'
 import { CategoryVerticalList, SearchField, Select } from 'oa-components'
@@ -9,6 +9,7 @@ import { UserAction } from 'src/common/UserAction'
 import { isPreciousPlastic } from 'src/config/config'
 import DraftButton from 'src/pages/common/Drafts/DraftButton'
 import { ListHeader } from 'src/pages/common/Layout/ListHeader'
+import { SessionContext } from 'src/pages/common/SessionContext'
 import { Button, Flex } from 'theme-ui'
 
 import { RESEARCH_EDITOR_ROLES } from '../constants'
@@ -35,6 +36,7 @@ const researchStatusOptions = [
 ]
 
 export const ResearchFilterHeader = (props: IProps) => {
+  const session = useContext(SessionContext)
   const { draftCount, handleShowDrafts, showDrafts } = props
 
   const [categories, setCategories] = useState<ICategory[]>([])
@@ -106,7 +108,7 @@ export const ResearchFilterHeader = (props: IProps) => {
             draftCount={draftCount}
             handleShowDrafts={handleShowDrafts}
           />
-          <Link to="/research/create">
+          <Link to={session?.id ? '/research/create' : '/sign-in'}>
             <Button type="button" variant="primary" data-cy="create">
               {listing.create}
             </Button>

src/pages/Research/Content/ResearchUpdate.tsx

@@ -125,11 +125,11 @@ const ResearchUpdate = (props: IProps) => {
             <Flex sx={{ flexDirection: 'column' }} py={4} px={4}>
               <Flex sx={{ flexDirection: ['column', 'row', 'row'] }}>
                 <Box sx={{ width: ['100%', '75%', '75%'] }}>
-                  {contributors.length > 0 ? (
+                  {contributors.length > 0 && (
                     <Box sx={{ mb: 2 }} data-testid="collaborator/creator">
                       <Username user={contributors[0]} />
                     </Box>
-                  ) : null}
+                  )}
 
                   <Heading as="h2" sx={{ mb: 2 }}>
                     {title}