Authenticated routes in SPA

I wanted to expose this question to more people and thought of this discord server.

Original post in GH:
https://github.com/solidjs/solid-router/discussions/364

The TL;DR; is that there doesn't seem to be a canonical approach to handling private vs public routes such that repetition is avoided -- I.E some type of middleware or guard.

I posted what I'm currently playing around with and will add it here for feedback, though in its current state it isn't working as expected. When using nested routes in the config-based approach this doesn't work.

<Router root={App}>
  <For each={routes}>
    {(route) => {
      // This approach assumes private by default
      if (route.info?.public) {
        return <Route component={route.component} />;
      }

      return (
        <Route
          component={(props) => (
            // Where `AuthGuard` contains redirect/navigate logic
            <AuthGuard>{route.component?.(props)}</AuthGuard>
          )}
        />
      );
    }}
  </For>
</Router>

<Router root={App}>
  <For each={routes}>
    {(route) => {
      // This approach assumes private by default
      if (route.info?.public) {
        return <Route component={route.component} />;
      }

      return (
        <Route
          component={(props) => (
            // Where `AuthGuard` contains redirect/navigate logic
            <AuthGuard>{route.component?.(props)}</AuthGuard>
          )}
        />
      );
    }}
  </For>
</Router>

GitHub

Is there a recommended way to implement Authenticated Routes? · sol...

Assume you have a SPA that includes several public Routes and several private Routes that require an authenticated user. Ideally, I'd like to wrap all of those protected Routes under a single c...

SolidJS•2y ago•

6 replies

flippyflops

Authenticated routes in SPA

<Router root={App}>
  <For each={routes}>
    {(route) => {
      // This approach assumes private by default
      if (route.info?.public) {
        return <Route component={route.component} />;
      }

      return (
        <Route
          component={(props) => (
            // Where `AuthGuard` contains redirect/navigate logic
            <AuthGuard>{route.component?.(props)}</AuthGuard>
          )}
        />
      );
    }}
  </For>
</Router>

<Router root={App}>
  <For each={routes}>
    {(route) => {
      // This approach assumes private by default
      if (route.info?.public) {
        return <Route component={route.component} />;
      }

      return (
        <Route
          component={(props) => (
            // Where `AuthGuard` contains redirect/navigate logic
            <AuthGuard>{route.component?.(props)}</AuthGuard>
          )}
        />
      );
    }}
  </For>
</Router>

GitHub

Is there a recommended way to implement Authenticated Routes? · sol...

Assume you have a SPA that includes several public Routes and several private Routes that require an authenticated user. Ideally, I'd like to wrap all of those protected Routes under a single c...

Authenticated routes in SPA

Similar Threads

Authenticated routes in SPA

Similar Threads

Similar Threads

Similar Threads