As we saw in the routing introduction, layouts are a way to share UI and data loading logic between different routes.

Sometimes it’s useful to use layouts without affecting the route — for example, you might need your /app and /account routes to be behind authentication, while your /about page is open to the world. We can do this with a route group, which is a directory in parentheses.

Create an (authed) group by renaming account to (authed)/account then renaming app to (authed)/app.

Now we can control access to these routes by creating src/routes/(authed)/+layout.server.js:

import { redirect } from '@sveltejs/kit';  export function load({ cookies, url }) { if (!cookies.get('logged_in')) { redirect(303, `/login?redirectTo=${url.pathname}`); } }

If you try to visit these pages, you’ll be redirected to the /login route, which has a form action in src/routes/login/+page.server.js that sets the logged_in cookie.

We can also add some UI to these two routes by adding a src/routes/(authed)/+layout.svelte file:

<script> let { children } = $props(); </script>  {@render children()}  <form method="POST" action="/logout"> <button>log out</button> </form>

<script lang="ts"> let { children } = $props(); </script>  {@render children()}  <form method="POST" action="/logout"> <button>log out</button> </form>