How to save a session cookie with capacitor http plugin?

Capacitor
1

I’m building my first React / Ionic app and I’m having trouble saving the session cookie. My backend server is Drupal 8; I want to use the session cookie instead of OAuth because I want users to be able to log in to my app and then automatically be logged in to the Drupal website as well if they open up a website link inside the app.

Drupal session cookies are returned as HttpOnly and Secure.

So, after reading this thread on cookie-based auth, I installed the capacitor-community/http plugin and started testing it on an Android device.

I don’t understand cookies very well so I may be missing something obvious, but I can’t figure out how to “save” the cookie when logging in.

When you log in to Drupal in the browser, the session cookie is saved automatically.

I have successfully logged into my Drupal site via Postman like this:

https://www.example.com/user/login?_format=json
Headers: Content-Type: application/json
Body: raw
{"mail": "test@example.com","pass": "password"}

This also returns the session cookie in Postman’s “Cookies” area.

So in my React app, I tried to log in like this:

export const basicHeaders: HeadersInit = new Headers({
  Accept: 'application/json',
});

  async function login(email: string, password: string): Promise<void> {
    const loginPost = {
      mail: email,
      pass: password,
    };
    const { Http } = Plugins;
    await Http.request(`${baseUrl}/user/login?_format=json`, {
      method: 'POST',
      headers: basicHeaders,
      data: JSON.stringify(loginPost),
    });

However, with this code, the cookie isn’t saved.

The http plugin documentation has some examples for setCookie and getCookies, but no example of how to do it when you need to log in to get the cookie.

Any advice about how to save a cookie on login would be much appreciated.

2

Have you figured it out yet? I am stuck on the same issue. Thanks a lot

3

After reading through the issue queue, I came to the conclusion that, as of now:

  • It is possible to get session cookies working on Android.
  • It is NOT possible to get session cookies working on iOS with the current capacitor plugins.

Since I have more iOS users than Android users, I had to abandon this approach.

As a result, I switched Drupal to using JWT and am doing everything through JWT. For what is not supported by JSON:API in Drupal, I made custom resources using the Drupal JSON:API Resources module.

4

OK, thanks for the hint, I also though, that I might have to switch to JWT.

5

You’re welcome. If you’re also working with Drupal, I’ve been posting questions and answers about JWT, Drupal, and Ionic on Drupal Answers.

For example,

1 Like
6

Hi there! I have the same problem here, but after a lot of time, I found the solution.

You need to use the extra configuration credentials: “include”, for example:

  1. To make login and save the cookie:
import { Http, HttpResponse } from "@capacitor-community/http";

formData = {
   email: "example@myemail.com",
   password: "mysecretpassword",
}

const doLogin = async (formData) => {
  const res: HttpResponse = await Http.post({
    url: 'https://myapi.com.br/public/auth/login',
    headers: {
      "Content-Type": "application/json",
    },
    data: formData,
    webFetchExtra: {
      credentials: "include",
    },
  });
  return res.data;
};
  1. To make a request to a private route:
const getCity = async () => {
  const res: HttpResponse = await Http.get({
    url: 'https://myapi.com.br/private/city',
    webFetchExtra: {
      credentials: "include",
    },
  });
  return res.data;
};
  1. Important notes
  • In the tests I used iOS 15.0 and worked like a charm.
  • I used the Xcode 13.0 with the Mac Os Big Sur.
  • This TypeScript code is part of my Vue app project with Ionic.

Best Regards,

3 Likes