blackburn4475 Posts - Answer Overflow

blackburn4475

•Created by blackburn4475 on 8/17/2023 in #support

How do i write routes which update automatically based on if authenticated or not

Lets say that I have the below code and when i hit root path(/) i want to navigate to /login if I am not authenticated and /orders if I am authenticated. I tried using <Show> and it was not helping me out. I checked if the <Router> navigate("/orders") is changing the url to /orders but the page doesn't load the respective component I am a noob in Solidjs. Have been learning it from yesterday only. So any pointers or additional info would help me App.jsx

  
function App() {
  const navigate = useNavigate()
  const auth = getAuth(app);
  const [authHref, setAuthhref] = createSignal("/login")

  // firebase auth
  auth.onAuthStateChanged(
    (user) => {
      setAuthhref("/orders")
      navigate("/orders")
    },
    (error) => {
      console.error(error)
    }
  );

  return (
    <Router>
      <Routes>
        <Route path="/" element={<Navigate href={authHref()}></Navigate>} />
        <Route path="/login" element={<Login />} />
        <Route path="/signup" element={<Signup />} />
        <Route path="/orders" element={<Orders />} />
        <Route path="/orders/:id?" element={<NewOrder />} />
        <Route path="/orders/:id/edit" element={<EditOrder />} />
        <Route path="/orders/new" element={<NewOrder />} />
        <Route path="/admin" element={<Admin />} />
      </Routes>
    </Router>
  );
}

  
function App() {
  const navigate = useNavigate()
  const auth = getAuth(app);
  const [authHref, setAuthhref] = createSignal("/login")

  // firebase auth
  auth.onAuthStateChanged(
    (user) => {
      setAuthhref("/orders")
      navigate("/orders")
    },
    (error) => {
      console.error(error)
    }
  );

  return (
    <Router>
      <Routes>
        <Route path="/" element={<Navigate href={authHref()}></Navigate>} />
        <Route path="/login" element={<Login />} />
        <Route path="/signup" element={<Signup />} />
        <Route path="/orders" element={<Orders />} />
        <Route path="/orders/:id?" element={<NewOrder />} />
        <Route path="/orders/:id/edit" element={<EditOrder />} />
        <Route path="/orders/new" element={<NewOrder />} />
        <Route path="/admin" element={<Admin />} />
      </Routes>
    </Router>
  );
}

5 replies

Gaming

Programming