Dashboard log-in not working

I am trying to create a dashboard where i got inspiration from the following github: https://github.com/refinedev/refine/tree/master/examples/app-crm-minimal. Though when creating a log-in/register page i seem to not be able to see it when launching the live server. Instead i get the default ' Welcome Aboard! Your configuration is completed.'. How do i fix this? This is my App.tsx
2 Replies
kapa.ai
kapa.ai2mo ago
Hi @Charaf. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, it seems that your issue might be related to the configuration of the authentication routes and components in your App.tsx file. To properly set up the login and register pages, you need to configure the routes and use the <AuthPage /> component provided by refine. Here's how you can modify your App.tsx file to include the login and register pages:
import { Refine, Authenticated } from "@refinedev/core";
import { AuthPage } from "@refinedev/antd";
import routerBindings, { CatchAllNavigate, NavigateToResource } from "@refinedev/react-router-v6";
import { BrowserRouter, Route, Routes, Outlet } from "react-router-dom";

function App() {
return (
<BrowserRouter>
<Refine
// ... other configurations
routerProvider={routerBindings}
authProvider={authProvider}
>
<Routes>
<Route
element={
<Authenticated fallback={<CatchAllNavigate to="/login" />}>
{/* Your authenticated routes */}
<Outlet />
</Authenticated>
}
>
{/* Your dashboard and other authenticated routes */}
</Route>
<Route
element={
<Authenticated fallback={<Outlet />}>
<NavigateToResource resource="dashboard" />
</Authenticated>
}
>
<Route
path="/login"
element={
<AuthPage
type="login"
formProps={{
initialValues: {
email: "demo@refine.dev",
password: "demodemo",
},
}}
/>
}
/>
<Route
path="/register"
element={
<AuthPage
type="register"
formProps={{
initialValues: {
email: "demo@refine.dev",
password: "demodemo",
},
}}
/>
}
/>
</Route>
</Routes>
</Refine>
</BrowserRouter>
);
}

export default App;
import { Refine, Authenticated } from "@refinedev/core";
import { AuthPage } from "@refinedev/antd";
import routerBindings, { CatchAllNavigate, NavigateToResource } from "@refinedev/react-router-v6";
import { BrowserRouter, Route, Routes, Outlet } from "react-router-dom";

function App() {
return (
<BrowserRouter>
<Refine
// ... other configurations
routerProvider={routerBindings}
authProvider={authProvider}
>
<Routes>
<Route
element={
<Authenticated fallback={<CatchAllNavigate to="/login" />}>
{/* Your authenticated routes */}
<Outlet />
</Authenticated>
}
>
{/* Your dashboard and other authenticated routes */}
</Route>
<Route
element={
<Authenticated fallback={<Outlet />}>
<NavigateToResource resource="dashboard" />
</Authenticated>
}
>
<Route
path="/login"
element={
<AuthPage
type="login"
formProps={{
initialValues: {
email: "demo@refine.dev",
password: "demodemo",
},
}}
/>
}
/>
<Route
path="/register"
element={
<AuthPage
type="register"
formProps={{
initialValues: {
email: "demo@refine.dev",
password: "demodemo",
},
}}
/>
}
/>
</Route>
</Routes>
</Refine>
</BrowserRouter>
);
}

export default App;
This configuration sets up the login and register routes using the <AuthPage /> component. Make sure you have imported the necessary components and hooks from refine. Also, ensure that you have properly configured the authProvider in your application. The authProvider should be passed to the <Refine> component as shown in the example above. If you're still seeing the "Welcome Aboard!" message, it's possible that your authProvider is not properly configured or the routes are not being matched. Double-check your authProvider implementation and make sure it's correctly integrated with your Refine application. For more detailed information on setting up authentication in refine, you can refer to the following resources: - Authentication Guide - Building a React Admin Dashboard with Refine If you continue to face issues after making these changes, please provide more details about your authProvider implementation and any error messages you might be seeing. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai2mo ago
<@1337091068008595466> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?