Here is AuthInterceptor:
#Injectable()
export class AuthInterceptor implements HttpInterceptor {
constructor(private authService: AuthService) { }
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const Token = this.authService.getToken();
if (!Token) {
return next.handle(req);
}
// Refresh Token first
if (Token.expiresRefreshToken && Number(Token.expiresRefreshToken) < Date.now()) {
this.authService.refreshTokenRefresh(Token.tokenref)
.subscribe((response) => {
localStorage.setItem('tokenref', response.tokenref);
localStorage.setItem('tokenrefexp', response.tokenrefexp);
});
}
// Then next Access Token
if (Token.expiresToken && Number(Token.expiresToken) < Date.now()) {
this.authService.refreshToken(Token.tokenref)
.subscribe((response) => {
localStorage.setItem('token', response.token);
localStorage.setItem('tokenexp', response.tokenexp);
});
}
// Original request with updated custom headers
return next.handle(req.clone({
headers: req.headers
.set('Authorization', 'Bearer ' + localStorage.getItem('token'))
.set('X-Auth-Provider', localStorage.getItem('provider'))
}));
}
}
I need to evaluate those conditions before sending the request because some custom headers may change after methods refreshToken and refreshTokenRefresh. Is there a way to evaluate everything inside a RxJS operator? First condition (refreshTokenRefresh), then second (refreshToken) and finally the req.
Update: I'm getting this error: RangeError: Maximum call stack size exceeded. How to fix this?
We want to wait until some requests will be completed (evaluate order does not matter?) than do another request.
const queue = this.handleRefreshToke(this.handleRefreshTokenRefresh([])); - place there all request that should be done before we call next.handle.
Use the forkJoin to wait until all request (placed in queue) will be completed than map to another Obervable ( mergeMap ).
PS We could also move handleRefreshTokenRefresh and handleRefreshToke to separated HttpInterceptor.
EDITED To prevent recursive call of interceptors we should skip interceptors for refreshTokens call.
export const InterceptorSkipHeader = 'X-Skip-Interceptor';
#Injectable()
export class AuthInterceptor implements HttpInterceptor {
constructor(private authService: AuthService) { }
handleRefreshTokenRefresh(queue: Observable<void>[]) {
const Token = this.authService.getToken();
if (Token.expiresRefreshToken &&
const req = this.authService.refreshTokenRefresh(Token.tokenref)
.pipe(tap((response) => {
localStorage.setItem('tokenref', response.tokenref);
localStorage.setItem('tokenrefexp', response.tokenrefexp);
}));
return [...queue, req];
}
return queue;
}
handleRefreshToke(queue: Observable<void>[]) {
const Token = this.authService.getToken();
if (Token.expiresToken && Number(Token.expiresToken) < Date.now()) {
const req = this.authService.refreshToken(Token.tokenref)
.subscribe((response) => {
localStorage.setItem('token', response.token);
localStorage.setItem('tokenexp', response.tokenexp);
});
return [...queue, req];
}
return queue;
}
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
if (req.headers.has(InterceptorSkipHeader)) {
const headers = req.headers.delete(InterceptorSkipHeader);
return next.handle(req.clone({ headers }));
}
const Token = this.authService.getToken();
if (!Token) {
return next.handle(req);
}
const queue = this.handleRefreshToke(this.handleRefreshTokenRefresh([]));
return forkJoin(queue).pipe(
mergeMap(()=>{
return next.handle(req.clone({
headers: req.headers
.set('Authorization', 'Bearer ' + localStorage.getItem('token'))
.set('X-Auth-Provider', localStorage.getItem('provider')),
}));
})
);
}
}
Add InterceptorSkipHeader to refreshTokens to skip interceptors.
// AuthService
refreshTokenRefresh(token){
const headers = new HttpHeaders().set(InterceptorSkipHeader, '');
return this.httpClient
.get(someUrl, { headers })
}
refreshToken(token){
const headers = new HttpHeaders().set(InterceptorSkipHeader, '');
return this.httpClient
.get(someUrl, { headers })
}
Related
I am new to Nest.JS and apparently don't understand how to use observables so hopefully ya'll can help.
Basically I have a method that needs to:
first: login to hashicorp vault and return a client_token via an http call.
second: if we got a token back from vault, we then check that the request contained a certification-id, if not we have to request a new certification to be generated. Which requires the client_token from vault.
The problem I am having is that when I call vault to get the client_token, it does not get returned in time for me to be able to use it to generate a new cert via a second api call.
What can I do in order to be able to use the client_token in the next step?
Here is the code for my latest attempt:
Controller:
#Controller('user')
export class UserController {
constructor(private readonly userService: UserService) {}
#Post('getUserCert')
async getUserCert(#Body() loginDto: vaultLoginReqDto) {
return this.userService.getCertificate(loginDto);
}
}
Controller calls the getCertificate method:
getCertificate(loginDto: vaultLoginReqDto) {
this.loginToVault(loginDto);
if (this.vault_token) {
if (loginDto.cert_id) {
this.checkForExistingCert(loginDto);
} else {
this.generateNewCert(this.vault_token);
}
} else {
throw new Error('User is not authorized to access Vault.');
}
}
The logon method:
loginToVault(loginDto: vaultLoginReqDto) {
const url = 'http://vault:8200/v1/auth/jwt/login';
const payload: vaultLoginReqDto = {
jwt: loginDto.jwt,
role: loginDto.role,
};
try {
this.httpService
.post(url, payload)
.subscribe((res: AxiosResponse<vaultLoginResDto>) => {
this.vault_token = res.data.auth.client_token;
});
} catch (e) {
this.throwError(e, url, 'Unable to login to vault');
}
}
the problem method is the generateNewCert method. It is not getting the vault_token in time.
generateNewCert(vault_token: string): Observable<string> {
const url = `http://127.0.0.1:8200/v1/xxxx/xxxx/issue/reader`;
const payload = {
common_name: 'id.xxxx.com',
};
const headers = {
'X-Vault-Token': vault_token,
};
try {
return this.httpService.post(url, payload, { headers: headers }).pipe(
map((res: AxiosResponse<vaultGetCertResDto>) => {
return res.data.data.certificate;
}),
);
} catch (e) {
this.throwError(e, url);
}
}
I appreciate the help!
The easiest way to make it work is the convert to a Promise so you can wait for the result.
loginToVault(loginDto: vaultLoginReqDto) {
const url = 'http://vault:8200/v1/auth/jwt/login';
const payload = {
jwt: loginDto.jwt,
role: loginDto.role,
};
return this.httpService
.post(url, payload)
.pipe(
catchError(() => {/** ...handleError **/}),
map((res) => {
this.vault_token = res.data.auth.client_token;
return this.vault_token;
}),
)
.toPromise()
}
Now, you can use async / await at getCertificate
async getCertificate(loginDto: vaultLoginReqDto) {
await this.loginToVault(loginDto);
// or const vault_token = await this.loginToVault(loginDto)
if (this.vault_token) {
if (loginDto.cert_id) {
this.checkForExistingCert(loginDto);
} else {
this.generateNewCert(this.vault_token);
}
} else {
throw new Error('User is not authorized to access Vault.');
}
}
If you decide to stick with the observables, you can return an observable from the loginToVault method as opposed to subscribing to it
loginToVault(loginDto: vaultLoginReqDto): Observable<string> {
const url = 'http://vault:8200/v1/auth/jwt/login';
const payload = {
jwt: loginDto.jwt,
role: loginDto.role,
};
return this.httpService
.post(url, payload)
.pipe(
catchError(() => { /* handle errors */ }),
map((res) => res.data.auth.client_token)
)
}
Then in getCertificate method, you subscribe to loginToVault and handle the logic
getCertificate(loginDto: vaultLoginReqDto) {
this.loginToVault(loginDto)
.pipe(
tap(vault_token => {
if (!vault_token) {
throw new Error('User is not authorized to access Vault.');
}
})
)
.subscribe(vault_token => loginDto.cert_id ?
this.checkForExistingCert(loginDto) :
this.generateNewCert(vault_token)
)
}
The vault_token is passed from one service to another and thus will be accessible in the generateNewCert method. You do not need to declare it globally
I am trying to call the MSAL silentTokenrefresh method from Angular authInterceptor whenever the 401 hits. And then i am trying to recall the failed request again with a new token so the service won't be interrupted. I have followed this stackoverflow link (answered by Andrei Ostrovski) and implemented the same in my application.
There are two problem with refreshToken() method.
the catchError expects return variable where i put EMPTY. The code is happy, but it is NOT triggering back the failed request where the total purpose is not achieved. It means that whenever it encounters 401 and it is allowing to acquire the new token and then it is not triggering the failed requests.
To resolve the above one, i just took another approach (instead of pipe, i used subscribed but there the return is not applicable) and then it became completely invalid.
Could you please suggest me here to make it work?
My complete authInterceptor file:
addAuthHeader(request) {
const tokenType = "Bearer";
const authHeader = this.sessionService.getAccessToken();
if (authHeader) {
return request.clone({
setHeaders: {
"Authorization": tokenType + " "+ authHeader
}
});
}
return request;
}
refreshToken(): Observable<any> {
if (this.refreshTokenInProgress) {
return new Observable(observer => {
this.tokenRefreshed$.subscribe(() => {
observer.next();
observer.complete();
});
});
} else {
this.refreshTokenInProgress = true;
// Getting the scope.
const loginRequest: { scopes: any } = {
scopes: ['openId','profile'],
};
return this.msalAuthService.acquireTokenSilent(loginRequest).pipe(
tap((payloadInfo)=>{
this.authServices.setSessions(payloadInfo);
this.refreshTokenInProgress = false;
this.tokenRefreshedSource.next();
}),
catchError(() => {
this.refreshTokenInProgress = false;
this.authServices.logout();
return EMPTY;
})
)
}
}
handleResponseError(error, request?, next?) {
// Invalid token error
if (error.status === 401) {
return this.refreshToken().pipe(
switchMap(() => {
request = this.addAuthHeader(request);
return next.handle(request);
}),
catchError(e => {
if (e.status !== 401) {
return this.handleResponseError(e);
} else {
this.authentiCationService.logout();
this.router.navigate(["logout"], {
replaceUrl: true
});
}
}));
}
}
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
this.totalRequests++;
req = req.clone({ headers: req.headers.set("Accept", "*/*") });
req = req.clone({
headers: req.headers.set("Content-Type", "application/json")
});
req = this.addAuthHeader(req);
const started = Date.now();
return next.handle(req).pipe(
tap(
(event: HttpEvent<any>) => {
if (event instanceof HttpResponse) {
// some internal logic for the success scenario
}
},
(err: any) => {
this.handleResponseError(err, req, next);
}
)
);
}
The compile time error you are getting is because you are returning the Subscription instead of the Observable. Please take a look at the difference between them: https://angular.io/guide/observables
You have to return the Observable from your code. In catchError return Observable.throw(error.statusText);
When I login API sends to me the token and token-life-time , when token-life-time is going to be end , I refresh my token by sending request to API and receive new token and new refresh-token-time.
When I refresh or navigate to another page (at the moment when token-life-time is over) my interceptor sends old value of token from LocalStorage and API gives me an error 'Not correct token' when I again refresh or navigate to another page it sends correct token.
But it repeats when the token-life-time is going to be over as described above.
Here is my token-interceptor.service.ts
import { Injectable } from '#angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpHeaders } from '#angular/common/http';
import { Observable } from 'rxjs';
import { LoginService } from '../services/login.service';
#Injectable()
export class TokenInterceptorService implements HttpInterceptor {
constructor(
private loginService: LoginService
) { }
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
if (
this.loginService.isLogged
) {
const token = localStorage.getItem('access-token');
const headers = new HttpHeaders().set('Authorization', `Bearer ${token}`);
request = request.clone({ headers: headers });
}
return next.handle(request);
}
}
It takes token and send request to API.
I have the login.service.ts with login and refresh function .Login function put token value into the LocalStorage and Refresh function refreshes the token in LocalStorage if isNeedToRefresh var is true and it works well.
refresh(): Observable<boolean> {
return this.http.post(`${environment.auth}/refresh`, {
token_hash: localStorage.getItem('refresh-token')
}).pipe(
map((res: any) => {
if (res.access && res.refresh) {
localStorage.setItem('access-token', res.access.hash);
localStorage.setItem('expires-at-access', res.access.expires_at);
localStorage.setItem('refresh-token', res.refresh.hash);
localStorage.setItem('expires-at-refresh', res.refresh.expires_at);
return true;
} else {
this.notificationService.error(res && res.result_descr || '');
return false;
}
}),
catchError(() => of(false))
);
}
Here is where I refresh the token in login.component.ts
ngOnInit() {
if (this.loginService.isLogged) {
if (this.loginService.isNeedToRefresh === true) {
this.loginService.refresh().subscribe((res: boolean) => {
if (res === true) {
this.router.navigate(['']);
}
});
} else if (this.loginService.isNeedToRefresh === false) {
this.router.navigate(['']);
}
}
}
Also I update my token in app.component.ts
ngOnInit() {
$(document).on('click', '[href="#"]', e => e.preventDefault());
this.router.events.subscribe((val) => {
if (val instanceof NavigationEnd) {
if (!(val.url.indexOf('/login') === 0)) {
this.authWatcher();
}
}
});
}
authWatcher() {
if (this.loginService.isLogged) {
if (this.loginService.isNeedToRefresh === true) {
this.loginService.refresh().subscribe((refresh: boolean) => {
if (refresh === false) {
this.authModalRef = this.modalService.show(this.staticModal, { backdrop: 'static' });
} else {
this.loginService.checkToken().subscribe((check: boolean) => {
if (!check) {
this.logoutService.logout();
this.router.navigate(['login']);
}
});
}
});
}
}
What's the best way for my interceptor to work well ?
Little update , here is how I check isNeedToRefresh
get isNeedToRefresh(): boolean {
const accessExpireTimestamp = new Date(
localStorage.getItem('expires-at-access')
).getTime();
const refreshExpireTimestamp = new Date(
localStorage.getItem('expires-at-refresh')
).getTime();
const nowTimestamp = new Date().getTime();
if (nowTimestamp >= accessExpireTimestamp) {
if (nowTimestamp >= refreshExpireTimestamp) {
return null; // Refresh token expired
} else {
return true; // Refresh token not expired
}
}
return false;
}
This desicion is worked for me , if someone else would meet such issue
I have fully re-writed my interceptor , basing on this link
import { Injectable } from '#angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '#angular/common/http';
import { LoginService } from '../services/login.service';
import { Observable, BehaviorSubject, Subject } from 'rxjs';
import { switchMap, take, filter } from 'rxjs/operators';
#Injectable()
export class TokenInterceptorService implements HttpInterceptor {
private refreshTokenInProgress = false;
private refreshTokenSubject: Subject<any> = new BehaviorSubject<any>(null);
constructor(public loginService: LoginService) { }
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
if (request.url.indexOf('refresh') !== -1) {
return next.handle(request);
}
const accessExpired = this.loginService.accessExpired;
const refreshExpired = this.loginService.refreshExpired;
if (accessExpired && refreshExpired) {
return next.handle(request);
}
if (accessExpired && !refreshExpired) {
if (!this.refreshTokenInProgress) {
this.refreshTokenInProgress = true;
this.refreshTokenSubject.next(null);
return this.loginService.refresh().pipe(
switchMap((authResponse) => {
console.log('authResponse ', authResponse)
if (authResponse) {
const token = localStorage.getItem('access-token');
this.refreshTokenInProgress = false;
this.refreshTokenSubject.next(token);
return next.handle(this.injectToken(request));
} else {
return next.handle(request);
}
}),
);
} else {
return this.refreshTokenSubject.pipe(
filter(result => result !== null),
take(1),
switchMap((res) => {
return next.handle(this.injectToken(request))
})
);
}
}
if (!accessExpired) {
return next.handle(this.injectToken(request));
}
}
injectToken(request: HttpRequest<any>) {
const token = localStorage.getItem('access-token');
return request.clone({
setHeaders: {
Authorization: `Bearer ${token}`
}
});
}
}
When I'm trying to subsrcibe to a post request, it always returns the TypeError: result is null
I'm using a Angular CLI that connects with a Spring boot application, with a simple login page. Where I want to save the header of my response in local storage
This is the stacktrace:
"LoginComponent.prototype.login/<#webpack-internal:///../../../../../src/app/components/login/login.component.ts:32:13\nSafeSubscriber.prototype.__tryOrUnsub#webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:245:13\nSafeSubscriber.prototype.next#webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:192:17\nSubscriber.prototype._next#webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:133:9\nSubscriber.prototype.next#webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:97:13\nMapSubscriber.prototype._next#webpack-internal:///../../../../rxjs/_esm5/operators/map.js:88:9\nSubscriber.prototype.next#webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:97:13\nFilterSubscriber.prototype._next#webpack-internal:///../../../../rxjs/_esm5/operators/filter.js:92:13\nSubscriber.prototype.next#webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:97:13\nMergeMapSubscriber.prototype.notifyNext#webpack-internal:///../../../../rxjs/_esm5/operators/mergeMap.js:156:13\nInnerSubscriber.prototype._next#webpack-internal:///../../../../rxjs/_esm5/InnerSubscriber.js:27:9\nSubscriber.prototype.next#webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:97:13\nonLoad#webpack-internal:///../../../common/esm5/http.js:2310:21\nZoneDelegate.prototype.invokeTask#webpack-internal:///../../../../zone.js/dist/zone.js:421:17\nonInvokeTask#webpack-internal:///../../../core/esm5/core.js:4939:24\nZoneDelegate.prototype.invokeTask#webpack-internal:///../../../../zone.js/dist/zone.js:420:17\nZone.prototype.runTask#webpack-internal:///../../../../zone.js/dist/zone.js:188:28\nZoneTask.invokeTask#webpack-internal:///../../../../zone.js/dist/zone.js:496:24\ninvokeTask#webpack-internal:///../../../../zone.js/dist/zone.js:1517:9\nglobalZoneAwareCallback#webpack-internal:///../../../../zone.js/dist/zone.js:1543:17\n"
This is my login.service.ts:
const httpOptions = { headers: new HttpHeaders({'Content-type': 'application/json'}) };
#Injectable() export class LoginService {
private loginUrl = 'https://music-makers.herokuapp.com/login';
constructor(private http: HttpClient) { }
public login(user: User): Observable<any> {
return this.http.post(this.loginUrl, user, httpOptions); }
And my login.components.ts:
export class LoginComponent implements OnInit {
model: any = {};
constructor(private loginService: LoginService, public router: Router) {
}
ngOnInit() {
}
login() {
const user = <User>({
email: this.model.email,
password: this.model.password,
});
console.log('email: ' + user.email + '\npass: ' + user.password);
this.loginService.login(user)
.subscribe(
result => {
// Handle result
localStorage.setItem('Authorization', result.headers.get('Authorization'));
console.log(result);
},
error => {
// Handle error
console.log('Error');
},
() => {
console.log('complete');
// No errors, route to new page
}
);
}
}
Your service should be use map() to return as an observable collection
public login(user: User): Observable<any> {
return this.http.post(this.loginUrl, user, httpOptions)
.map(responce => <any>responce)
.catch(error => {
return Observable.throw(error);
});
}
I'm having some problems with my app login page. I'm new with Ionic 2 and Angular and I have tried to figure this out with help of Google but no success so far...
These lines here are causing the problem, alert is returning "undefined" as soon as I click login button, even thought it should wait for response.
let accessToken = this.getAccessToken();
let details = this.getProfileDetails(accessToken);
alert(JSON.stringify(details));
Whole code:
import { Component } from '#angular/core';
import { NavController, Platform } from 'ionic-angular';
import { FbProvider } from '../../providers/fb-provider';
import { TabsPage } from '../tabs/tabs';
import { Http } from '#angular/http';
import 'rxjs/add/operator/map';
#Component({
selector: 'page-login',
templateUrl: 'login.html'
})
export class LoginPage {
platform
fb
email
name
id
constructor(public navCtrl: NavController, pf: Platform, fbProvider: FbProvider, public http: Http) {
this.platform = pf;
this.fb = fbProvider;
this.email = '';
this.name = '';
this.id = '';
}
ionViewDidLoad() {
console.log('Hello LoginPage Page');
}
fbLogin() {
let accessToken = this.getAccessToken();
let details = this.getProfileDetails(accessToken);
alert(JSON.stringify(details));
}
getAccessToken(){
this.fb.login().then((fbLoginData) => {
let params = new FormData();
params.append('facebookAccessToken', fbLoginData.authResponse.accessToken);
this.http.post('http://myHostUrl/api/accessToken', params).map(res => res.json())
.subscribe(
data => {
return data.accessToken;
},err => {
alert(err);
}
);
},(err) => {
alert('Facebook login failed');
});
}
getProfileDetails(accessToken){
let params = new FormData();
params.append('accessToken', accessToken);
this.http.post('http://myHostUrl/api/userDetails', params).map(res => res.json())
.subscribe(
data => {
return data;
},err => {
alert(err);
}
);
}
}
It's undefined because you need to wait the asynchronous functions to finish. The following code it's done with rxjs to manage the asynchrony of the two functions and the http calls. try it.
fbLogin() {
this.getAccessToken()
.switchMap(accessToken => this.getProfileDetails(accessToken))
.first() // Just one and complete ....
.subscribe(
details => alert(JSON.stringify(details)),
error => alert(error)
);
}
getAccessToken() : Observable<any> {
return Observable.fromPromise(<Promise<any>> this.fb.login())
.map(fbLoginData => fbLoginData.authResponse.accessToken)
.switchMap(accessToken => {
let params = new FormData();
params.append('facebookAccessToken', accessToken);
return this.http.post('http://myHostUrl/api/accessToken', params)
.map(res => res.json())
.map(data => data.accessToken)
});
}
getProfileDetails(accessToken) : Observable<any>{
let params = new FormData();
params.append('accessToken', accessToken);
return this.http.post('http://myHostUrl/api/userDetails', params).map(res => res.json());
}