# Help on modifying sample code for TypeScript and Vue3

**URL:** <https://community.auth0.com/t/help-on-modifying-sample-code-for-typescript-and-vue3/53236>\
**Category:** Get Help\
**Created:** [November 14, 2020, 11:48am UTC](https://community.auth0.com/t/help-on-modifying-sample-code-for-typescript-and-vue3/53236 "2020-11-14T11:48:29Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![richard3](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/richard3/32/13599_2.png) [@richard3](https://community.auth0.com/u/richard3)\
**Post date:** [November 14, 2020, 11:48am UTC](https://community.auth0.com/t/help-on-modifying-sample-code-for-typescript-and-vue3/53236/1 "2020-11-14T11:48:29Z")

</div>

I am quite new to TypeScript so I’m not surprised I’m having issues but after trying for several hours I would like some guidance on modifying the sample code provided by Auth0 for Vue. It is currently not available in TypeScript and as far as I am aware there is still no sample for this. I have also tried other examples/samples online that people have offered and these have not worked likely because I am using Vue3.

I have created the auth folder, put in the index.js, changed the main.ts accordingly to import the plugin, installed autho spa plugin via npm and everything. Obviously the index.js fails ESLint. I can modify the line to pass it (remove semicolons etc) but then I receive the following error:

Could not find a declaration file for module ‘./auth’

From the line (in main.ts): import { Auth0Plugin } from ‘./auth’

I apologise that I can’t recall all the different things I tried in the last few hours, but creating an index.ts file in auth did not resolve, changing the index.js to a .ts file did not resolve, using requires did not resolve, so I am now lost.

I’m not sure what is best for me to supply code-wise so I just attach the auth/index.js and main.ts for now:

**/AUTH/INDEX.JS**  
/\* eslint-disable @typescript-eslint/camelcase \*/

```
import * as Vue from "vue"
import createAuth0Client from '@auth0/auth0-spa-js'

/** Define a default action to perform after authentication */
const DEFAULT_REDIRECT_CALLBACK = () =>
  window.history.replaceState({}, document.title, window.location.pathname)

let instance

/** Returns the current instance of the SDK */
export const getInstance = () => instance

/** Creates an instance of the Auth0 SDK. If one has already been created, it returns that instance */
export const useAuth0 = ({
  onRedirectCallback = DEFAULT_REDIRECT_CALLBACK,
  redirectUri = window.location.origin,
  ...options
}) => {
  if (instance) return instance

  // The 'instance' is simply a Vue object
  instance = new Vue({
    data () {
      return {
        loading: true,
        isAuthenticated: false,
        user: {},
        auth0Client: null,
        popupOpen: false,
        error: null
      }
    },
    methods: {
      /** Authenticates the user using a popup window */
      async loginWithPopup (options, config) {
        this.popupOpen = true
        try {
          await this.auth0Client.loginWithPopup(options, config)
        } catch (e) {
          // eslint-disable-next-line
          console.error(e)
        } finally {
          this.popupOpen = false
        }

        this.user = await this.auth0Client.getUser()
        this.isAuthenticated = true
      },
      /** Handles the callback when logging in using a redirect */
      async handleRedirectCallback () {
        this.loading = true
        try {
          await this.auth0Client.handleRedirectCallback()
          this.user = await this.auth0Client.getUser()
          this.isAuthenticated = true
        } catch (e) {
          this.error = e
        } finally {
          this.loading = false
        }
      },
      /** Authenticates the user using the redirect method */
      loginWithRedirect (o) {
        return this.auth0Client.loginWithRedirect(o)
      },
      /** Returns all the claims present in the ID token */
      getIdTokenClaims (o) {
        return this.auth0Client.getIdTokenClaims(o)
      },
      /** Returns the access token. If the token is invalid or missing, a new one is retrieved */
      getTokenSilently (o) {
        return this.auth0Client.getTokenSilently(o)
      },
      /** Gets the access token using a popup window */

      getTokenWithPopup (o) {
        return this.auth0Client.getTokenWithPopup(o)
      },
      /** Logs the user out and removes their session on the authorization server */
      logout (o) {
        return this.auth0Client.logout(o)
      }
    },
    /** Use this lifecycle method to instantiate the SDK client */
    async created () {
      // Create a new instance of the SDK client using members of the given options object
      this.auth0Client = await createAuth0Client({
        ...options,
        client_id: options.clientId,
        redirect_uri: redirectUri
      })

      try {
        // If the user is returning to the app after authentication..
        if (
          window.location.search.includes('code=') &&
          window.location.search.includes('state=')
        ) {
          // handle the redirect and retrieve tokens
          const { appState } = await this.auth0Client.handleRedirectCallback()

          // Notify subscribers that the redirect callback has happened, passing the appState
          // (useful for retrieving any pre-authentication state)
          onRedirectCallback(appState)
        }
      } catch (e) {
        this.error = e
      } finally {
        // Initialize our internal authentication state
        this.isAuthenticated = await this.auth0Client.isAuthenticated()
        this.user = await this.auth0Client.getUser()
        this.loading = false
      }
    }
  })

  return instance
}

// Create a simple Vue plugin to expose the wrapper object throughout the application
export const Auth0Plugin = {
  install (Vue, options) {
    Vue.prototype.$auth = useAuth0(options)
  }
}

```

**MAIN.TS:**  
import { createApp } from ‘vue’  
import App from ‘./App.vue’  
import ‘./registerServiceWorker’  
import router from ‘./router’  
import store from ‘./store’

```
// Import the Auth0 configuration
import { domain, clientId } from '../auth_config.json'
// Import the plugin here
import { Auth0Plugin } from './auth'

createApp(App)
  .use(store)
  .use(router)
  .use(Auth0Plugin, {
domain,
clientId,
onRedirectCallback: (appState: any) => {
  router.push(
    appState && appState.targetUrl
      ? appState.targetUrl
      : window.location.pathname
  )
}
  })
  .mount('#app')

```

---

<div class="post-metadata">

**Author:** ![ChromaticRanger](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/chromaticranger/32/25915_2.png) [@ChromaticRanger](https://community.auth0.com/u/ChromaticRanger)\
**Post date:** [November 30, 2020, 4:05pm UTC](https://community.auth0.com/t/help-on-modifying-sample-code-for-typescript-and-vue3/53236/2 "2020-11-30T16:05:29Z")

</div>

Hi Richard

I too have a Vue3 Typescript project on the go and I have started trying to integrate Auth0 login into my landing page. As you say, there currently is no official Vue3 sample whether in JS or TS. I did find another post on here where a guy called @lstyles has put together a JS version of the current Vue2 sample, and I have cloned his project ([GitHub - lstyles/vue3-auth0-sample](https://github.com/lstyles/vue3-auth0-sample)) stripped it right back and have it working as a standalone project in a similar way to the functionality I require.

I am about to try integrating this into my TS project (I am also fairly new at TS). For now I am not planning to rewrite lucas’ code in TS as I figure you should be able to use the JS as is.

The solution to the

**Could not find a declaration file for module ‘./auth’**

can be solved by adding an entry to your tsconfig.json

“allowJs”: true

Hope that helps if you haven’t worked that out already, as I note your post was over 2 weeks ago now.

Regards,  
Martin