landing page

How to create landing page micro front end separated from auth mechanism

2 Replies

Hi @thomas200593. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Refine, you can create a landing page that is separate from the authentication mechanism. This can be achieved by defining routes in your application. Here's a step-by-step guide on how to do it: 1. Define your landing page route: Start by adding your LandingPage component at the / path. This will be visible for both authenticated and unauthenticated users. You need to wrap your Route elements with a Routes component.

import { Refine } from "@refinedev/core";  
import dataProvider from "@refinedev/simple-rest";  
import routerProvider from "@refinedev/react-router-v6";  
import { BrowserRouter, Routes, Route } from "react-router-dom";  
import { authProvider } from "src/authProvider";  
import { LandingPage } from "pages/landing";  

export const App = () => {  
  return (  
  <BrowserRouter>  
  <Refine  
  dataProvider={dataProvider}  
  routerProvider={routerProvider}  
  authProvider={authProvider}  
  resources={[  
  {  
  name: "posts",  
  list: "/posts",  
  create: "/posts/create",  
  },  
  ]}  
  >  
  <Routes>  
  <Route index element={<LandingPage />} />  
  </Routes>  
  </Refine>  
  </BrowserRouter>  
  )  
}

import { Refine } from "@refinedev/core";  
import dataProvider from "@refinedev/simple-rest";  
import routerProvider from "@refinedev/react-router-v6";  
import { BrowserRouter, Routes, Route } from "react-router-dom";  
import { authProvider } from "src/authProvider";  
import { LandingPage } from "pages/landing";  

export const App = () => {  
  return (  
  <BrowserRouter>  
  <Refine  
  dataProvider={dataProvider}  
  routerProvider={routerProvider}  
  authProvider={authProvider}  
  resources={[  
  {  
  name: "posts",  
  list: "/posts",  
  create: "/posts/create",  
  },  
  ]}  
  >  
  <Routes>  
  <Route index element={<LandingPage />} />  
  </Routes>  
  </Refine>  
  </BrowserRouter>  
  )  
}

(source (https://refine.dev/docs/routing/integrations/react-router#how-to-handle-optional-authentication-redirects-and-layouts-with-authentication)) 2. Define authenticated routes: Create your resource actions. They will be wrapped with the Layout component and only visible for authenticated users. Use the Authenticated component to handle authentication and redirects. Also, use the Outlet component to properly wrap and handle the authenticated routes.

import { Refine, Authenticated } from "@refinedev/core";  
import dataProvider from "@refinedev/simple-rest";  
import routerProvider from "@refinedev/react-router-v6";  
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";  
import { authProvider } from "src/authProvider";  
import { LandingPage } from "pages/landing";  
import { PostList, PostCreate } from "pages/posts";  
import { Layout } from "components/layout";  

export const App = () => {  
  return (  
  <BrowserRouter>  
  <Refine  
  dataProvider={dataProvider}  
  routerProvider={routerProvider}  
  authProvider={authProvider}  
  resources={[  
  {  
  name: "posts",  
  list: "/posts",  
  create: "/posts/create",  
  },  
  ]}  
  >  
  <Routes>  
  <Route index element={<LandingPage />} />  
  <Route  
  element={(  
  <Authenticated redirectOnFail="/login">  
  <Layout>  
  <Outlet />  
  </Layout>  
  </Authenticated>  
  )}  
  >  
  <Route path="posts">  
  <Route index element={<PostList />} />  
  <Route path="create" element={<PostCreate />} />  
  </Route>  
  </Route>  
  </Routes>  
  </Refine>  
  </BrowserRouter>  
  )  
}

import { Refine, Authenticated } from "@refinedev/core";  
import dataProvider from "@refinedev/simple-rest";  
import routerProvider from "@refinedev/react-router-v6";  
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";  
import { authProvider } from "src/authProvider";  
import { LandingPage } from "pages/landing";  
import { PostList, PostCreate } from "pages/posts";  
import { Layout } from "components/layout";  

export const App = () => {  
  return (  
  <BrowserRouter>  
  <Refine  
  dataProvider={dataProvider}  
  routerProvider={routerProvider}  
  authProvider={authProvider}  
  resources={[  
  {  
  name: "posts",  
  list: "/posts",  
  create: "/posts/create",  
  },  
  ]}  
  >  
  <Routes>  
  <Route index element={<LandingPage />} />  
  <Route  
  element={(  
  <Authenticated redirectOnFail="/login">  
  <Layout>  
  <Outlet />  
  </Layout>  
  </Authenticated>  
  )}  
  >  
  <Route path="posts">  
  <Route index element={<PostList />} />  
  <Route path="create" element={<PostCreate />} />  
  </Route>  
  </Route>  
  </Routes>  
  </Refine>  
  </BrowserRouter>  
  )  
}

(source (https://refine.dev/docs/routing/integrations/react-router#how-to-handle-optional-authentication-redirects-and-layouts-with-authentication)) 3. Define auth pages: Add your /login and /register pages. Use the ` ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

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

landing page

Did you find this page helpful?