Angular 6 Library and Okta-Sign-In Widget

Questions
1

I have Okta in an Angular library.

But after I login it gives me an error that it can’t find:

http://localhost:4200/implicit/runtime.js
http://localhost:4200/implicit/pollyfills.js
http://localhost:4200/implicit/styles.js
http://localhost:4200/implicit/vendor.js
http://localhost:4200/implicit/main.js

I’m not sure why it’s looking in the implicit path.

My library module is setup like this:

const moduleRoutes: Routes = [
  {path: 'implicit/callback', component: OktaCallbackComponent }
]

const oktaConfig = Object.assign({
  onAuthRequired: ({oktaAuth, router}) => {
    // Redirect the user to your custom login page
    router.navigate(['/login']);
  }
}, configService.oidcInfo);

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    RouterModule.forChild(moduleRoutes),
    OktaAuthModule.initAuth(oktaConfig),
    MaterialModule,
  ],

And the Index.html looks like this:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CoreLib</title>
  <base href="./">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
</body>
</html>
2

Are you using url rewriting with your HTML5 url? If not switch your url type to hash and make your callback #implicit/callback.

3

I switched the base href to

base href="/"

So now it’s not complaining about the files anymore but now I have a new problem that it’s not saving the tokens to local storage. It just leaves them in the URL.

4

I currently have the Okta Sign-In Widget in a login.component.ts. However unless I manually call the handleauthentication method it will not save the tokens to local storage. This is within an Angular library.

My code is like this:

  ngOnInit() {
    // can't use required since the google auto-fill on passwords doesn't update the form

      if(this.configService.authorizationType == 'okta')
      {

        this.signIn.renderEl(
          { el: '#sign-in-widget' },
          () => {
            /**
             * In this flow, the success handler will not be called because we redirect
             * to the Okta org for the authentication workflow.
             */
          },
          (err) => {
            throw err;
          },
        );


      this.authService.getTokens();


      }

My getTokens method looks like this:

  public async getTokens() {

    await this.oktaService.handleAuthentication();
    this.router.navigateByUrl(this.redirectUrl);

  }
5

I had to manually add it to localstorage.

    this.oktaSignIn.renderEl({ el: '#okta-login-container' }, (res) => {
        console.log(res)
        if (res.status === 'SUCCESS') {
            this.oktaSignIn.remove();
            this.changeDetectorRef.detectChanges();
            this.oktaSignIn.tokenManager.add('access_token', res[1]);
            location.href = 'goes to homepage';
        }
    });
6

Hi Shawn. I’m using the OpenID Connect Implicit flow from what I see in the Okta sample code it says that the success handler won’t be executed. In the sample I get from Okta it has this comment for the Sign-In Widget as well. I’m not sure if there is a way that the response is executed. I previously tried to use the success handler and put a simple console.log(res) but it never executed.

        /**
         * In this flow, the success handler will not be called because we redirect
         * to the Okta org for the authentication workflow.
         */
1 Like