The Correct Usage of Auth0 with react-admin

sheriff0613 — Tue, 24 Sep 2024 01:31:24 +0000

I am building Admin Dashboard using react-admin.

Now I would like to add signup/login via Auth0.

App.js

    import React from "react";
    import { Admin, resolveBrowserLocale } from "react-admin";
    import authProvider from "./providers/auth/authProvider";
    import dataProvider from "./providers/data/dataProvider";

    const App = () => {

        return (
            <Admin
                locale={resolveBrowserLocale()}
                dataProvider={dataProvider}
                authProvider={authProvider}
            >
                ........
            </Admin>
        );
    };
    export default App;

authProviders.js

    import { Auth0Client } from "@auth0/auth0-spa-js";
    import { Auth0Constants } from "../../config";
    import { Auth0AuthProvider } from "ra-auth-auth0";

    const auth0 = new Auth0Client({
        domain: Auth0Constants.domain,
        clientId: Auth0Constants.clientId,
        cacheLocation: "localstorage",
    });
    const authProvider = Auth0AuthProvider(auth0, {
        loginRedirectUri: window.location.origin,
    });

    export default authProvider;

index.js

    import React from "react";
    import ReactDOM from "react-dom/client"; // Update this import
    import "./index.css";
    import App from "./App";
    import * as serviceWorker from "./serviceWorker";
    import { Auth0Provider } from "@auth0/auth0-react";
    import { Auth0Constants } from "./config";

    // Create a root element
    const root = ReactDOM.createRoot(document.getElementById("root"));

    // Render your app using the createRoot method
    root.render(
        <React.StrictMode>
            <Auth0Provider
                domain={Auth0Constants.domain}
                clientId={Auth0Constants.clientId}
                authorizationParams={{
                    redirect_uri: window.location.origin,
                }}
            >
                <App />
            </Auth0Provider>
        </React.StrictMode>
    );

    serviceWorker.unregister();

But after successfully loggedin, it keeps reloading...

Is there anybody who will help me with the correct usage of @auth0/auth0-react with react-admin.

Thanks in advance.

DEV Community: sheriff0613

The Correct Usage of Auth0 with react-admin