flat-fuchsia•17mo ago

deprecated LoginPage prop after migrated to Refine v4

I have a custom LoginPage, in my app, after migrated to v4, the previous login page is working, but with Layout with it, I'm using @refinedev/nextjs-router in the app, i don't know the proper way to Please use the LoginPage component in your routes instead, anyone knows how to add login component in the routes?

4 Replies

kapa.ai•17mo ago

Hey @Nehcob! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave:

kapa.ai•17mo ago

---------------------- The LoginPage prop is deprecated in Refine v4. You can now create your own login page with the appropriate way for your router. To see examples, check out the documentation (https://refine.dev/docs/migration-guide/router-provider#using-the-new-router-providers) for each router. For example, if you are using @refinedev/nextjs-router, you can create a route for the login page like this:

import { Refine, Authenticated, AuthPage } from "@refinedev/core";  
import dataProvider from "@refinedev/simple-rest";  
import routerBindings, {  
 NavigateToResource,  
 CatchAllNavigate,  
} from "@refinedev/react-router-v6";  
  
import { ProductList } from "pages/products/list";  
  
import { authProvider } from "./authProvider";  
  
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";  
  
const App = () => {  
 return (  
 <BrowserRouter>  
 <Refine  
 authProvider={authProvider}  
 routerProvider={routerBindings}  
 dataProvider={dataProvider(  
 "https://api.fake-rest.refine.dev",  
 )}  
 resources={[  
 {  
 name: "products",  
 list: "/products",  
 },  
 ]}  
 >  
 <Routes>  
 <Route  
 element={  
 <Authenticated  
 fallback={<CatchAllNavigate to="/login" />}  
 >  
 <Outlet />  
 </Authenticated>  
 }  
 >  
 <Route path="products">  
 <Route index element={<ProductList />} />  
 </Route>  
 </Route>  
 <Route  
 element={  
 <Authenticated fallback={<Outlet />}>  
 <NavigateToResource />  
 </Authenticated>  
 }  
 >  
 <Route  
 path="/login"  
 element={<AuthPage type="login" />}  
 />  
 </Route>  
 </Routes>  
 </Refine>  
 </BrowserRouter>  
 );  
};

import { Refine, Authenticated, AuthPage } from "@refinedev/core";  
import dataProvider from "@refinedev/simple-rest";  
import routerBindings, {  
 NavigateToResource,  
 CatchAllNavigate,  
} from "@refinedev/react-router-v6";  
  
import { ProductList } from "pages/products/list";  
  
import { authProvider } from "./authProvider";  
  
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";  
  
const App = () => {  
 return (  
 <BrowserRouter>  
 <Refine  
 authProvider={authProvider}  
 routerProvider={routerBindings}  
 dataProvider={dataProvider(  
 "https://api.fake-rest.refine.dev",  
 )}  
 resources={[  
 {  
 name: "products",  
 list: "/products",  
 },  
 ]}  
 >  
 <Routes>  
 <Route  
 element={  
 <Authenticated  
 fallback={<CatchAllNavigate to="/login" />}  
 >  
 <Outlet />  
 </Authenticated>  
 }  
 >  
 <Route path="products">  
 <Route index element={<ProductList />} />  
 </Route>  
 </Route>  
 <Route  
 element={  
 <Authenticated fallback={<Outlet />}>  
 <NavigateToResource />  
 </Authenticated>  
 }  
 >  
 <Route  
 path="/login"  
 element={<AuthPage type="login" />}  
 />  
 </Route>  
 </Routes>  
 </Refine>  
 </BrowserRouter>  
 );  
};

You can also use the useMenu hook to create your own menu. For more information, please refer to the Migrating Router Provider from 3.x.x to 4.x.x (https://refine.dev/docs/migration-guide/router-provider) guide. ----------------------

Migrating Router Provider from 3.x.x to 4.x.x | refine

Motivation behind the changes

kapa.ai•17mo ago

<@319557052152283136> kapa.ai is still learning and improving, please let us how it did by reacting below

Omer•17mo ago

Hey @Nehcob , With Refine v4, route management should be done in Vanilla Next.js applications in the way it is done in Next.js, where you can manage it by creating a "login" page in your "pages" folder. Here's an example of Next.js : https://github.com/refinedev/refine/tree/next/examples/with-nextjs-auth

GitHub

refine/examples/with-nextjs-auth at next · refinedev/refine

Build your React-based CRUD applications, without constraints. - refine/examples/with-nextjs-auth at next · refinedev/refine