Cookie.deleteAll() not working properly in IE browser.

[bobby-091]

I am using ng2-Cookie for storing token value and using this cookie in different angular components by importing it. When clicking on logout button (logout method placed in navbar component) from anywhere (different states like home, account, managers components) in the application it's redirecting to the login page(login component) in Chrome and Firefox (working fine) browsers. But it's not working properly in IE browser. In IE, if logout event fired from home page (homecomponent.ts file, starting of the application after immediate login) then only application is logging out. And when clearing the cookies of the browser application is redirecting to the login page in Firefox and Chrome browsers but not working as expected in IE browser. Below is the code I am using

navbar.component.ts Logout() { Cookie.deleteAll(); this._router.navigate(['/login']); }

login.component.ts ngOnInit() { let token = Cookie.get('auth_token'); if (token != null && token != undefined && !this._roleauth.isTokenExpired(token)) { this._router.navigate(['/home']); } }

Is it the behavior of ng2-cookie in IE browser? or am I doing in wrong way? Can anyone please help me with this.

[phoude]

I am using another Cookie angular package but having issues in IE/Edge. Was considering this package until I saw this issue... Oh my!

[Bigous]

Hi @bobby-091 , IE or EDGE? if IE, what version?

Cookies could be used for that. The problem is that IE is not a browser that follows the standards.

You are using the library correctly, the problem may be with your IE version. I know Wondows 10 Fall creator update has changed how cookies are stored, but I don't know if they changed the way they work.

Another source to look for is this MSDN blog. As you can see, lots of things are weird in IE.

[phoude]

IE11 & Edge

From: Richard Natal notifications@github.com Sent: Tuesday, June 26, 2018 4:04 PM To: BCJTI/ng2-cookies ng2-cookies@noreply.github.com Cc: Pascal Houde Pascal.Houde@smith.co; Comment comment@noreply.github.com Subject: Re: [BCJTI/ng2-cookies] Cookie.deleteAll() not working properly in IE browser. (#62)

Hi @bobby-091https://github.com/bobby-091 , IE or EDGE? if IE, what version?

Cookies could be used for that. The problem is that IE is not a browser that follows the standards.

You are using the library correctly, the problem may be with your IE version. I know Wondows 10 Fall creator update has changed how cookies are stored, but I don't know if they changed the way they work.

Another source to look for is this MSDN bloghttps://blogs.msdn.microsoft.com/ieinternals/2009/08/20/internet-explorer-cookie-internals-faq/. As you can see, lots of things are weird in IE.

— You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://github.com/BCJTI/ng2-cookies/issues/62#issuecomment-400443852, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ATapg_--CZ1i-eZysVb5s6ngjIwPnbVtks5uApPBgaJpZM4U2Udo.

[bobby-091]

Hi @Bigous, I am using Edge and also tried in IE v10. But in both versions, It's not deleting browser cookies. On every app URL, I had applied "authentication guard". Authentication guard will fire prior to every page request. And check whether the cookie available or not, If cookie available then it processes the request otherwise redirects to login page. This functionality is working fine in chrome and Firefox browsers but not in IE/Edge.

I have 2 problems with ng2-cookie package in IE/Edge.

Case 1.

1. Login to the application using app credentials
2. delete the browser(IE/Edge) cookies and reload the app. It`s not redirecting to login page.

Case 2

1. Login to the application using app credentials.
2. Navigate to any other state (like about, contact, manage components) of the application (not to home state).
3. Click on logout, it`s redirecting to homepage. From home page again click on logout, then the application is logging out.

If logout operation performed from the homepage then only application is logging out.

Note: I am creating Cookie in "app.service.ts" file and using this cookie in the entire application (components) where ever needed. Deleting the cookie in "navbar.component.ts" in logout method.

Below is the code: login.component.ts import { Cookie } from 'ng2-cookies'; import { AuthService } from '../auth.service';

@Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'] }) export class LoginComponent implements OnInit {

constructor( private _authService: AuthService) { }

ngOnInit() { let token = Cookie.get('auth_token'); if (token != null && token != undefined && !this._roleauth.isTokenExpired(token)) { this._router.navigate(['/home']); } }

Login() { return this._authService.login(this.loginForm.value).subscribe((res) => { if (res != null) { this._router.navigate(['/home']); } }, (err) => { this.errorMessage = 'Invalid Username/Password'; this.spinnerService.hide(); }); } }

app.services.ts import { Injectable, Inject } from '@angular/core'; import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'; import { Observable } from 'rxjs'; import 'rxjs/add/operator/map'; import { RequestOptions } from 'http'; import { Cookie } from 'ng2-cookies';

@Injectable() export class API { apiEndpoint: string; constructor(private http: HttpClient) { this.apiEndpoint = 'http://**'; // application api url } login(url: string, body: any) { const reqheader = new HttpHeaders({ 'No-Auth': 'True' }); return this.http.post(this.apiEndpoint + url, body, { headers: reqheader }) .map(res => { Cookie.set('auth_token', res.token); return res; }) .catch((e: any) => Observable.throw(this.errorHandler(e))); } }

navbar.component.ts import { Component } from '@angular/core'; import { Router } from '@angular/router'; import { Cookie } from 'ng2-cookies';

@Component({ selector: 'app-nav-bar', templateUrl: './nav-bar.component.html', styleUrls: ['./nav-bar.component.css'] }) export class NavBarComponent implements OnInit { constructor(public _router: Router) { // do something }

ngOnInit() { // do something }

Logout() { Cookie.deleteAll(); this._router.navigate(['/login']); } }

auth.guard.ts import { Injectable } from '@angular/core'; import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; import { API } from './Common/api.service'; import { Jwts } from './models/jwts'; import { Cookie } from 'ng2-cookies';

@Injectable() export class AuthGuard implements CanActivate { constructor(private api: API, private router: Router, public roleauth: Jwts) { }

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { let token = Cookie.get('auth_token'); if (token != undefined && token != null && !this.roleauth.isTokenExpired(token)) { return true; } else { setTimeout(() => { Cookie.delete('auth_token'); Cookie.deleteAll(); this.router.navigate(["/login"]); }, 150); return false; } } }

Please help me on this. I don't know why ng2-cookie package behaving strange in IE/Edge.

[Bigous]

Hi people, I really can't figure out whats happening.

I've tested on Edge and it's working for me with the example at wiki where you can create and destroy all the cookies...

I saw you are using Cookie global exported instance inside a service, you have CookieService (which is the same, but as you are using the service style...).

Can you try with that example so we can stick with just the library?

[]'s