Implement nuxt-auth (#219) (#220)

* chore: install nuxt auth

* chore: update nuxt-auth and add configs

* refactor: rename legacy useAuth composable

* refactor(Login): update to use nuxt-auth

* feat: add composable to fetch member data

* chore: add JSDocs type declarator to useFetchMember

* feat(useMember): save member data to state

* refactor(userWidget): update to use the new composable

* refactor(LoginForm): update auth handling

* fix(LoginForm): a11y issues in form inputs

* refactor(logout): use nuxt-auth logout

* refactor: login page middleware

* refactor(middleware): turn auth middleware into a global one and refactor its logic

* chore: update jwt cookie name

* refactor: remove register middleware

* refactor: remove state composoable in favor of useMember

* feat: add custom setters for userId and memberData composables

* fix: handle invalid stored userId in the auth middleware

* fix(member-banner): error handling when updaing info

* refactor: use bearer token in update member info and settings endpoint

* fix(member-banner): error handling when updaing avatar/cover

* fix: check for cached member data first before attempting to fetch it

* fix: update auth middleware to skip settings when unauth

* refactor(api): use bearer token instead of cookie for crud requests

* fix(user-widget): styling issues

* refactor: refresh member data using the new composable

* refactor: throw error if attempted to fetch member without providing id and handle it in the middleware

* fix: remove auth middleware from member page

* chore: cookie name

* chore: burn unwanted file

* fix: update member data in storage iff they're the logged in member

* refactor: add logoutMember composable

* refactor: remove localStorage entirely

* refactor: auth middleware

* fix: turn the isUserLogged into a computed property

* fix: add memberData computed property

* chore: set cookie max age to 1 day

Co-authored-by: Mo Mansour <[email protected]>

Author: GK

.env.sample

@@ -1,5 +1,6 @@
 # endpoint for API
 NUXT_PUBLIC_COMMUNITY_API_URL=
+AUTH_ORIGIN=
 NUXT_PUBLIC_TARGET_ENV=
 NUXT_PUBLIC_BUILD_COMMIT_SHA=
 NUXT_PUBLIC_BUILD_NUMBER=

components/Form/AppControlInput.vue

@@ -39,14 +39,14 @@
           @focusout="state.pwActive = false"
         />
         <span v-if="props.showPasswordIcon && props.inputType === 'password'">
-          <i
+          <button
             class="eye-icon"
             :class="[
               state.showPassword ? 'hide' : 'show',
               state.pwActive ? 'focusBg' : '',
             ]"
-            @click="state.showPassword = !state.showPassword"
-          ></i>
+            @click.prevent="state.showPassword = !state.showPassword"
+          ></button>
         </span>
       </div>
       <div

components/MobileMenuButton.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="lg:hidden flex items-center w-full justify-end">
-    <button class="outline-none mr-4" aria-label="Mobile Menu" @click="OnClick">
+    <button class="outline-none mr-4 z-20 bg-community-black-darker" aria-label="Mobile Menu" @click="OnClick">
       <img
         v-if="props.isOpen"
         class="w-9 h-9"
@@ -9,7 +9,7 @@
       />
       <img v-else class="w-9 h-9" src=" /icons/bars-solid.svg" alt="" />
     </button>
-    <UserWidget v-if="useAuth().value" />
+    <UserWidget v-if="isAuth().value" />
   </div>
 </template>
 

components/MobileMenuItems.vue

@@ -53,7 +53,7 @@
           id="login"
           to="/login"
           class="nav-link"
-          v-if="!useAuth().value"
+          v-if="!isAuth().value"
           >Sign In</NuxtLink
         >
       </li>

components/PageHeader.vue

@@ -37,7 +37,7 @@
                 id="login"
                 to="/login"
                 class="nav-link"
-                v-if="!useAuth().value"
+                v-if="!isAuth().value"
                 >Sign In</NuxtLink
               >
               <UserWidget v-else />

components/UserWidget.vue

@@ -1,29 +1,29 @@
 <template>
-  <div v-if="useMember().value" class="widget-container">
+  <div v-if="memberData?.member" class="widget-container">
     <img
       @click="togglePopup"
       class="avatar"
       alt="avatar"
       :src="
-        useMember().value.avatar_url
-        ? useMember().value.avatar_url
+        memberData?.member.avatar_url
+        ? memberData?.member.avatar_url
         : '/images/placeholders/avatar.png'
       "
     />
     <div v-if="state.isOpen" class="user-menu">
       <div class="widget-arrow"></div>
       <p class="user-name">
-        {{ useMember().value.first_name_en }} {{ useMember().value.last_name_en }}
+        {{ memberData?.member.first_name_en }} {{ memberData?.member.last_name_en }}
       </p>
       <div class="flex flex-row justify-between mb-4">
-        <p v-if="useMember().value.type !== 0"
+        <p v-if="memberData?.member.type !== 0"
           class="user-info">
           <div class="badge-color"></div>
           JOSA Member
         </p>
-        <p v-if="useMember().value.josa_member_id && useMember().value.type !== 0"
+        <p v-if="memberData?.member.josa_member_id && memberData?.member.type !== 0"
           class="user-info">
