vocably/pontis

Painless Chrome extension authentication via AWS Amplify websites

@vocably/pontis

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

Installation

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

How to use

// website-app/index.js

import { Auth } from '@aws-amplify/auth';
import { AppAuthStorage } from '@vocably/pontis';

const extensionId = 'baocigmmhhdemijfjnjdidbkfgpgogmb';

Auth.configure({
  // The following line sets up the custom storage
  // which exchages auth tokens with the extension
  storage: new AppAuthStorage(extensionId),
  // and the rest of Auth params:
  region: 'eu-central-1',
  userPoolId: 'eu-central-1_uSErPooL',
  //etc...
});

// extension/service-worker.js
import { registerExtensionStorage } from '@vocably/pontis';
import { Auth } from '@aws-amplify/auth';

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

Auth.configure({
  // The following line sets up the custom extension
  // storage which exchanges Auth tokens with the app
  storage: storage,
  // and the rest of Auth params:
  region: 'eu-central-1',
  userPoolId: 'eu-central-1_uSErPooL',
  //etc...
});

That's it.

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

pontis's Issues

Almost works

I have setup extension and web site where I do the authentication like this library is saying. After login with my website the extension returns user when calling cognitoUserPool.getCurrentUser() which is correct. But the the returned user object's session is null. This means I cannot call for example currentUser.getSession(). Calling that function works in the website but not on the extensions service worker.

Are you able to say if I am missing something or not?

Getting empty storage in extension

Hi, I have an Amplify/React website and I am trying to share login information with a Chrome extension, using the built in Amplify Cognito integration. Your package seems to be just what I need for this, but I can't seem to figure out how to use it. (I am new to chrome extensions and Amplify, so I'm sorry if this is a basic question.)

Here is my Chrome extension's background script:

import { Auth } from "@aws-amplify/auth"; 
import awsconfig from '../aws-exports';
import { registerExtensionStorage } from "@vocably/pontis";

const listener = (data) => {
    switch (data.payload.event) {
        case 'configured':
            const user = await Auth.currentAuthenticatedUser();  // "The current user is not authenticated"
            console.log('user:', user) 
            break;
    }
}
Hub.listen('auth', listener);

let storage = registerExtensionStorage("sync");

Auth.configure({
    ...awsconfig,
    oauth: 0,  // Oauth needs to be cleared here or else a "not supported" message is given
    storage: storage
});

And my manifest.json has

  "permissions": [
    "storage"
  ],

Here is the relevant part of my website code:

const extensionId = "my_extension_id";
let storage = new AppAuthStorage(extensionId);

Auth.configure({
    ...awsconfig,
    storage: storage
});

On the website, I pass aws-exports to Auth.configure along with the Pontis custom storage, which seems to be working fine there. I can see via breakpoints that the AppAuthStorage is setting and getting values successfully from Amplify auth.

But when I try it out on the Chrome extension, the storage appears to be empty. If i try to load the user, I always get an error that the user is not authenticated.

If I do something like this to dump the contents of the storage, it also appears to be empty:

chrome.storage.sync.get(null, function(items) {
    var allKeys = Object.keys(items);
    console.log('All chrome storage keys: ' + allKeys);
});

I'm not sure how to get the storage "synchronized" between the site and the extension. Please let me know if I'm doing anything wrong here, or if I can give any more information or run any tests to make the issue more clear. Thanks!

Error when running pontis

Hey and thanks for the nice idea for a simple Chrome extension authentication!

After I have installed this package and when I run it I get error Module not found: Error: Can't resolve '@aws-amplify/core' since I am using amazon-cognito-identity-js as auth package. Maybe you should move @aws-amplify/core from devDependencies to dependencies to fix this issue?

Unable to use the library

Whenever I try to build my react project using this library I get below error and the build fails. This library seems unusable at the moment.

./node_modules/@vocably/pontis/dist/esm/app-auth-storage.js
SyntaxError: .\node_modules\@vocably\pontis\dist\esm\app-auth-storage.js: Missing class properties transform.      
  2 | import { removeItem, setItem, clear, getAll } from './extension-operations';
  3 | export class AppAuthStorage {
> 4 |     extensionId;
    |     ^^^^^^^^^^^^
  5 |     localStorage = new StorageHelper().getStorage();
  6 |     syncPromise = null;
  7 |     constructor(extensionId) {

My sample code in App.js

const extensionId = 'dhosfhjosidjfoidsjfiodsjffsfdsfdsfed';

 Auth.configure({
  storage: new AppAuthStorage(extensionId)
});

Uncaught TypeError: Error in invocation of storage.get

After following the documentation and adding the storage in chrome extension, the extension fails to load and throws the following error in console

Uncaught TypeError: Error in invocation of storage.get(optional [string|array|object] keys, function callback): No matching signature.
at f (main.js:2:298842)
at e.value (main.js:2:301090)
at e.configure (main.js:2:1372506)
at Module. (main.js:2:1412793)
at i (main.js:2:361)
at main.js:2:2118
at main.js:2:2129