Sk-oidc-oauth NPM

Logo

Welcome to SvelteKit OIDC OAuth 👋

⚠️ Under Construction!

OIDC/OAuth2 authentication and authorization for prerendered/client-side-rendered SvelteKit apps.

🏠 Homepage

Installation

npm i -D sk-oidc-oauth

Usage

For full usage information, see the docs.

Quick Start

<!-- src/routes/+layout.svelte -->
<script lang="ts">
  import { Authentication, type UserManagerSettings } from 'sk-oidc-oauth';

  const userManagerSettings: UserManagerSettings = {
    authority: 'https://login.microsoftonline.com/tenant-id/v2.0',
    client_id: '1234',
    redirect_uri: 'http://localhost:5173/auth/callback/azure',
    loadUserInfo: true,
  };
</script>

<Authentication {userManagerSettings}>
  <slot />
</Authentication>

Add a callback route for your redirect_uri.

<!-- 
  src/routes/auth/callback/azure/+page.svelte

  We just need the route to be defined, so this file can/should be empty.
 -->

You're all set! You can use all of the library's components, functions, and stores anywhere inside the root layout.

Protect Routes

Use the AuthorizationGuard in a nested +layout.svelte to protect all of the routes within:

<!-- src/routes/private/+layout.svelte -->
<script lang="ts">
  import { AuthorizationGuard, isFullyAuthenticated } from 'sk-oidc-oauth';

  $: yourCustomCondition = false;
</script>

<AuthorizationGuard
  passCondition={$isAuthenticated && yourCustomCondition}
  redirect="/auth/signin"
>
  <slot />
</AuthorizationGuard>

Sign In / Out

<!-- src/lib/components/AuthButton/AuthButton.svelte -->
<script lang="ts">
  import {
    isFullyAuthenticated,
    startSigninRedirect,
    startSignoutRedirect,
  } from 'sk-oidc-oauth';
</script>

{#if $isFullyAuthenticated}
  <button type="button" on:click={startSignoutRedirect}>Sign out</button>
{:else}
  <button type="button" on:click={startSigninRedirect}>Sign in</button>
{/if}

User Info

<!-- src/lib/components/User/User.svelte -->
<script lang="ts">
  import { userInfo } from 'sk-oidc-oauth';
</script>

<ul>
  <li>{$userInfo.profile.name}</li>
  <li>Email: {$userInfo.profile.email}</li>
</ul>