sunny-green
sunny-green2y 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
kapa.ai2y 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
kapa.ai2y 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. ----------------------
kapa.ai
kapa.ai2y ago
<@319557052152283136> kapa.ai is still learning and improving, please let us how it did by reacting below
Omer
Omer2y 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

Did you find this page helpful?