qiuzmanq.15510 (Customer) asked a question.
I have been banging my head against the wall trying to get this to work. I can log in via the okta hosted login but when I switch to using the self hosted widget I am able to get everything to popup and everything seems good. However, when I go to log in with my test user for the self hosted widget I get:"You are not allowed to access this app. To request access, contact an admin."
I am assuming something must be wrong on my vuejs end since the okta hosted version works great. The steps I have taken:
On my Okta admin side I have:
Enabled Authorization Code Flow and Interaction Grant Flow in the application settings. I have check "Require PKCE as additional verification". My signin redirect is http://localhost:9000/login/callback and my signout redirect is set to http://localhost:9000/login. Login initiated by app only. My callback URI is set to http://localhost:9000/. I have created a group and assigned my test user to it.
On my vuejs side have I set my config to:
oidc: {
issuer: 'https://blahablabla.okta.com/oauth2/default',
clientId: 'e94032849023840924809',
redirectUri: window.location.origin + '/login/callback',
scopes: ['openid', 'profile', 'email'],
pkce: true
}
I use the following code to set my config:
// something to do
const oktaAuth = new OktaAuth(oktaConfig.oidc)
app.use(OktaVue, {
oktaAuth,
onAuthRequired: () => {
router.push('/login')
},
onAuthResume: () => {
router.push('/login')
}
});
I have my login page setup and the widget loads using the following page code:
<template>
<div class="login" :class="$q.screen.lt.md ? 'mobile' : ''">
<div id="okta-signin-container"></div>
</div>
</template>
<script>
import OktaSignIn from '@okta/okta-signin-widget'
import '../../node_modules/@okta/okta-signin-widget/dist/css/okta-sign-in.min.css'
import oktaConfig from 'src/oktaConfig'
import logo from 'assets/img/Logo-Vertical-Grey-Version.png';
export default {
name: 'LoginPage',
mounted: function () {
this.$nextTick(function () {
const { issuer, clientId, redirectUri, scopes } = oktaConfig.oidc
this.widget = new OktaSignIn({
clientId,
redirectUri,
logo: logo,
i18n: {
en: {
'primaryauth.title': 'Welcome'
}
},
authParams: {
issuer
}
})
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
})
})
},
unmounted () {
// Remove the widget from the DOM on path change
this.widget.remove()
}
}
</script>
Hello @qiuzmanq.15510 (Customer) Thank you for reacting out to our Community!
Please see our step by step configuration on Vue.js authentication and make sure all steps are correct on your side:
https://developer.okta.com/code/vue/
Additionally if you need further assistance we recommend to leverage the Okta Developer forums for this type of questions and take advantage of their expertise.
https://devforum.okta.com/
Community members help others by clicking Like or Select as Best on responses. Try it today.
Coming soon: Get tips from community managers during Okta Community's first Ask Me Anything event on 6/22
Hey Paul, I want to thank you for those links as the one article has something that most other Okta articles did not which was the API auth server needed interaction grant flow checked and not just the application itself. That did the trick. However, I am curious if the Auth JS requires it as well as it is not mentioned in that article. Also, EMAIL VERIFICATION EXPERIENCE set Callback URI are not mentioned in that tutorial as well but they are in the embedded widget tutorial so is that not required for Auth JS?
Some fixes in the sign in widget tutorial you guys should fix:
-The tutorial does not mention PKCE in setting up OKTA setup however in the config it is set to true. If the app config is set to true and online is set to false I assume this does nothing or could break it?
-The tutorial says in step 14: In the Security > API > Trusted Origins page, ensure that there is an entry for your sign-in redirect URI. See Enable CORS.. During the setup our redirect URI is http://localhost:8080/login/callback if you're using the sample app.
However if you try to set it to include /login/callback it gives an error that this is not allowed and even the hint in the Okta admin form says to use http://localhost:4000 without the additional path. For a beginner like me this creates confusion!
Thank you again for the articles because the comparisons allowed me to fix my issue that i missed.