Okta login page goes to infinite loop after user authentication

Question

like this

My Angular app integrated Okta access and user management API. The application backend is hosted in AWS Beanstaik and front end angular app is hosted S3.

I checked the network response by chrome dev tools and I got this

{"expiresAt":"2021-09-03T02:59:39.000Z","status":"SUCCESS","sessionToken":"20111F_ApSDB7zPMeay5y2V4nG8yUlU0i4ICgHyAOMYvc5Miq743wse","_embedded":{"user":{"id":"00ubopju1CRuT02ji5d6","passwordChanged":"2021-03-13T22:58:33.000Z","profile":{"login":"[email protected]","firstName":"Mohammed","lastName":"Samsuddin","locale":"en","timeZone":"America/Los_Angeles"}}},"_links":{"cancel":{"href":"https://dev-97379822.okta.com/api/v1/authn/cancel","hints":{"allow":["POST"]}}}}

login component code:

import { Component, OnInit } from '@angular/core';
import { OktaAuthService } from '@okta/okta-angular';
import * as OktaSignIn from '@okta/okta-signin-widget';



import myAppConfig  from '../../config/my-app-config';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  oktaSignin: any;

  constructor(private oktaAuthService: OktaAuthService) {

    this.oktaSignin = new OktaSignIn({
      logo: 'assets/images/logo_for_favicon.png',
      features: {
        registration: true
      },
      baseUrl: myAppConfig.oidc.issuer.split('/oauth2')[0], // return everything in url before '/oauth2'
      clientId: myAppConfig.oidc.clientId,
      redirectUri: myAppConfig.oidc.redirectUri,
      authParams: {
        pkce: true,         // Proof Key for Code Exchange.
                            // Proof Key for Code Exchange (PKCE, pronounced pixie) 
                            // extension describes a technique for public clients to mitigate
                            // the threat of having the authorization code intercepted.
        issuer: myAppConfig.oidc.issuer,
        scopes: myAppConfig.oidc.scopes
      }
    });


   }



  ngOnInit(): void {

    this.oktaSignin.remove();   // remove previous element that rendered there

    this.oktaSignin.renderEl({
      el: '#okta-sign-in-widget'}, // render element with given id
                                  // this name should be same as div tag id in login.component.html
      (response) => {
        if (response.status === "SUCCESS") {
          this.oktaAuthService.signInWithRedirect();
        }
      },
      (error) => {
        throw error;
      }
    );
  }

}

After authentication okta try to authenticate again that's what maybe put it into infinite loop.

Answer 1

I had the same problem and I solve it like this:

In the my-app-config file in your case, Its probably configured like that, pointing localhost in the redirectUri:

Just change it to your real url for example:

   redirectUri: 'http://example.com/login/callback'

And it should resolve the auth loop.

I hope that solves the problem for you!