The Correct Usage of Auth0 with react-admin
sheriff0613
Posted on September 24, 2024
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.
💖 💪 🙅 🚩
sheriff0613
Posted on September 24, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
programming Mastering Spring Boot Reactive: Harness Project Reactor's Backpressure for High-Performance Apps
November 29, 2024