fix: exit edit view without auth

Author: toshick

app/composables/useAuth.ts

@@ -4,6 +4,12 @@ import { match } from 'ts-pattern'
 import { AuthProvider, FormUser } from '~/types/app'
 import { storeKey } from '~/atoms/user'
 
+export enum AuthChangeEvent {
+  INITIAL_SESSION = 'INITIAL_SESSION',
+  SIGNED_IN = 'SIGNED_IN',
+  SIGNED_OUT = 'SIGNED_OUT',
+}
+
 const initialUser = {
   user_id: '',
   full_name: '',
@@ -39,11 +45,15 @@ const useAuth = () => {
   })
 
   const store = inject(storeKey)
+  let _onAuthChanged: (evt: string) => void = () => {}
+  const onAuthChanged = (callback: (evt: string) => void) => {
+    _onAuthChanged = callback
+  }
 
   const supabase = getClient()
   supabase.auth.onAuthStateChange((evt, session) => {
     match(evt)
-      .with('INITIAL_SESSION', 'SIGNED_IN', () => {
+      .with(AuthChangeEvent.INITIAL_SESSION, AuthChangeEvent.SIGNED_IN, () => {
         if (session?.user) {
           const { user } = session
           signedUser.user_id = user.id || ''
@@ -57,8 +67,9 @@ const useAuth = () => {
           // signedUser.receipt_id = user?.receipt_id || ''
           store?.setUser(signedUser)
         }
+        _onAuthChanged(evt)
       })
-      .with('SIGNED_OUT', () => {
+      .with(AuthChangeEvent.SIGNED_OUT, () => {
         Object.entries(initialUser).forEach(([key, value]) => {
           signedUser[key as keyof FormUser] = value
         })
@@ -95,7 +106,7 @@ const useAuth = () => {
     return signedUser.user_id !== ''
   })
 
-  return { signOut, signIn, signedUser, hasAuth }
+  return { signOut, signIn, signedUser, hasAuth, onAuthChanged }
 }
 
 export function getClient() {

app/pages/users/[id].vue

@@ -19,6 +19,7 @@ definePageMeta({
 
 const route = useRoute()
 const userId = route.params.id as string
+const urlBasePath = useRuntimeConfig().app.baseURL
 const { signOut, hasAuth } = useAuth()
 const { signedUser } = useUserStore()
 const { eventUser, error } = await useUser(userId)
@@ -105,7 +106,7 @@ useHead({
         :opacity="eventUser?.activated_at ? 1 : 0.6"
       />
       <!-- 再編集 -->
-      <RoundButton class="btn-update" :to="`/users/edit/${userId}`">
+      <RoundButton class="btn-update" :to="`/users/edit/${userId}`" :disabled="!hasAuth">
         {{ $t('words.re_edit') }}
       </RoundButton>
       <!--
@@ -131,7 +132,7 @@ useHead({
         {{ $t('words.add_to_calendar') }}
       </RoundButton>
       <!-- トップに戻る -->
-      <RoundButton to="/" outline>
+      <RoundButton :to="urlBasePath" outline>
         {{ $t('words.back_top') }}
       </RoundButton>
       <div v-if="eventUser?.activated_at" class="social">
@@ -173,7 +174,7 @@ useHead({
 <style lang="ts" scoped>
 css({
   'section': {
-    marginTop: '120px',
+    marginTop: '140px',
     display: 'grid',
     placeItems: 'center',
     gap: '40px',
@@ -196,6 +197,9 @@ css({
     gap: 'calc({space.8} * 5)',
   },
   '@mobile': {
+    'section': {
+      marginTop: '120px',
+    },
     '.btn-update, .btn-save, .btn-calendar': {
       marginTop: 'calc({space.8} * 0)'
     },

app/pages/users/edit/[id].vue

@@ -7,7 +7,7 @@ import UploadLogo from '~/assets/logo/upload_logo.svg'
 import TextButton from '~/components/button/TextButton.vue'
 import DragDropArea from '~/components/DragDropArea.vue'
 import UserForDev from '~/components/UserForDev.vue'
-import useAuth from '~/composables/useAuth'
+import useAuth, { AuthChangeEvent } from '~/composables/useAuth'
 import { useUserStore } from '~/composables/useUserStore'
 import { useUser } from '~/composables/useUser'
 import { useSupabase } from '~/composables/useSupabase'
@@ -18,9 +18,20 @@ definePageMeta({
   middleware: ['error'],
 })
 
+const router = useRouter()
 const route = useRoute()
 const userId = route.params.id as string
-const { hasAuth, signOut } = useAuth()
+const { hasAuth, signOut, onAuthChanged } = useAuth()
+const userPagePath = `/users/${userId}`
+
+onAuthChanged((evt: string) => {
+  if (evt === AuthChangeEvent.INITIAL_SESSION) {
+    if (!hasAuth.value) {
+      router.push(userPagePath)
+    }
+  }
+})
+
 const { signedUser } = useUserStore()
 const { updateEventUser, uploadAvatar, getFullAvatarUrl } = useSupabase()
 const { eventUser } = await useUser(userId)
@@ -134,7 +145,7 @@ const updateReceiptId = (value: string) => {
 
             <div class="link-box">
               <!-- キャンセル -->
-              <RoundButton :to="`/users/${userId}`" outline> キャンセル </RoundButton>
+              <RoundButton :to="userPagePath" outline> キャンセル </RoundButton>
               <!-- 確定 -->
               <SubmitButton :disabled="!isSubmitting"> 確定 </SubmitButton>
             </div>
@@ -162,7 +173,7 @@ const updateReceiptId = (value: string) => {
 <style lang="ts" scoped>
 css({
   'section': {
-    marginTop: '120px',
+    marginTop: '140px',
     display: 'grid',
     placeItems: 'center',
     gap: '40px',
@@ -220,5 +231,10 @@ css({
     justifyContent: 'center',
     gap: '40px'
   },
+  '@mobile': {
+    'section': {
+      marginTop: '120px',
+    },
+  },
 })
 </style>

tsconfig.json

@@ -2,6 +2,6 @@
   // https://nuxt.com/docs/guide/concepts/typescript
   "extends": "./.nuxt/tsconfig.json",
   "compilerOptions": {
-    "types": ["@nuxt/types", "@nuxtjs/i18n", "cypress", "node"]
+    "types": ["@nuxt/types", "@nuxtjs/i18n", "@nuxtjs/device", "cypress", "node"]
   }
 }