Convert Okta Options API to Composition API

76 Views Asked by At

I have followed the Okta instructions to implement their sign in widget on my login page but I cannot get it to work as some of it is still written in options API and I am struggling at converting it to composition api with scrip setup. Here is what I have so far:

<script setup>
// @ is an alias to /src
import { nextTick} from 'vue'
import OktaSignIn from '@okta/okta-signin-widget'
import '@okta/okta-signin-widget/dist/css/okta-sign-in.min.css'
import oktaConfig from 'src/oktaConfig'

onMounted(() => { 
  nextTick(() => {
    const { issuer, clientId, redirectUri, scopes } = oktaConfig.oidc
      this.widget = new OktaSignIn({
        clientId,
        redirectUri,
        logo: require('@/assets/img/SWEEPACHIM-WEBSITE-BLACK.png'),
        i18n: {
          en: {
            'primaryauth.title': 'Sign in to my Okta Sign-In Widget Vue.js app'
          }
        },
        authParams: {
          issuer,
          scopes,
        }
      })

      const originalUri = this.$auth.getOriginalUri();
      if (!originalUri) {
        this.$auth.setOriginalUri('/');
      }

      // Search for URL Parameters to see if a user is being routed to the application to recover password
      var searchParams = new URL(window.location).searchParams;
      this.widget.otp = searchParams.get('otp');
      this.widget.state = searchParams.get('state');

      this.widget.showSignInToGetTokens({
        el: '#okta-signin-container',
        scopes
      }).then(tokens => {
        this.$auth.handleLoginRedirect(tokens)
      }).catch(err => {
        throw err
      })
  })
});

onUnmounted(() => {oktaSignIn.remove()})

</script>

Any help would be greatly appreciated as I cannot find this implementation anywhere in composition api.

0

There are 0 best solutions below