foreign-sapphire•2mo ago

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

message.txt

2 Replies

kapa.ai•2mo 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•2mo ago

<@1337091068008595466> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Dashboard log-in not working

Did you find this page helpful?