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.