Angular token whith password flow

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


  login(email,password) {
    this.loginError = null;
      .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);


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!

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

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:

@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 => {
      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);
    }).catch((error) => {
      this.toastService.OpenToast(false, 'Incorrect password');

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