Build a Basic CRUD App with Angular 5.0 and Spring Boot 2.0

Developer Blog Comments
41

Vu Nguyen-Cong

I got the same error as Afif. From your guide, I’ve read the 1.0.0 release note and found out that I need to modify the code in src/app/shared/okta/auth.interceptor.ts from

this.oktaAuth.getAccessToken().accessToken

to

await this.oktaAuth.getAccessToken()

But the IDE tells me that I can only use await within an async function. How can I fix this? Thanks.

42

Matt Raible

Can you try adding async in front of the intercept() method?

43

Vu Nguyen-Cong

I did and got the following:

ERROR in src/app/shared/okta/auth.interceptor.ts(12,66): error TS1055: Type ‘typeof Observable’ is not a valid async function return type in ES5/ES3 because it does not refer to a Promise-compatible constructor value.
Types of parameters ‘subscribe’ and ‘executor’ are incompatible.

44

Douglas Webster

Hi
With okta-angular version 1.0.0 the code needs to deal with async functions. I have changed the code in auth.interceptor.ts to


import { Injectable } from ‘@angular/core’;
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from ‘@angular/common/http’;
import { Observable } from ‘rxjs/Observable’;
import { OktaAuthService } from ‘@okta/okta-angular’;
import ‘rxjs/add/observable/fromPromise’ 

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(private oktaAuth: OktaAuthService) {
  }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return Observable.fromPromise(this.handleAccess(request, next));
  }

  private async handleAccess(request: HttpRequest<any>, next: HttpHandler): Promise<HttpEvent<any>> {

    /* Only add to localhost requests since Giphy’s API fails when the request include a token */
    if (request.urlWithParams.indexOf(‘localhost’) > -1) {
      const accessToken = await this.oktaAuth.getAccessToken();
      request = request.clone({
        setHeaders: {
          Authorization: 'Bearer ’ + accessToken
        }
      });
    }
    return next.handle(request).toPromise();
  }
}

This moves the original intercept code and places it into an async function that returns a Promise and the intercept function turns this into an Observable. See https://www.illucit.com/en/… for a fuller explanation.

Also, thankyou Matt for an excellent posting.

45

Matt Raible

Thanks Douglas! I’ll update this article with your fix today. FWIW, you can edit your comment and get code syntax highlighting with Disqus by wrapping code with <pre> and <code> tags. For example:

<pre><code>
code goes here
</code></pre>

46

Matt Raible

This post has been updated to use @okta/okta-angular@1.0.0.

You can see the code changes in the example app on GitHub. Changes to this article can be viewed in okta/okta.github.io#1938.

Please let me know if you find any issues.

47

Vu Nguyen-Cong

Thanks a lot Douglas and Matt!

48

Matt Raible

Oktay: I’m not able to reproduce this issue. I noticed you posted an issue in the example project too and decided to answer all your questions there. In the future, please only post to one place. We get notifications for comments, issues, and Developer Forum posts, so no need to cross-post. It just creates more work for us to answer in multiple places. Thanks!

49

Stephane

Hi, I have followed this blog to create my own application and added a profile page as per the example in https://github.com/okta/sam…. And this works great.

Then I wanted to have access to the user profile data such as the first name and couple of customer attributes that I have created. But they are not returned when calling the function this.oktaAuth.getUser(). What does need to be done in order to get this information?

Thank you!

50

Stephane

Hi,

Bu adding the scope (scope: ‘openid profile email airlines’) in the angular okta config, I now see the profile information but not the customized fields whereas I can see these fields in the okta dashboard.

I have tried to add the customized fields as new scope but this is not working.

51

Matt Raible

Do you have a backend involved in your app? If so, you could likely use on of our SDKs to get the info you’re looking for.

52

Stephane

Apparently I cannot use the Java SDK because it is not compatible with Sprint Boot 2.0.

Is there an example somewhere with the solution you are suggesting?

53

Matt Raible

There’s a couple Java SDKs - 1) the Spring Boot starter and 2) the Okta Java SDK. You can see how to use the Java SDK in Use Okta (Instead of Local Storage) to Store Your User’s Data Securely. Also, even though you can’t use our Spring Boot starter with Spring Boot, you can use Spring Security OAuth and it works.

54

Stephane

I guess the food example is your following post: https://developer.okta.com/…

55

HemanthGk10

Hi @mattraible that’s very clear blog as your other blogs. I am not using Angular JS at the front end. I am using Mustache Template with SpringBoot 2.0…Can you please suggest me what needs to be done after the step “It’s nice that your server is locked down, but now you need to configure your client to talk to it. This is where Okta’s Angular support comes in handy.” in my scenario. Thank you very much in advance.

56

Matt Raible

I would suggest checking out our Spring Security OAuth Samples and seeing if one of them works for your use case. https://github.com/okta/sam…

57

Rémi BOURGAREL

This blog post is perfect, thanks :slight_smile: I just needed to run “npm i rxjs-compat” and remove

58

Jasmine

Oh how I love an online tutoirial where everything works and is up to date. Thank you so much this was awesome!!

59

Binh Thanh Nguyen

Thanks, nice post

60

David Krider

I suspect this may be the more appropriate fix for the problem (but I had already done this, so I don’t know): https://stackoverflow.com/a…