Integrating with SvelteKit

This guide explains how to integrate OAuth2 authentication into a SvelteKit application using AuthAction with PKCE flow and server-side cookie sessions.

Example Repository: For a complete working example, check out our example repository.

Overview

This application showcases how to configure and handle authentication using AuthAction’s OAuth2 service. The setup includes:

• OAuth2 PKCE login flow using the arctic library
• Secure server-side session management with cookies
• Protected routes using SvelteKit’s +page.server.ts loaders
• Logout with AuthAction’s OIDC logout flow

Prerequisites

Before using this application, ensure you have:

1. Node.js 18+: Download from nodejs.org
2. AuthAction OAuth2 credentials: You will need the tenantDomain, clientId, clientSecret, and configured redirect URIs from your AuthAction setup.

Installation

1. Clone the repository:

   git clone git@github.com:authaction/authaction-sveltekit-example.git
   cd authaction-sveltekit-example

2. Install dependencies:

   npm install

3. Configure your AuthAction credentials:

   Create a .env file in the root of your project:

   AUTHACTION_TENANT_DOMAIN=your-authaction-tenant-domain
   AUTHACTION_CLIENT_ID=your-authaction-client-id
   AUTHACTION_CLIENT_SECRET=your-authaction-client-secret
   AUTHACTION_REDIRECT_URI=http://localhost:5173/auth/callback
   AUTHACTION_LOGOUT_REDIRECT_URI=http://localhost:5173

4. Configure redirect URIs in the AuthAction dashboard:

   • Login redirect URI: http://localhost:5173/auth/callback
   • Logout redirect URI: http://localhost:5173

Usage

1. Start the development server:

   npm run dev

   This will start the application on http://localhost:5173.

2. Testing Authentication:

   • Navigate to http://localhost:5173 and click Login with AuthAction.
   • After login you are redirected to /dashboard with your name and email shown.
   • Click Logout to destroy the session and return to the home page.

Code Explanation

Auth Config

src/lib/auth.server.ts — Exports the authorization, token, userinfo, and logout endpoint URLs built from AUTHACTION_TENANT_DOMAIN.

Session Helpers

src/lib/session.server.ts — setSession / getSession / clearSession manage an HTTP-only cookie containing the user profile and access token.

Login Route

src/routes/auth/login/+server.ts — Generates a PKCE state and code_verifier via arctic, stores them in short-lived cookies, and redirects to AuthAction’s authorization endpoint.

Callback Route

src/routes/auth/callback/+server.ts — Validates state, exchanges the authorization code for tokens using PKCE, fetches the user profile from the userinfo endpoint, and stores the session cookie before redirecting to /dashboard.

Logout Route

src/routes/auth/logout/+server.ts — Clears the session cookie and redirects to AuthAction’s OIDC logout endpoint.

Protected Route

src/routes/dashboard/+page.server.ts — Loader reads the session cookie and redirects unauthenticated users to /.

Common Issues

• Redirects not working: Verify AUTHACTION_REDIRECT_URI matches exactly what is configured in the AuthAction dashboard
• Session issues: The example uses plain base64 encoding for simplicity — use an encrypted session store in production
• Network errors: Verify your app can reach https://{AUTHACTION_TENANT_DOMAIN}/oauth2/token