Help on modifying sample code for TypeScript and Vue3

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')

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) 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