Krd8ssb Comments - Answer Overflow

Krd8ssb

•Created by Krd8ssb on 10/21/2024 in #❓・help

data not persisting between updating store value and a navigateTo redirect

I was able to get it to redirect correctly by updating the following ~/pages/callback.vue:

const authStore = useAuthStore()
const { loggedIn } = storeToRefs(authStore)

if (import.meta.client) {
  await navigateTo('/')
}

const authStore = useAuthStore()
const { loggedIn } = storeToRefs(authStore)

if (import.meta.client) {
  await navigateTo('/')
}

By the time the client loaded, the data was in the store as I had expected and redirected the user to the homepage successfully. I'm sure there's a better way to do this but at least it's working to continue on with a POC

3 replies

NNuxt

•Created by Krd8ssb on 10/21/2024 in #❓・help

data not persisting between updating store value and a navigateTo redirect

Here's the basic setup I'm using (this is definitely not production ready - I've butchered it trying to find out what's going on) ~/stores/auth.store.ts

export const useAuthStore = defineStore('authStore', () => {
  const loggedIn = ref<boolean>(false)
  return { loggedIn }
}, {
  persist: true
})

if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(useAuthStore, import.meta.hot))
}

export const useAuthStore = defineStore('authStore', () => {
  const loggedIn = ref<boolean>(false)
  return { loggedIn }
}, {
  persist: true
})

if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(useAuthStore, import.meta.hot))
}

~/pages/callback.vue

<script lang="ts" setup>
import type { WorkOsUser } from '~/stores/users.store'

function generateExpires() {
  const now = new Date()
  const time = now.getTime()
  return new Date(time + (60 * 60 * 24 * 90))
}

const errorStore = useErrorStore()
const runtimeConfig = useRuntimeConfig()

const authStore = useAuthStore()
const { loggedIn } = storeToRefs(authStore)

const expires = generateExpires()
const authCookie = useCookie('wos-session', { expires, sameSite: 'lax', secure: true, httpOnly: true })

const { query } = useRoute()
const code = query.code
const { data, error } = await useFetch<{
  session: string
  user: WorkOsUser
}>(`${runtimeConfig.public.apiHost}/auth/callback`, {
  query: { code }
})

if (!authStore.loggedIn) {
  if (data.value?.session) {
    authCookie.value = data.value.session
    loggedIn.value = true
    await navigateTo('/')
  }

  if (error.value) {
    errorStore.setError({ ...error.value.data, show: true })
    if (errorStore.code === 'AUTHENTICATION_TOKEN_INVALID_OR_EXPIRED') {
      errorStore.message = 'Redirecting to authenticate...'
    }
  }
}

await navigateTo('/')
</script>

<template>
  <div>
    <UContainer>
      <AppError v-if="errorStore?.show"/>
      <UAlert
        v-else
        variant="subtle"
        color="blue"
      >
        Starting Authentication...
      </UAlert>
    </UContainer>
  </div>
</template>

<style scoped></style>

<script lang="ts" setup>
import type { WorkOsUser } from '~/stores/users.store'

function generateExpires() {
  const now = new Date()
  const time = now.getTime()
  return new Date(time + (60 * 60 * 24 * 90))
}

const errorStore = useErrorStore()
const runtimeConfig = useRuntimeConfig()

const authStore = useAuthStore()
const { loggedIn } = storeToRefs(authStore)

const expires = generateExpires()
const authCookie = useCookie('wos-session', { expires, sameSite: 'lax', secure: true, httpOnly: true })

const { query } = useRoute()
const code = query.code
const { data, error } = await useFetch<{
  session: string
  user: WorkOsUser
}>(`${runtimeConfig.public.apiHost}/auth/callback`, {
  query: { code }
})

if (!authStore.loggedIn) {
  if (data.value?.session) {
    authCookie.value = data.value.session
    loggedIn.value = true
    await navigateTo('/')
  }

  if (error.value) {
    errorStore.setError({ ...error.value.data, show: true })
    if (errorStore.code === 'AUTHENTICATION_TOKEN_INVALID_OR_EXPIRED') {
      errorStore.message = 'Redirecting to authenticate...'
    }
  }
}

await navigateTo('/')
</script>

<template>
  <div>
    <UContainer>
      <AppError v-if="errorStore?.show"/>
      <UAlert
        v-else
        variant="subtle"
        color="blue"
      >
        Starting Authentication...
      </UAlert>
    </UContainer>
  </div>
</template>

<style scoped></style>

3 replies

NNuxt

•Created by Mediv0 on 10/18/2024 in #❓・help

Problem getting data from Pinia

@Mediv0 did you get it working? I'm having a similar issue, I think

6 replies

Gaming

Programming