DEV Community

sheriff0613
sheriff0613

Posted on

The Correct Usage of Auth0 with react-admin

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; 
Enter fullscreen mode Exit fullscreen mode

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; 
Enter fullscreen mode Exit fullscreen mode

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(); 
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)