Angular token whith password flow

Questions OAuth/OIDC
1

I have a login form in angular where I pass username and password, and I have an auth.service where I perform the login flow, I am using angular-oauth2-oidc and the fetchTokenUsingPasswordFlowAndLoadUserProfile method where I pass the email and password parameters , but it gives me the following error:

“The client is not authorized to use the provided grant type. Configured grant types: [refresh_token, implicit, authorization_code, interaction_code].”

    private oauthService: OAuthService,
    private router: Router,
    private service: AccountService,
    private toastService: ToastServiceService,
    private globalVariables: GlobalVariables,
    private spinnerService: NgxSpinnerService) {

      this.oauthService.configure(oktaAuthConfig);//IDP config doc
      this.oauthService.loadDiscoveryDocument();

  }

  login(email,password) {
    this.loginError = null;
    this.oauthService.setupAutomaticSilentRefresh();
    this.oauthService
      .fetchTokenUsingPasswordFlowAndLoadUserProfile(
        email,
        password
      )
      .then(() => {
        if (this.oauthService.hasValidAccessToken()) {
          localStorage.setItem('jwt',this.access_token );
          sessionStorage.getItem('isProduction') === 'true' ? this.productionFlow() : this.sandboxFlow();
        }
      })
      .catch((error) => {
        this.toastService.OpenToast(false, error?.error?.error_description);
        this.spinnerService.hide();
      });

  }

My config file contents next:

export const oktaAuthConfig: AuthConfig = {
  issuer: environment.oidcIssuer,
  redirectUri: window.location.origin + '/login',
  clientId: environment.oidcClientId,
  scope: 'openid email profile',
  oidc: false
}

Help please!
2

Your Angular app is trying to use Resource Owner Password Grant? Why aren’t you using Authorization Code flow with PKCE instead, that’s what’s recommend for SPAs (and Native apps).

1 Like
3

Ok im alredy use a Native app and now the error is different:

“Browser requests to the token endpoint must use Proof Key for Code Exchange.”

If I do the test in postman if it brings me my access_token, but if I test from angular it gives me this error:

4

@andrea , I’m already using @okta/okta-auth-js for angular, the method: signInWithCredentials, where I can get a sessionToken, but I need an accessToken so I can send it to my API service. How can I get the accessToken? try to use the getAccessToken() method of OktaAuth but it gives me an undefined message…

this is my code:

    const transaction = await this._authClient.signInWithCredentials({username,password})
    .then(transaction => {
      console.log(transaction);
      if (transaction.status === 'SUCCESS') {
        const sessionToken = transaction.sessionToken

        console.log('SESSION TOKEN: ' + sessionToken)
        console.log('ACCESS TOKEN: ' + this._authClient.getAccessToken())
      } else {
        this.toastService.OpenToast(false, transaction.status);
        this.spinnerService.hide();
      }
    }).catch((error) => {
      //console.log(error);
      this.toastService.OpenToast(false, 'Incorrect password');
      this.spinnerService.hide();
    });
6

what about borrowing a bit of the sample code here, to check if isLoginRedirect (which will check if Okta has already redirected back tot he app with code and state) before you call signInWithCredentials:

if (authClient.isLoginRedirect()) {
  try {
    await authClient.handleRedirect();
  } catch (e) {
    // log or display error details
  }
} else if (!await authClient.isAuthenticated()) {
  // Start the browser based oidc flow, then parse tokens from the redirect callback url
  authClient.signInWithRedirect(); //this would change to signInWithCredentials
} else {
  // User is authenticated
}

You would then add your custom logic to let the back-end handle the /token request in place of the handleRedirect method call