Reputation: 6417
I'm having a weird problem in my Ionic 5 React app on Android. The app logs in to a Drupal 8 backend and gets a JWT token for authentication.
However, after making some recent changes to my app and Drupal, the app is now getting a session cookie as well (the Drupal session cookie). This would normally be fine, but when I log out of the app, even though I see the session cookie get deleted from Cookies: http://localhost in Chrome on my dev machine, when I try to log back in on the app, the app is using the Drupal session cookie, which results in an error: {"message":"This route can only be accessed by anonymous users."}
.
Obviously, I should not be trying to log in when I am already logged in.
But my question is-- where is this "ghost" cookie? After logging in on the app, in the Chrome Dev Tools, I can see the session cookie in Application-> Cookies -> http://localhost, but when I log out in the app, this cookie is deleted. I checked all the other options under storage and there are no cookies there, either.
Even if I close the app and re-open it, when I try to log in, it is using this session cookie, but I can't figure out where that session cookie is getting stored (it's not under Cookies or Local Storage).
I can "reset" everything by uninstalling the app and then reinstalling it. This will allow me to log in once, and I get a session cookie (which appears in Application -> Cookies-> http://localhost). But when I log out of the app and try to log back in again, I see that axios somehow still has my session cookie (which has been cleared from Chrome Dev Tools upon logout) and so log in fails This route can only be accessed by anonymous users
).
How can I clear this phantom cookie, or how can I at least see where the cookie is?
Here's the login code for my Ionic app:
export const login = async (email: string, password: string): Promise<void> => (
axios.post(`${baseUrl}/user/login?_format=json`, {
mail: email,
pass: password,
}, {
withCredentials: true,
}).then((response) => {
if (response.data.access_token) {
storageSet(jwtTokenName, response.data.access_token);
} else {
Promise.reject(Error('Could not fetch JWT token.'));
}
}));
Update
Ionic hosts the app from http://localhost
. In the Chrome dev tools on my desktop, under Application -> Cookies, normally I only see the cookies for http://localhost
. However, if I navigate to a page in my app that has an iframe that embeds a page from my Drupal site, I then see the session cookie for the Drupal site! So at least I found the phantom cookie.
So now my question is, how do I delete the session cookie, or even better, how do I prevent the session cookie from being saved in the first place?
Upvotes: 0
Views: 1721
Reputation: 104
If I understand you and you just need to clear all cookies
In Ionic project for Android we used cordova-plugin-cookiemaster
example for Angular:
import {Injectable} from '@angular/core';
declare var cookieMaster;
@Injectable({
providedIn: 'root'
})
export class AuthService {
public removeUser(): void {
cookieMaster.clearCookies(() => {}, () => {
alert('Error');
});
}
}
Upvotes: 1
Reputation: 6417
The drupal session cookie can be cleared by calling the Drupal logout endpoint.
However, I don't even want to use the Drupal session cookie in my app; that's why I set up JWT authentication. So now I will search for a way to prevent the app from getting a session cookie in the first place.
export const logout = async (): Promise<boolean> => {
await storageRemove(jwtTokenName);
// Android needs to have Drupal logout called because Android gets a session cookie.
// iOS does not have a session cookie so there is no need to call Drupal logout.
// if (isPlatform('desktop') || (isPlatform('mobileweb')) || isPlatformAndroid()) {
if (!isPlatformIOS()) {
await axios.get(`${baseUrl}/user/logout?_format=json`, {
withCredentials: true,
});
}
return Promise.resolve(true);
};
Upvotes: 0