I have an Angular frontend that uses a backend API protected by an AWS ALB with OIDC authentication. The ALB will redirect to Okta should the requests not have a valid Jwt token.
However after deployment on the Cloud, the frontend reaches for the ALB and gets 302 responses, with a Location header pointing to my Okta OIDC provider but the frontend does not redirect the user.
How can I have the frontend redirect the user when having a 302 response from the backend and have the OIDC redirect back to the frontend after successful authentication?
Angular provides HttpClientInterceptor which allows you to intercept HTTP requests and responses. So create an interceptor that checks for the status code (302) and the presence of a Location header in the response. If both conditions are met, extract the URL from the Location header and use the Angular router to navigate the user to that URL or simply do the following:
window.location.href = event.headers.get('Location');