404 after authentication - Angular Spring Boot application

I have an application (Spring Boot + Angular) working perfectly well on my localhost. On the test server though, I get a 404 after OKTA authentication saying

The requested URL /static/callback was not found on this server.
The url containing calback?code=… & status=… is visible in the browser.

The front-end and back-end are deployed separately (back-end jar and front-end dist folder). The requests on test (not on localhost) go through Apache. If an uri looks like http://localhost:4200/users on my local, the corresponding on test is https://test.com/app/app1/users.

I have looked through several similar issues and tried to fix this problem but haven’t been successful.
To redirect all calls to index.html if the requested uri wasn’t found, I have added .htaccess file in static folder containing all of angular’s dist contents.

  RewriteEngine on
  RewriteCond %{REQUEST_URI} !^/index.html$
  RewriteRule ^.*$ /index.html [NC, QSA, L]

I feel there is a disconnect between OKTA returning callback uri with the tokens and the way Apache is handling it.
Can somebody help me in this case?

Do you have the redirect URI set in your Okta app (both on localhost and on the test server)?

Yes, it is.


I am using the same OKTA config both on my local and the test server.

@erin.p The OktaCallbackComponent is not getting executed. I replaced OktaCallbackComponent with a custom callback component, but didn’t see it getting executed.

 const routes: Routes = [
  { path: 'users', canActivate: [OktaAuthGuard], component: UsersComponent },
  { path: 'callback', component: AuthHandleComponent },
  { path: '**', redirectTo: 'users', pathMatch: 'full' },

export class AuthHandleComponent implements OnInit {  
 constructor(private okta: OktaAuthGuard) { this.okta.handleAuthentication()}  
 ngOnInit(): void {  }

   providedIn: 'root'
export class OktaAuthGuard implements CanActivate {
private observer?: Observer<boolean>;
constructor(private okta: OktaAuthService, private router: Router) {this.oktaAuth = okta;}

async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
this.authenticated = await this.okta.isAuthenticated();       
if (this.authenticated) {
    this.isAuthenticated = "true";     
    localStorage.setItem("authenticated", this.isAuthenticated);      
    this.user = await this.okta.getUser();
    const userClaims = await this.oktaAuth.getUser();      
    localStorage.setItem('username', this.userName);
 const result = this.user.groups.find((group) => group === 'admins');
    if (result) {
      localStorage.setItem('role', 'admins');
      return true;
      localStorage.setItem('role', 'user');
      return true;}
   return false;

 oktaConfig = new OktaAuth({
  issuer: environment.issuer,
  clientId: environment.clientId,
  redirectUri: window.location.origin + environment.redirecturi,
  pkce: true

 async handleAuthentication() {
  console.log("handle authentication");
  const tokenContainer = await this.oktaConfig.token.parseFromUrl();
  this.oktaConfig.tokenManager.add('idToken', tokenContainer.tokens.idToken as IDToken);
  this.oktaConfig.tokenManager.add('accessToken', tokenContainer.tokens.accessToken as AccessToken);
if (await this.checkAuthenticated()) {
async checkAuthenticated() {
 // Checks if there is a current accessToken in the TokenManger.
 return !!(await this.oktaAuth.tokenManager.get('accessToken'));

Hi @erin.p, can you suggest something please?

Set the redirect URI in the applications section: Sign in redirect URIs and Sign Out redirect URIs.