Unlock

Unlock is our cross-authentification service that is used to allow token gating through Offline accounts on external websites (with iframes).

The chalenge with face is that we are using cookies to authentify an user to our website with next-auth. In order to make it work we need to authentify the user first to our unlock web app for him to login so that the cookie can be registered and recognised in the app using the embedded iframe. Also third party cookies are about to be deprecated: https://developers.google.com/privacy-sandbox/3pcd#report-issues So we need to think about a future proof solution for it to work.

On the Next Auth side we are using this setting specific to the unlock web app:

cookies: {
      sessionToken: {
        name: nextAuthCookieName(),
        options: {
          httpOnly: true,
          sameSite: !isUnlock() ? 'lax' : 'none', // needed for cross-domain cookies, in our case for the unlock app embedded in iframe
          path: '/',
          secure: useSecureCookies,
          // authorize cookie for subdomain, inc. hasura app (strip www. from hostName)
          domain:
            hostName === 'localhost' || !hostName
              ? hostName
              : '.' + hostName.replace(/^www\./, ''),
        },
      },
    },

Privacy

We could use this tool in order to delegate the Key/Stamps to a temporary hot wallet and allow the user to prove the ownership of it without leaking his Offline wallet address to an external website: https://docs.delegate.xyz/

Fonts

We have to rely on lazy loading for Fonts so we can't use next/font library. Instead we install fonts on this folder apps/unlock/public/fonts and load the right one from the message received by the iframe. In order to avoid too much delay we use only the .woff2 format. To convert any existing font (for instance from https://fonts.google.com/) we use https://transfonter.org/. You can find the list of provided fonts by Shopify: https://shopify.dev/docs/themes/architecture/settings/fonts