I am trying to learn Vue3 on a hobby project and have an issue when trying to set up Auth0 using their SDK in the App.vue file and I'm hoping someone can explain the issue!
I've followed the docs but converted (I think) the code to use the <script setup>...</script> syntax but I am getting an error when using the useAuth0 function in my setup. Vue is warning that inject() can only be used inside setup() or functional components..
If I call inject directly in the setup block it works, and if I copy the code for useAuth0 in to a file in my application and import and call it resolves it and the login method works.
I don't understand why the provided implementation doesn't work when copying the code does - could anyone please explain that?
When copying the code the loginWithRedirect function works but the other items on on the auth0 client don't seem to (it seems to be stuck as isLoading: true
Here's the relevant code
I've registered the plugin in the main.ts and then trying to use it in app.vue to add a login button - there seemed to be a type issue with the plugin hence the any cast for now
main.ts
const auth0Plugin = createAuth0({
domain: "dev-9vwsdbs4.us.auth0.com",
client_id: "HtmGSIyIGplusxDGTo1VwWVXebgOfIVM",
redirect_uri: window.location.origin,
});
app.use(auth0Plugin as any);
app.vue
<script setup lang="ts">
import { RouterView } from "vue-router";
import { useAuth0 } from "@auth0/auth0-vue";
const { loginWithRedirect, isLoading } = useAuth0();
</script>
<template>
<RouterView />
<p>{{ isLoading }}</p>
<button @click="loginWithRedirect">Login</button>
</template>
This is the output in the console:
[Vue warn]: inject() can only be used inside setup() or functional components.
runtime-core.esm-bundler.js:38 [Vue warn]: Unhandled error during execution of setup function
App.vue:4 Uncaught TypeError: Cannot destructure property 'loginWithRedirect' of 'useAuth0(...)' as it is undefined.