Manifest v3, auth0 and react chrome extension

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"));
        redirect_uri: window.location.origin
      <App />

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>;

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

Allowed web origins

The extension is also added to the cross origin authentication.

What I am doing wrong?