How to use Nhost Vanilla with Service workers or Extension Background script?

[caudurodev]

Right now I am able to use the Javascript SDK, but the auth session details do not persist as the MV3 extension does not appear to be storing the session details correctly, I've tried a few different storage options but none have worked for me.

I want to use a background script to query authenticated data from hasura, I am able to login, but not persist the login as authentication details are not available in the background script.

Is there an alternative way to login where I can manually add the session token directly via an API call? Or even better, a way to use a chrome extension storage ?

[dbarrosop]

You have a few options when using the js SDK:

• disable autoSignin and autoRefreshToken
• implement your own custom clientStorage

You have more details about those here: https://docs.nhost.io/reference/javascript/auth/types/nhost-auth-constructor-params

Then you can leverage setAccessToken inside the graphql and storage options if you are planning to use those.

If the SDK doesn't provide the flexibility you need/want you can also perform HTTP requests directly to the services. You can find information about the endpoints here: https://docs.nhost.io/reference/auth/sign-up-email-and-password

[caudurodev]

Great - will give this a try.

[caudurodev]

I'm having an issue with async custom storage:

I believe the async getter should be async?

in nhost/packages/hasura-auth-js/src/local-storage.ts

if (clientStorageType === 'custom') {
    if (clientStorage.getItem && clientStorage.removeItem) {
      return clientStorage.getItem
    }
    if (clientStorage.getItemAsync) {
      return clientStorage.getItemAsync
    }
    throw Error(
      `clientStorageType is set to 'custom' but clientStorage is missing either "getItem" and "removeItem" properties or "getItemAsync" property`
    )
  }

[caudurodev]

this is the setter from the same file:

if (clientStorageType === 'custom') {
    if (!clientStorage.removeItem) {
      throw Error(
        `clientStorageType is set to 'custom' but clientStorage is missing a removeItem property`
      )
    }
    if (clientStorage.setItem) {
      return (key, value) =>
        value ? clientStorage.setItem?.(key, value) : clientStorage.removeItem?.(key)
    }
    if (clientStorage.setItemAsync) {
      return async (key, value) =>
        value ? clientStorage.setItemAsync?.(key, value) : clientStorage.removeItem?.(key)
    }
    throw Error(
      `clientStorageType is set to 'custom' but clientStorage is missing setItem or setItemAsync property`
    )
  }

[onehassan]

The async getter is going to return the implementation that you provide when you set clientStorageType: 'custom', so it's up to you to return a promise when you implement getItemAsync

const nhost = new NhostClient({
  subdomain: process.env.NHOST_SUBDOMAIN || 'local',
  region: process.env.NHOST_REGION,
  clientStorageType: 'custom',
  clientStorage: {
    getItemAsync: async (key) => {
      const value = await something.get(key)
      return value
    }
  }
})

[caudurodev]

In the end I gave up and am using the other contexts to interact with nhost - content scripts, popup etc. There is an issue with using storage in a background script in the extension where either the promise never returns or it returns empty - even though the data is stored.