Ndtyjky

I am using "adal-angular6": "1.0.68" version.

Here is my configuration ::

private config = {

    tenant: environment.appId,     // tenantId.

    clientId: environment.clientId,

    redirectUri: environment.origin + '/auth-callback', // callback URI.

    postLogoutRedirectUri: environment.origin,

    cacheLocation: 'localStorage',

};

I am not getting refresh token when I call adalService.acquireToken('https://graph.microsoft.com') . Am I mising some configuration ?

No, you cannot get refresh tokens in the front-end.

You need a client secret to exchange refresh tokens for new access tokens, and you can't put a secret in front-end Javascript code, as it is visible to everyone.

I will try to give my code which works, but which doesn't use the wrapper adal-angular6 but rather the official adal-angular from AzureAD.

This is my angular.json part which loads the library:

{

  ...

  "projects": {

    "my-app": {

      ...

      "architect": {

        "build": {

          ...

          "options": {

            ...

            "scripts": [

              "node_modules/adal-angular/dist/adal.min.js"

            ]

This is the part of my authentication service that initializes the library:

declare var AuthenticationContext;

@Injectable(...)

export class AuthService {

  adalConfig = {

    tenant: '*******.com',

    clientId: '12345678-9abc-def0-1234-56789abcdef0',

    redirectUri: environment.redirectPath,

    postLogoutRedirectUri: environment.redirectPath,

    cacheLocation: 'localStorage',

  };



  authContext;



  constructor(http: HttpClient) {

    this.authContext = new AuthenticationContext(this.adalConfig);

  }



  acquireToken(): Observable<string> {

    const func: (a: string, c: (error, token: string) => void) => void = (a, c) => {

      (this.authContext.acquireToken.bind(this.authContext))(a, c);

    };

    const bound = bindCallback(func);

    return bound(this.authContext.config.clientId).pipe(map(([e, r]) => r));

  }

  ...

}

And this is what is happening in my interceptor before every Ajax call:

@Injectable()

export class TokenInterceptor implements HttpInterceptor {

  constructor(auth: AuthService, route: Router) { }



  intercept(request: HttpRequest<any>, next: HttpHandler):

    Observable<HttpSentEvent

    | HttpHeaderResponse

    | HttpProgressEvent

    | HttpResponse<any>

    | HttpUserEvent<any>> {

    const tokenGetter = this.auth.acquireToken();

    const rc = tokenGetter.pipe(

      take(1),

      switchMap(r => {

        const req2 = r && request.clone({

          setHeaders: {

            Authorization: `Bearer ${r}`

          }

        }) || request;

        return next.handle(req2).pipe(

          tap(null, (err: HttpErrorResponse) => {

            if (err.status === 401) {

              ... // handle auth errors, auth again, save url and remake call, etc...

            }

          }),

          catchError((e, c) => { ... })

        );

      }));

    return rc;

  }

The only thing weird about the above is that the library's acquireToken accepts a callback function and I am converting it into an observable by using rxjs's bindCallback but other than that, it simply works.

Notice that the acquireToken method doesn't accept any arguments (contrary to what I said in the comment to the question).