Manifest v3, auth0 and react chrome extension

Help
,
1

Hello, I’m writing this post to see if I can get some official help.

I am building a Chrome extension that uses React and Manifest V3. I have to use Auth0 to authenticate users in the extension since it is part of our own product.

My current code looks like this, but every time I press the button to authenticate, I receive an Auth0 error saying that the redirect_uri is not correct.

My index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import {Auth0Provider} from "@auth0/auth0-react";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Auth0Provider
    domain="myDomain"
    clientId="{myClientId}"
    authorizationParams={{
        redirect_uri: window.location.origin
    }}
    >
      <App />
    </Auth0Provider>
  </React.StrictMode>
);

My app.js

import "./App.css";
import { useAuth0 } from "@auth0/auth0-react";

function App() {
  const { loginWithPopup } = useAuth0();

  return (
    <div className="App">
      <button onClick={() => loginWithPopup()}> Log In</button>;
    </div>
  );
}

export default App;

The error:

unauthorized_client: Callback URL mismatch. chrome-extension://fkkojjjiapdpjjkbgnkeomjfmaodaaie is not in the list of allowed callback URLs

I have checked the dashboard and it is added correctly, but I can’t seem to make it work.

My application uris

image
image1023×340 25.7 KB

Allowed web origins

image
image896×253 23.6 KB

The extension is also added to the cross origin authentication.

What I am doing wrong?