Storing data without cookies

[lukeshay]

• [x] Review the documentation: https://docs.clerk.dev/
• [x] Go through package changelog files.

Description

I am experimenting with using Clerk with an Ionic mobile app. There is no dedicated package for this so I was attempting to use @clerk/clerk-js but it uses cookies to store data.

Question

Is there a way to pass in a different way to store data?

E.g.

import Clerk from "@clerk/clerk-js";

const store = {
  set: (key, value) => {
    // ...some set code
  },
  get: (key) => {
    // ...some get code
  },
};

const clerk = new Clerk('fronted-api', { store });

[SokratisVidros]

Hi @lukeshay.

The Clerk long-lived __client JWT is stored in a cookie only in browsers. For native applications, the JWT can be transferred via the HTTP Authorization header. Our Expo package demonstrates how to use the Frontend API and set the _is_native=1 query parameter if necessary to instruct the API that it's a native application talking.

As for storage, you can build a custom Ionic storage similar to the Expo secure store and pass it to the <ClerkProvider/> via the tokenCache prop.

Let me know if this helps.

[lukeshay]

@SokratisVidros Thank you! I will give that a try and close this issue if it works.

[lukeshay]

This is shown on app startup even with a custom token cache

[SokratisVidros]

@lukeshay Do you get that in the native application browser? Did you set the ?is_native=true query string parameters to all the frontend API requests?

[lukeshay]

@SokratisVidros I was using @clerk/clerk-expo. Do I still need to add that flag when using that package? If so, how do I do that?

[SokratisVidros]

If you are using the package you shouldn't get that page. Do you maybe have a sample repo I can take a look at?

[lukeshay]

Here is a sample repo, https://github.com/lukeshay/clerk-ionic

[SokratisVidros]

I see. I am not very familiar with Ionic but to the best of my knowledge the runtime is a webview powered by Capacitor that triggers ClerkJS browser flow for development instances.

In further detail, ClerkJS uses third party cookies for development instances in order to achieve a seamless auth developer experience and avoid too much configuration to get started. To allow third party cookies in Safari the Storage access api is required.

The modal asks for the user confirmation to enable the Storage access API. It should appear only once in development until the Set up access button is clicked and will never appear in production instances.

Did you try to click on Set up access?

[SokratisVidros]

Hey @lukeshay. Any updates on this ☝️ ?

[lukeshay]

I have not bee able to test this but I assume you are correct here

[SokratisVidros]

👍 Let me know if you need further assistance.