How to check for existing session in Self hosted Okta Widget in Angular app? How to login using social IdPs?

Hi,

We are migrating our app to an Angular 9 now and we are facing some issues/mismatches from what we had previously with “okta-signin-widget/2.14.0”.

We want to support:

  1. Hosted Okta widget
  2. Enabled self registration with Okta
  3. Enabled social logins - facebook/google
  4. We want to check for active session if the user is already logged in in the underlying Okta instance

Issues:

  1. How to check for active session with Okta from Angular App
  1. How to redirect the user AFTER facebook/google login to the Angular App AND still have logged in user with proper access token in the Angular app
  • we do have properly configured facebook app and Okta facebook IdP. The hosted widget shows the facebook login button, the flow works, but the user ends up in the Otka Apps screen.
  • previously we were using the Settings->Customization -> Default App for Sign-In Widget feature in the Okta Classical console. But now it redirects to the root of the Angular app and that’s it.
  • if we solve #1 - I think #2 will work seamlessly
  1. Where to intercept both self registered and social IdP registered users in the Angular app, so I can properly create those users in my backend API
  • we do want single place in the Angular App to handle the login event - for both existing and new users, no matter self registered or coming from facebook/google. Where is the best place to do this and hopefully how…?

I do know that the post got huge, but I think it is better to have the context instead of asking separate questions. Any help will highly appreciated. Tutorials are also welcome.

I have spent 2 weeks digging into forum posts, okta js libraries, okta js Angular libraries, etc.

Regards,
Pirin

I managed to get existing session with Okta server accessing the private “oktaAuth” field from the OktaAuthService like that:
“let oktaSession = await this.oktaAuthService.oktaAuth.session.get();”
The field is made private on purpose, and I really don’t like accessing it, but I don’t see other options currently.

I have also found
“await this.oktaAuthService.oktaAuth.token.getWithoutPrompt({responseType:‘token’})”
which seams to return valid accessToken and idToken… the question now is how to do this the right way and properly notify the Angular OktaAuthService that there is valid token.
Or even better - to make Angular OktaAuthService to initiate authorization process on its own…

Any help is welcome :slight_smile:

@pirin.karabenchev May I ask if you referred this doc before?


In this doc, the service takes care of authenticating the user and, when successful, storing the token in the browser’s local storage as well as notifying the ServerService of the token.
Let us know if this could be helpful.

@Lijia, this article describes the very straight forward way of adding JWT authentication to an Angular client, first with Express and node.js, then with Okta as Identity Provider… I see nothing related to social logins and checking for existing session with Okta…

  1. The method you are using is coming from the underlying AuthJS library and accessing it directly this way is explicitly supported in okta-angular. Are you using Okta’s Angular SDK? In any case, using AuthJS’ session.exists() method is a valid way to check if a user has an active session (it just calls the Sessions endpoint).
  2. Are you using IDP Discovery or dedicated Social Login buttons; please see the linked articles based on your use case. Otherwise, if you always want users redirected to this specific application, setting it as the Default App will achieve the same end result and be much cleaner/simpler to maintain.
  3. I think I’m a little confused about what you’re trying to do here. Maybe you can explain your use case a bit further, because I can’t tell what piece is missing.