@vocably/pontis

@vocably/pontis makes login into Chrome extension via the AWS Amplify website easy-peasy.

Installation

npm install @vocably/pontis aws-amplify --save

How to use

Amplify v6 keeps auth tokens in a key/value storage attached to the Cognito token provider, so both sides plug in the same way — via cognitoUserPoolsTokenProvider.setKeyValueStorage().

// website-app/index.js

import { Amplify } from 'aws-amplify';
import { cognitoUserPoolsTokenProvider } from 'aws-amplify/auth/cognito';
import { AppAuthStorage } from '@vocably/pontis';

const extensionId = 'baocigmmhhdemijfjnjdidbkfgpgogmb';

Amplify.configure({
  Auth: {
    Cognito: {
      userPoolId: 'eu-central-1_uSErPooL',
      userPoolClientId: 'abcdefghij1234567890',
      //etc...
    },
  },
});

// The following line sets up the custom storage
// which exchanges auth tokens with the extension
cognitoUserPoolsTokenProvider.setKeyValueStorage(
  new AppAuthStorage(extensionId)
);

// extension/service-worker.js

import { Amplify } from 'aws-amplify';
import { cognitoUserPoolsTokenProvider } from 'aws-amplify/auth/cognito';
import { registerExtensionStorage } from '@vocably/pontis';

// The only function param is responsible for
// the storage type. It could be 'sync' or 'local'
const storage = registerExtensionStorage('sync');

Amplify.configure({
  Auth: {
    Cognito: {
      userPoolId: 'eu-central-1_uSErPooL',
      userPoolClientId: 'abcdefghij1234567890',
      //etc...
    },
  },
});

// The following line sets up the custom extension
// storage which exchanges Auth tokens with the app
cognitoUserPoolsTokenProvider.setKeyValueStorage(storage);

That's it.

Make sure the website origin is listed in externally_connectable.matches of the extension manifest, otherwise the extension won't receive the tokens:

{
  "externally_connectable": {
    "matches": ["https://your-website.com/*"]
  }
}

How it works

AppAuthStorage serves Amplify from the regular browser storage (localStorage by default) and mirrors every write into the extension. Before its first operation it pulls whatever the extension already holds, so a freshly opened website picks up the session the extension is signed in with.

Messages to the extension never reject into Amplify: when the extension is not installed, disabled, or updating, the website keeps working on its own storage.

ExtensionAuthStorage — the object registerExtensionStorage() returns — is backed directly by chrome.storage, so the tokens survive service worker restarts and, with the sync area, travel across the user's devices.

Feel free to check @vocably/hermes if you love painless promise-based messages exchange between the extension and the app.