Nuxt•9mo ago

Can only access the nuxt-sidebase useAuth() in the setup script, not the methods or functions

I havent had much luck with reaching out to sidebase about this issue. I was able to implement sso login and everything with the nuxt-sidebase plugin but the issues start when you try to use the data... For example: If I use

<script>
const { status, data, signIn, signOut } = useAuth()
export default {
  methods: {
    thing: () => {
      console.log(data)
    }
  }
}
</script>

<script>
const { status, data, signIn, signOut } = useAuth()
export default {
  methods: {
    thing: () => {
      console.log(data)
    }
  }
}
</script>

I get the following error:

nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug. Find out more at `https://nuxt.com/docs/guide/concepts/auto-imports#vue-and-nuxt-composables`.

nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug. Find out more at `https://nuxt.com/docs/guide/concepts/auto-imports#vue-and-nuxt-composables`.

But if I do

<script setup>
const { status, data, signIn, signOut } = useAuth()
const pageData = {
  servers: []
}
async function refresh () {
  console.log(await data)
}
</script>

<script setup>
const { status, data, signIn, signOut } = useAuth()
const pageData = {
  servers: []
}
async function refresh () {
  console.log(await data)
}
</script>

The page loads and the text properly displays "data" when I do {{data}} but when I try to access the data from a function or method it either gives me the wrong object or says it is not defined. See attached the console output for what actually prints. What it is supposed to say is:

{ "user": { "id": "7bb906ab-239d-432c-8795-8c7f2c20963a", "username": "23brewert", "pfp_url": "https://cdn.discordapp.com/avatars/345465284582178826/ff9daf65a3258225c1df9b902b5dc63b.webp", "platform_id": "345465284582178826", "role_id": 8, "created": "2023-09-15T01:04:01.914Z", "last_sync": "2024-03-17T20:29:41.217Z", "platform": "discord", "discovery_opt_out": false, "ticket_blacklisted": false, "partner_rep": false, "vip": false }, "expires": "2024-04-24T00:31:46.096Z", "token": "deffb00a-b74f-4a79-a849-5792aaecd0e2" }

{ "user": { "id": "7bb906ab-239d-432c-8795-8c7f2c20963a", "username": "23brewert", "pfp_url": "https://cdn.discordapp.com/avatars/345465284582178826/ff9daf65a3258225c1df9b902b5dc63b.webp", "platform_id": "345465284582178826", "role_id": 8, "created": "2023-09-15T01:04:01.914Z", "last_sync": "2024-03-17T20:29:41.217Z", "platform": "discord", "discovery_opt_out": false, "ticket_blacklisted": false, "partner_rep": false, "vip": false }, "expires": "2024-04-24T00:31:46.096Z", "token": "deffb00a-b74f-4a79-a849-5792aaecd0e2" }

1 Reply

Sandvich•9mo ago

It looks like you're calling a composable outside the setup function in the first code snippet. I'm not familiar with the options API but I think if you're going to use it you can't put useAuth outside the setup function

Gaming

Programming

Can only access the nuxt-sidebase useAuth() in the setup script, not the methods or functions