API Request going in loop from interceptor

Questions
1

Hi, I have deployed angular app on dev instance using issuer as https://dev-14684919.okta.com/ and client id for the application created. But when i call backend api the call goes from the interceptor and the page reloads. This is happening in loop and app is stuck there. The backend api is also using the above issuer and client id for authentication. I have also configured deployed app details in api for cors. The api is able to process the request, but the page reloads as soon as the call is gone from next.handle(request).toPromise(). Kindly request you for help.

Also, can we use https://dev-14684919.okta.com/ if we deploying on dev instance or above for testing purpose?

2

Hi @Saurabh_B_LTI!

Are you seeing this after you authenticate and then navigate to a view that makes an HTTP call? Does the view you’re on reload? Or are you redirected to authenticate again?

Can you share a snippet of your interceptor code? You shouldn’t have to call toPromise()

You may want to try using this sample project to see if you observe the same behavior by modifying your issuer, domain, and anything else you want to incorporate from your application.

Let us know how it goes!

3

It happens after authentication, I get the access token from okta.getAccessToken method and send it to the request as a bearer token. This all is happening after deployment to dev instance. Locally it works totally fine without any issue. The only difference I noticed is locally I am calling from http://localhost:8080 and dev instance is https.

Can you please provide sample project?
I am using angular 11 with @okta/okta-angular 3.1.0 package.

4

Well, it would help if I pasted the link in. :sweat_smile:

Here it is

You will have to make some changes to using the Okta SDKs, but the setup otherwise is the same.

5

:grinning: Thanks!
Let me check and update you.

6

Hi @alisaduncan , Below is the updated interceptor code

import {
  HttpEvent,
  HttpHandler,
  HttpInterceptor,
  HttpRequest,
} from "@angular/common/http";
import { Observable, from } from "rxjs";
import { OktaAuthService } from "@okta/okta-angular";
import { Injectable } from "@angular/core";

@Injectable()
export class CustomAuthInterceptor implements HttpInterceptor {
  constructor(private oktaAuth: OktaAuthService) {}

  intercept(
    request: HttpRequest<unknown>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    return next.handle(this.handleAccess(request));
  }

  private handleAccess(request: HttpRequest<any>): HttpRequest<any> {
    // Only add an access token to whitelisted origins
    const allowedOrigins = [
      "http://localhost:4200"
    ];
    if (allowedOrigins.some((url) => request.urlWithParams.includes(url))) {
      const accessToken = this.oktaAuth.getAccessToken();
      if (accessToken) {
        request = request.clone({
          setHeaders: {
            Authorization: `Bearer ${accessToken}`,
          },
        });
      }
    }
    return request;
  }
}

But on deployment its still going into loop after api call is made.

7

Hey there @Saurabh_B_LTI ,

Just to make sure I understand. Are you seeing this looping behavior when you serve locally? Or do you only see this in the deployed application? Do you see any page reloading if you don’t register the interceptor?

Can you share what you see on the network tab in DevTools? Please redact any secrets if you share pics, and you may have to enable “Preserve logs.”

Also, would you mind clarifying what “page reloads” means? Are you saying after you sign in, you navigate to a route that makes a HTTP request, then the app reloads? Can you share anything you see in the Network tab and the DevTools Console?

8

Hi @alisaduncan , The issue has been resolved. Thanks!

9

Fantastic, glad to hear it!

10

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.