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
Allowed web origins
The extension is also added to the cross origin authentication.
What I am doing wrong?