Angular OKTA authentication always returns false

Question

I have followed this documentation to create a test app https://developer.okta.com/docs/guides/sign-into-spa-redirect/angular/main/

1. I am able to see OKTA Sign in page
2. After entering valid credentials it struck at http://localhost:4200/login/callback?code=xxxxxxxx&state=xxxxxxxxx

this.isAuthenticated$ = this._oktaStateService.authState$.pipe(
      filter((s: AuthState) => !!s),
      map((s: AuthState) => {
        console.log(s);
        return s.isAuthenticated ?? false}

      )
    );

is returning false always

I have added http://localhost:4200 as Trusted Origins

Answer 1

Did you add the callback route pointing to the OktaCallbackComponent? See docs for handling the callback.

You can also see an example Angular app using Okta redirect in this GitHub repo.

Answer 2

I'm using okta with angular (v13): "@okta/okta-angular": "^6.0.0", "@okta/okta-auth-js": "^7.0.2",

And I had same issue on my onInit, isAuthenticated never returning true. What curious_debugger posted above there was really happening with my app.

I was able to solve this issue by adding oktaStateService and subscribe authState

 this.isAuthenticated$ = this.oktaStateService.authState$.pipe(
      filter((s: AuthState) => !!s),
      map((s: AuthState) => s.isAuthenticated ?? false)
    );

 this.isAuthenticated$.subscribe(isAuthenticated => {
      this.isAuthenticated = isAuthenticated;
 ...

Hope this help, let me know if it makes sense. Thanks