How to set up Okta Signin Widget in Vue Okta app

Question

I am attempting to integrate the okta signin widget into a Vue 3 project, based on the following: (Okta Sign-In Widget and Vue | Okta Developer). However, it appears that OktaSignIn is not available to import into the config files even after installing via yarn add @okta/okta-signin-widget. In other words, I cannot add import OktaSignIn from '@okta/okta-signin-widget' to the main.ts, as the package does not appear to be available. Is this widget not yet available for Vue 3 or Vue CLI 4 ?

Example:

import OktaSignIn from '@okta/okta-signin-widget'
import { OktaAuth } from '@okta/okta-auth-js'

const oktaSignIn = new OktaSignIn({
  baseUrl: 'https://${yourOktaDomain}',
  clientId: '${clientId}',
  redirectUri: 'http://localhost:8080/login/callback',
  authParams: {
    pkce: true,
    issuer: 'https://${yourOktaDomain}/oauth2/default',
    display: 'page',
    scopes: ['openid', 'profile', 'email']
  }
});

const oktaAuth = new OktaAuth({
  issuer: 'https://${yourOktaDomain}/oauth2/default',
  clientId: '${clientId}',
  redirectUri: window.location.origin + '/login/callback',
  scopes: ['openid', 'profile', 'email']
})

export { oktaAuth, oktaSignIn };

Answer 1

By "the package does not appear to be available", I assume you're referring to this TypeScript error:

Could not find a declaration file for module '@okta/okta-signin-widget'. '/projectRoot/node_modules/@okta/okta-signin-widget/dist/js/okta-sign-in.entry.js' implicitly has an 'any' type.

Try npm i --save-dev @types/okta__okta-signin-widget if it exists or add a new declaration (.d.ts) file containing declare module '@okta/okta-signin-widget';

That module does not yet support its own typings, but there's an open PR for it. As a workaround, you can declare the typings in your project at src/okta-signin-widget.d.ts, based on the PR's changes:

declare module '@okta/okta-signin-widget' {
  export default class OktaSignIn implements OktaSignIn {
    constructor(configuration: OktaSignInConfig)

    renderEl(configuration: { el: string }): void
    remove(): void

    session: {
      get: (callback: (repsonse: any) => void) => void
    }
  }

  export type OktaSignInConfigAuthParamsResponseMode = 'okta_post_message' | 'fragment' | 'query' | 'form_post'

  export interface OktaSignInConfigAuthParams {
    pkce?: boolean
    responseMode?: OktaSignInConfigAuthParamsResponseMode
    issuer?: string
    display?: 'page'
    scopes?: string[]
    responseType?: string[]
  }

  interface OktaSignInConfigi18n {
    en?: {
      'primaryauth.username.placeholder'?: string
      'primaryauth.username.tooltip'?: string
      'primaryauth.title'?: string
      'error.username.required'?: string
      'error.password.required'?: string
    }
  }

  interface OktaSignInConfig {
    baseUrl: string
    logo?: string
    clientId?: string
    redirectUri?: string
    authParams: OktaSignInConfigAuthParams
    i18n?: OktaSignInConfigi18n
  }
}