How to handle auth with solid-router?

Given an app where users have access to additional routes when they are logged in, how to set up the router so that it,

- redirect users to "home" if they are logged in and happen to navigate to the login or signup page?
- redirect users to login page when visiting a route that requires authentication but they are not logged in?

Is the following a good starting point? Where would the redirects be inserted?

export function App() {
  return (
    <Router root={Providers}>
      {/* Logged out routes */}
      <Route component={UnauthenticatedApp}>
        <Route path="/sign-up" component={SignUp} />
        <Route path="/log-in" component={LogIn} />
      </Route>

      {/* Logged in routes */}
      <Route component={AuthenticatedApp}>
        <Route path="/" component={Home} />
        <Route path="/profile" component={Profile} />
      </Route>
    </Router>
  );
}

export function App() {
  return (
    <Router root={Providers}>
      {/* Logged out routes */}
      <Route component={UnauthenticatedApp}>
        <Route path="/sign-up" component={SignUp} />
        <Route path="/log-in" component={LogIn} />
      </Route>

      {/* Logged in routes */}
      <Route component={AuthenticatedApp}>
        <Route path="/" component={Home} />
        <Route path="/profile" component={Profile} />
      </Route>
    </Router>
  );
}

SolidJS•3y ago•

9 replies

aryzing

How to handle auth with solid-router?

export function App() {
  return (
    <Router root={Providers}>
      {/* Logged out routes */}
      <Route component={UnauthenticatedApp}>
        <Route path="/sign-up" component={SignUp} />
        <Route path="/log-in" component={LogIn} />
      </Route>

      {/* Logged in routes */}
      <Route component={AuthenticatedApp}>
        <Route path="/" component={Home} />
        <Route path="/profile" component={Profile} />
      </Route>
    </Router>
  );
}

export function App() {
  return (
    <Router root={Providers}>
      {/* Logged out routes */}
      <Route component={UnauthenticatedApp}>
        <Route path="/sign-up" component={SignUp} />
        <Route path="/log-in" component={LogIn} />
      </Route>

      {/* Logged in routes */}
      <Route component={AuthenticatedApp}>
        <Route path="/" component={Home} />
        <Route path="/profile" component={Profile} />
      </Route>
    </Router>
  );
}

How to handle auth with solid-router?

Similar Threads

How to handle auth with solid-router?

Similar Threads

Similar Threads

Similar Threads