SolidJS•17mo ago

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>
  );
}

3 Replies

blackburn4475OP•17mo ago

My index.jsx has render(() => (<Router><App/></Router>), document.getElementById('root')); seems i had 2 <Router> one in index.jsx and App.jsx and seems that was causing the issue

jesseb34r•17mo ago

the auth-js documentation has a decent example on how to set up protected routes iirc

jesseb34r•17mo ago

https://authjs.dev/reference/solidstart/protected

Protected | Auth.js

When Using SSR

Gaming

Programming

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