Svelte Oidc

Overview

The svelte-oidc is an OIDC Client Component for Svelte. It allows developers to easily integrate OpenID Connect (OIDC) authentication into their Svelte applications. The component supports client-side authentication and can be used with popular identity providers such as Okta, Auth0, KeyCloak, IdentityServer, and Ory.

Features

• OidcContext: A component to initiate the OIDC client with attributes like issuer, client id, redirect URI, post logout redirect URI, metadata, and extra options.
• LoginButton: A button component to log in the current user with options to preserve the route and override the callback URL.
• LogoutButton: A button component to log out the current user with the option to override the logout URL.
• RefreshTokenButton: A button component to refresh the current token.
• Stores: Access to various stores containing information like loading status, authentication status, access token, identity token, user info, and authentication errors.
• Constants: Constants for OIDC context callback URL, client promise key in setContext/getContext, and logout URL.

Installation

To install the svelte-oidc package, use the following command:

npm install @dopry/svelte-oidc

In your Svelte application, import the required components as needed. For example, to use the OidcContext component:

<script>
  import { OidcContext } from '@dopry/svelte-oidc';

  // Your component logic
</script>

<OidcContext issuer="https://example.com" client_id="your_client_id" redirect_uri={window.location.href} />

For SSR applications, ensure that the authentication is handled on the client side and not rendered server side.

Summary

The svelte-oidc component provides an easy-to-use solution for integrating OIDC authentication in Svelte applications. It allows developers to work with different identity providers without dealing with vendor-specific assumptions, enabling smoother migration between providers. With its various components and stores, developers can easily handle authentication, access tokens, user info, and more.