Are there @types for Typescript definition?

[clabnet]

Hello
I would integrate this code into my Vue3 Typescript SPA.
This is a simple Pinia store :

import { defineStore } from 'pinia'
import { OAuth2AuthCodePkceClient } from 'oauth2-pkce'

const useOauthStore = defineStore('oauthStore', {
  state: () => {
    return {
      oauthClient: OAuth2AuthCodePkceClient,
    }
  },

  getters: {
    getOauthClient(state) {
      return state.oauthClient
    },
  },

  actions: {
    initOauthClient() {
      const oauthClient = new OAuth2AuthCodePkceClient({
        scopes: ['openid', 'email'],
        authorizationUrl: 'http://localhost:8080/realms/demo/protocol/openid-connect/auth/',
        tokenUrl: 'http://localhost:8080/realms/demo/protocol/openid-connect/token/',
        clientId: 'app',
        redirectUrl: 'http://localhost:3000/',
        storeRefreshToken: true,
        // optional:
        onAccessTokenExpiry() {
          // when the access token has expired
          console.warn('OAuth2AuthCodePkceClient onAccessTokenExpiry')
          return oauthClient.exchangeRefreshTokenForAccessToken()
        },
        onInvalidGrant() {
          // when there is an error getting a token with a grant
          console.warn('Invalid grant! Auth code or refresh token need to be renewed.')
          // you probably want to redirect the user to the login page here
        },
        onInvalidToken() {
          // the token is invalid, e. g. because it has been removed in the backend
          console.warn('Invalid token! Refresh and access tokens need to be renewed.')
          // you probably want to redirect the user to the login page here
        },
      })
      this.oauthClient = oauthClient
      return oauthClient
    },

    async requestAuthorizationCode() {
      console.log('requestAuthorizationCode')
      const aaa = await this.oauthClient.requestAuthorizationCode()    <<<<< !!! ERROR 
      console.log('aaa', aaa)
    },

    resetOauthStore() {
      this.$reset()
    },
  },
})
export default useOauthStore

On the above error line I have this error :
this.oauthClient.requestAuthorizationCode is not a function

How to call requestAuthorizationCode function ?

I dont' found the types, are defined its ?

Thank's

[Archelyst]

The types are included in the package (in index.d.ts).

Could you show the code where you call the function? And maybe you insert a console.log(this.oauthClient)?

[clabnet]

I refactored the Pinia store, it work now. Thank's @Tim-Erwin

import { defineStore } from 'pinia'
import { OAuth2AuthCodePkceClient } from 'oauth2-pkce'

interface oauthState {
  oauthClient: OAuth2AuthCodePkceClient
  isAuthorized: boolean
}

const oauthClient = new OAuth2AuthCodePkceClient({
  scopes: ['openid', 'email'],
  authorizationUrl: 'http://localhost:8080/realms/demo/protocol/openid-connect/auth/',
  tokenUrl: 'http://localhost:8080/realms/demo/protocol/openid-connect/token/',
  clientId: 'app',
  redirectUrl: 'http://localhost:3000/',
  storeRefreshToken: false,
  // optional:
  onAccessTokenExpiry() {
    // when the access token has expired
    console.warn('OAuth2AuthCodePkceClient onAccessTokenExpiry')
    return oauthClient.exchangeRefreshTokenForAccessToken()
  },
  onInvalidGrant() {
    // when there is an error getting a token with a grant
    console.warn('Invalid grant! Auth code or refresh token need to be renewed.')
    // you probably want to redirect the user to the login page here
  },
  onInvalidToken() {
    // the token is invalid, e. g. because it has been removed in the backend
    console.warn('Invalid token! Refresh and access tokens need to be renewed.')
    // you probably want to redirect the user to the login page here
  },
})

export const useOauthStore = defineStore('oauthStore', {
  state: (): oauthState => ({
    oauthClient: oauthClient,
    isAuthorized: oauthClient.isAuthorized,
  }),

  getters: {
    getOauthClient(state) {
      return state.oauthClient
    },
    isAuthorized(state) {
      return state.isAuthorized
    },
  },

  actions: {
    async requestAuthorizationCode() {
      await this.oauthClient.requestAuthorizationCode()
    },

    async receiveCode() {
      await this.oauthClient.receiveCode()
    },

    async getTokens() {
      const tokens = await this.oauthClient.getTokens()
      console.log('getTokens', tokens)
    },

    resetOauthStore() {
      this.$reset()
    },
  },
})

export default useOauthStore