loginWithRedirect is not a function

[snichols]

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?

[snichols]

I have it working. The issue is I was adding Auth0 to an existing vue3 project. The issues was caused by lower versions of some node_modules than were being used in the demo project.

I wish I could tell you exactly what cause the issue, but after a day of troubleshooting you start to lose track.

The one small issues was package-lock.json. I ended up increasing the version numbers of the node_modules in package.lock to match the demo project, deleting node_modules, and deleting package-lock.json and running npm i

Probably not the recommend upgrade path, but it worked for me.

[lihua.zhang]

Thank you @snichols for sharing your solution with our Community!