Chrome Browser Extension Support (Auth)

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React, Not applicable

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

# Put output below this line

Describe the bug

I am building a chrome extension that uses Cognito to authenticate AppSync requests. I want to sync auth state inside my extension with the state on my website. I’m more or less able to do this with web extension manifest v2.

I’m unable to build a “modern” extension with Amplify Auth though because in manifest v3 you must use Service Workers.

When I import Amplify Auth into a Service Worker it throws this error: "Not supported" From here: https://github.com/aws-amplify/amplify-js/blob/df95ea3724eb6406f64b03f25086cd3e8644cb5f/packages/auth/src/urlListener.ts#L24

The reason is because the Service Worker context is not a web page nor node. It doesn’t have window.location

Now I’m sure Amplify can do most of what it needs to do without window.location. I am able to work around this if I set:

global.window = self;
global.document = {
  // fool amplify
  location: new URL("http://foo.com") as unknown as Document["location"],
} as Document;

Also in my webpack config I need to set:

 output: {
    // no 'window'
    globalObject: "self",
}

Expected behavior

Don’t explode if window.location is unavailable.

Ideally use self instead of window or this - see https://developer.mozilla.org/en-US/docs/Web/API/Window/self

Reproduction steps

Create manifest v3 browser extension and import { Auth } from "aws-amplify"

Code Snippet

// Put your code below this line.

Log output

// Put your logs below this line

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[ykethan]

I understand, I did come across a workaround. Since Amplify is not using chrome.storage.local to store cookies in a service worker/background script, the workaround would be to tell amplify which storage call to use local data and auth cookies. For example.
we can use the script example from here: https://gitlab.com/kmiyashita/chrome-extension-amplify-auth/-/blob/main/packages/chrome-ext/src/common/SharedAuthStorage.ts

then import the BrowserStorage and configure amplify as following.

Amplify.configure({
  ...awsExports,
  Auth: {storage: BrowserStorage}
});

this should enable us to create a shared storage and enable us to use amplify resources. For reference this article provides additional information: https://betterprogramming.pub/developing-chrome-extensions-with-amplify-authentication-be9b9e496a06

[revmischa]

That’s exactly what I’m doing; sending creds via message to the service worker. I then need to tell the worker to save those credentials for itself.