404 after authentication - Angular Spring Boot application

Questions
,
1

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?

2

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

3

Yes, it is.

http://localhost:4200/callback
https://test.com/app/app1/callback

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

4

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

5 
 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 {  }
}


@Injectable({
   providedIn: 'root'
})
export class OktaAuthGuard implements CanActivate {
userName;
oktaAuth;
authenticated;
isAuthenticated:string;  
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;
    }else{
      localStorage.setItem('role', 'user');
      this.router.navigate(['/users']);
      return true;}
}
   this.okta.signInWithRedirect();
   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()) {
  this.observer?.next(true);
}
this.router.navigate(['/users']);
}      
async checkAuthenticated() {
 // Checks if there is a current accessToken in the TokenManger.
 return !!(await this.oktaAuth.tokenManager.get('accessToken'));
}
}
6

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

7

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