docs: Add SvelteKit OAuth tutorial docs (#8311)

Co-authored-by: Thang Vu <hi@thvu.dev>

docs/docs/getting-started/oauth-tutorial.mdx

@@ -182,7 +182,127 @@ export default async function listMovies(req, res) {
 
   </TabItem>
   <TabItem value="sveltekit" label="SvelteKit">
-TODO: SvelteKit
+
+:::warning
+`@auth/sveltekit` is currently experimental. The API _will_ change in the future.
+:::
+
+### Prerequisites
+
+This tutorial assumes you have a SvelteKit application set up. If you don't, you can follow the [SvelteKit tutorial](https://kit.svelte.dev/docs/creating-a-project) to get started.
+
+### Installing Auth.js
+
+```bash npm2yarn
+npm install @auth/core @auth/sveltekit
+```
+
+### Create server hook
+
+Create the following [Server hook](https://kit.svelte.dev/docs/hooks) file. This route contains the necessary configuration for Auth.js, as well as the dynamic route handler:
+
+```ts title="src/hooks.server.ts"
+import { SvelteKitAuth } from "@auth/sveltekit"
+import GitHub from "@auth/core/providers/github"
+import { GITHUB_ID, GITHUB_SECRET } from "$env/static/private"
+ *
+export const handle = SvelteKitAuth({
+  providers: [GitHub({ clientId: GITHUB_ID, clientSecret: GITHUB_SECRET })],
+})
+```
+
+:::info
+
+Behind the scenes, this creates all the relevant OAuth API routes within `/api/auth/*` so that auth API requests to:
+
+- [GET `/api/auth/signin`](https://authjs.dev/reference/rest-api#get--apiauthsignin)
+- [POST `/api/auth/signin/:provider`](https://authjs.dev/reference/rest-api#post--apiauthsigninprovider)
+- [GET/POST `/api/auth/callback/:provider`](https://authjs.dev/reference/rest-api#get--post--apiauthcallbackprovider)
+- [GET `/api/auth/signout`](https://authjs.dev/reference/rest-api#get--apiauthsignout)
+- [POST `/api/auth/signout`](https://authjs.dev/reference/rest-api#post--apiauthsignout)
+- [GET `/api/auth/session`](https://authjs.dev/reference/rest-api#get--apiauthsession)
+- [GET `/api/auth/csrf`](https://authjs.dev/reference/rest-api#get--apiauthcsrf)
+- [GET `/api/auth/providers`](https://authjs.dev/reference/rest-api#get--apiauthproviders)
+
+can be handled by Auth.js. In this way, Auth.js stays in charge of the whole application's authentication request/response flow.
+
+Auth.js is fully customizable - [our guides section](/guides/overview) teaches you how to set it up to handle auth in different ways. All the possible configuration options are [listed here](/reference/configuration/auth-config).
+:::
+
+### Adding environment variables
+
+You may notice we are using environment variables in the code example above. We take the value of `GITHUB_ID` and `GITHUB_SECRET` from the GitHub Developer OAuth Portal. See [Configuring OAuth Provider](/getting-started/oauth-tutorial#2-configuring-oauth-provider) section on how to get those.
+
+In your project root, create a `.env.local` file and add the `AUTH_SECRET` environment variable:
+
+```title=".env.local"
+AUTH_SECRET="This is an example"
+```
+
+`AUTH_SECRET` is a random string used by the library to encrypt tokens and email verification hashes, and **it's mandatory to keep things secure**! 🔥 🔐 . You can use:
+
+```
+$ openssl rand -base64 32
+```
+
+or https://generate-secret.vercel.app/32 to generate a random value for it.
+
+### Exposing the session via page store
+
+Auth.js provides us a getSession, function to access the session data and status, to call from the `event.locals` variable. We can now just call it and add it to our `$page` store.
+
+```ts
+import type { LayoutServerLoad } from './$types';
+ *
+export const load: LayoutServerLoad = async (event) => {
+  return {
+    session: await event.locals.getSession()
+  };
+};
+```
+
+### Consuming the session via page store
+
+You can use the `$page.data.session` variable from anywhere on your page. Learn more about SvelteKit's page store in the [SvelteKit docs](https://learn.svelte.dev/tutorial/page-store).
+
+```ts title="route/+page.svelte"
+<script>
+  import { signIn, signOut } from '@auth/sveltekit/client'
+  import { page } from '$app/stores'
+</script>
+
+{#if $page.data.session?.user}
+  <p>Signed in as {$page.data.session.user.email}</p>
+  <button on:click={signOut}>Sign out</button>
+  <img src="https://cdn.pixabay.com/photo/2017/08/11/19/36/vw-2632486_1280.png" />
+{:else}
+  <p>Not signed in.</p>
+  <button on:click={() => signIn('github')}>Sign in</button>
+{/if}
+```
+
+### Protecting API Routes
+
+To protect your API Routes (blocking unauthorized access to resources), you can use `locals.getSessions()` just like in the layouts file to know whether a session exists or not:
+
+```ts title="routes/api/movies/+server.ts"
+import { json, error } from "@sveltejs/kit";
+import type { RequestEvent } from "./$types";
+ 
+export async function GET({ locals }: RequestEvent) {
+  const session = await locals.getSession()
+  if (!session?.user) {
+    throw error(401, "You must sign in to view movies.");
+  }
+
+  return json({
+    movies: [
+      { title: "Alien vs Predator", id: 1 },
+      { title: "Reservoir Dogs", id: 2 },
+    ]
+  })
+}
+```
   </TabItem>
   <TabItem value="solidstart" label="SolidStart">
 TODO: SolidStart
@@ -314,7 +434,24 @@ $ npm run next dev
 
   </TabItem>
   <TabItem value="sveltekit" label="SvelteKit">
-TODO SvelteKit
+
+```ts title="src/hooks.server.ts"
+import { SvelteKitAuth } from "@auth/sveltekit"
+import GitHub from "@auth/core/providers/github"
+import { GITHUB_ID, GITHUB_SECRET } from "$env/static/private"
+ *
+export const handle = SvelteKitAuth({
+  providers: [GitHub({ clientId: GITHUB_ID, clientSecret: GITHUB_SECRET })],
+})
+```
+
+Great! We're now ready to run our application locally. Start the Svelte app by running on your terminal the following command and navigating to [`http://localhost:5173`](http://localhost:5173):
+
+```
+$ npm run vite dev
+```
+
+
   </TabItem>
   <TabItem value="solidstart" label="SolidStart">
 TODO SolidStart