-          #{{ useMember().value.type }}-{{ useMember().value.josa_member_id }}
+          #{{ memberData?.member.type }}-{{ memberData?.member.josa_member_id }}
         </p>
       </div>
       <div class="divider-dotted"></div>
@@ -44,19 +44,19 @@
       </div>
     </div>
   </div>
+  <div v-else class="loader"></div>
 </template>
 
 <script setup>
+
+const memberData = useMemberData()
 const togglePopup = () => {
   state.isOpen = !state.isOpen
 }
 
-const signOut = async () => {
+const logout = async () => {
   togglePopup()
-  await useFetch('/api/logout')
-  useAuth().value = false
-  userId().value = null
-  navigateTo('/')
+  logoutMember()
 }
 
 const state = reactive({
@@ -81,7 +81,7 @@ const widget = reactive({
       title: 'Sign out',
       to: '/',
       icon: 'ic-logout',
-      onClick: signOut
+      onClick: logout
     }
   ]
 })
@@ -92,7 +92,7 @@ const widget = reactive({
   @apply flex flex-col items-end justify-between;
 }
 .avatar {
-  @apply w-10 rounded;
+  @apply w-10 h-10 object-cover rounded;
 }
 .avatar:hover {
   @apply cursor-pointer

components/home/HeroBanner.vue

@@ -27,7 +27,7 @@
         </div>
 
         <NuxtLink
-          v-if="!useAuth().value"
+          v-if="!isAuth().value"
           class="button-flat button-blue-full"
           to="/register"
         >

components/login/Form.vue

@@ -27,7 +27,7 @@
       >
         Password
       </FormAppControlInput>
-      <NuxtLink @click="$emit('forgotPassword', true)">
+      <NuxtLink @click="$emit('forgotPassword', true)" href="#">
         Forgot Password?
       </NuxtLink>
       <FormAppButton
@@ -46,6 +46,7 @@
 </template>
 <script setup>
 const emit = defineEmits(['forgotPassword'])
+const { data, signIn } = useAuth()
 
 const form = reactive({
   email: '',
@@ -56,29 +57,28 @@ const state = reactive({
   error: false
 })
 const login = async() => {
+  state.error = false
   state.loading = true
 
-  // TODO: refresh data on submitting, or use $fetch.raw()
-  await $fetch('/api/login', {
-    method: "POST",
-    body: JSON.stringify({
-      "email": form.email,
-      "password": form.password
-    }),
-    onResponse({response}) {
-      if(response.ok) {
-        state.loading = false
-        const {first_name_en, last_name_en, id, avatar_url, type, josa_member_id} = response._data
-        useMember().value = {first_name_en, last_name_en, id, avatar_url, type, josa_member_id}
-        useAuth().value = true
-        userId().value = response._data.id
-        navigateTo('/')
-      }
-    },
-    onResponseError({response}) {
-      state.loading = false
-      state.error = true
+  await signIn({
+    email: form.email,
+    password: form.password
+  }, {
+    callbackUrl: "/"
+  })
+  .catch((error) => {
+    console.error("Error while signing in: ", error)
+    state.error = true
+  })
+  .finally(async () => {
+    const member = data.value
+    if (member?.id && member.username === form.email) {
+      console.info(`${member.username} is logged in!`)
+      updateUserId(member.id)
+      isAuth().value = true
+      await useFetchMember()
     }
+    state.loading = false
   })
 }
 </script>

components/login/forgotPassword.vue

@@ -36,7 +36,7 @@
           <div>Send password reset email</div>
         </div>
       </FormAppButton>
-      <NuxtLink @click="$emit('forgotPassword', false)">
+      <NuxtLink @click="$emit('forgotPassword', false)" href="#">
         Back to sign in
       </NuxtLink>
     </form>
@@ -45,7 +45,7 @@
         An email with a link to reset your password was sent to {{ form.email }}
       </Message>
       <div class="flex flex-row justify-between mt-4">
-        <NuxtLink @click="$emit('forgotPassword', false)">
+        <NuxtLink @click="$emit('forgotPassword', false)" href="#">
           Login
         </NuxtLink>
         <NuxtLink to="/">

components/member/Banner.vue

@@ -208,16 +208,17 @@ const uploadImage = async (event, imageType) => {
         state.images.avatar.url = avatar_url
           ? avatar_url + '?last-updated=' + Date.now()
           : props.member.avatar_url
-        useMember().value[`${imageType}_url`] = state.images[imageType].url
+        useMemberData().value[`${imageType}_url`] = state.images[imageType].url
+        state.success = true
       }
     })
     .catch((error) => {
-      state.loading = false
       state.error = true
       state.success = false
     })
     .finally(() => {
       updateGeneralInfo()
+      state.loading = false
     })
 }
 
@@ -236,17 +237,14 @@ const updateGeneralInfo = async (event) => {
     body: JSON.stringify(bodyData),
     onResponse({ response }) {
       if (response._data) {
-        state.error = false
-        state.success = true
         state.loading = false
       }
       emit('updateMember')
     },
     onResponseError({ response }) {
-      state.error = false
-      state.success = true
-      state.loading = false
-      console.log('something went wrong', response._data.message)
+      state.error = true
+      state.success = false
+      console.error('something went wrong', response._data.message)
     },
   })
   showUpdateInfoForm.value = !showUpdateInfoForm