Vue sign in widget: Unable to Login

Questions
1

I’ve been trying to add okta to my site for almost three days now and I’m getting pretty frustrated. I’ve followed the docs exactly but I still keep getting this error when I try to login: “Unable to Login”

The console just outputs a 401 error.

I’m using the okta-signin-widget with Vue.

Here is the relevant javascript:

mounted: function () {
this.$nextTick(function () {
  this.widget = new OktaSignIn({
    baseUrl: oktaConfig.oidc.issuer,
    clientId: oktaConfig.oidc.clientId,
    redirectUri: "http://localhost:8080/login/callback",
    authParams: {
      pkce: true,
      issuer: oktaConfig.oidc.issuer,
      display: "page",
      scopes: ["openid", "profile", "email"],
    },
  });
  this.widget.showSignInAndRedirect({ el: "#okta-signin-container" });
});

},

I’m really not sure what to do at this point. Any help would be appreciated.

2

Here’s how I configured it in an Angular app recently. Vue should be similar. I believe the problem is you might be using the issuer in the baseUrl rather than just your Okta domain.

From okta-angular-sample/login.component.ts at main · okta-samples/okta-angular-sample · GitHub

    this.signIn = new OktaSignIn({
      /**
       * Note: when using the Sign-In Widget for an OIDC flow, it still
       * needs to be configured with the base URL for your Okta Org. Here
       * we derive it from the given issuer for convenience.
       */
      baseUrl: sampleConfig.oidc.issuer.split('/oauth2')[0],
      clientId: sampleConfig.oidc.clientId,
      redirectUri: sampleConfig.oidc.redirectUri,
      logo: '/assets/angular.svg',
      i18n: {
        en: {
          'primaryauth.title': 'Sign in to Angular & Company',
        },
      },
      authParams: {
        issuer: sampleConfig.oidc.issuer
      },
    });
  }
3

Just fixed it! I had been locked out of my account haha. Wish the error message would have told me that was why I was unable to login!