Hello,
I am using @auth0/auth0-vue 1.0.2 I am creating a vue3 application.
I’ve been following this tutorial.
My main.js looks like this:
appInstance
.use(store)
.use(router)
.use(createAuth0({
domain: VITE_AUTH0_DOMAIN,
client_id: VITE_AUTH0_CLIENT_ID,
redirect_uri: VITE_AUTH0_CALLBACK_URL,
audience: VITE_AUTH0_AUDIENCE,
})
)
.use(VueSweetalert2)
.use(MaterialDashboard)
.mount("#app");
I create a login button like this:
<template>
<button class="button__login" @click="handleLogin">Log In</button>
</template>
<script setup>
import { useAuth0 } from "@auth0/auth0-vue";
console.log(useAuth0)
const { loginWithRedirect } = useAuth0();
const handleLogin = () => {
loginWithRedirect({
prompt: "login",
appState: {
target: "/app/profile",
},
});
};
</script>
When I click the button I receive the following error: Uncaught (in promise) TypeError: Cannot destructure property 'loginWithRedirect' of 'Object(...)(...)' as it is undefined.
This makes it look like useAuth0
is not being populated.
I also get this warning: Vue warn]: inject() can only be used inside setup() or functional components.
- Which I thought I was doing.
Why is useAuth0 undefined?