Sveltekit-zitadel-oidc NPM

SvelteKit Zitadel OIDC Integration

This project demonstrates how to integrate OIDC (OpenID Connect) authentication using Zitadel with a SvelteKit application. The integration leverages the oidc-client-ts library to handle authentication flows and manage user sessions.

Installation
Configuration
Usage
Scripts
GitHub Actions
License

Installation

To get started, clone the repository and install the dependencies:

git clone https://github.com/yourusername/sveltekit-zitadel-oidc.git
cd sveltekit-zitadel-oidc
npm install

Configuration

Create a .env file in the root of your project and add the following environment variables:

Variable	Default Value	Description
`PUBLIC_GUI_URL`	`http://localhost:5173`	The base URL of the GUI application. Svelte dev port by default.
`PUBLIC_OIDC_URL`	`http://id.loc`	The URL of the OIDC provider.
`PUBLIC_OIDC_CLIENT_ID`		The client ID for the OIDC application.
`PUBLIC_OIDC_LOGIN_URL`	`http://localhost:5173/`	The URL to redirect to after a successful login. Svelte might require trailing slash.
`PUBLIC_OIDC_LOGOUT_URL`	`http://localhost:5173/`	The URL to redirect to after a successful logout. Svelte might require trailing slash.

These variables configure the OIDC client with the necessary URLs and client ID.

Usage

Authorization

The authorize function initializes the OIDC UserManager and loads the user from storage:

import { authorize } from './lib/auth/oidc/client.js';

authorize().then(user => {
  if (user) {
    console.log('User is authenticated:', user);
  } else {
    console.log('User is not authenticated');
  }
});

Login and Logout

To initiate the login and logout processes, use the login and logout functions:

import { login, logout } from './lib/auth/oidc/client.js';

// To login
login();

// To logout
logout();

Handling Callbacks

Use the AuthCallback component to handle login and silent refresh callbacks:

<script lang="ts">
  import AuthCallback from '$lib/auth/oidc/AuthCallback.svelte';
</script>

<AuthCallback action="login" />

Svelte Stores

The authentication state is managed using Svelte stores:

import { isAuthenticated, user } from './lib/auth/oidc/store.js';

$isAuthenticated; // boolean indicating if the user is authenticated
$user; // the authenticated user object or null

Scripts

The package.json includes several scripts for development and building the project:

dev: Start the development server.
build: Build the project.
preview: Preview the built project.
package: Package the project.
prepublishOnly: Run the package script before publishing.
check: Run type checks.
check:watch: Run type checks in watch mode.

{
  "scripts": {
    "dev": "vite dev",
    "build": "vite build && npm run package",
    "preview": "vite preview",
    "package": "svelte-kit sync && svelte-package && publint",
    "prepublishOnly": "npm run package",
    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
  }
}

GitHub Actions

The project includes a GitHub Actions workflow for building and publishing the package:

name: Node.js Package

on:
  push:
    tags:
      - '0.*'

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm install
      - run: npm run package

  publish-npm:
    needs: build
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          registry-url: https://registry.npmjs.org/
      - run: npm ci
      - run: npm publish --access public
        env:
          NODE_AUTH_TOKEN: ${{secrets.NPM_SECRET}}