Sveltekit Kratos screenshot

Sveltekit Kratos

Author Avatar Theme by Drejohnson
Updated: 24 Jun 2021
32 Stars

Sveltekit app using ORY Kratos for authentication

Categories

Overview

This product analysis is for the SvelteKit-KratosBasic example, which demonstrates how to use Ory Kratos for authentication in a SvelteKit application.

Features

  • Svelte via SvelteKit: The example utilizes SvelteKit, a framework for building fast web applications.
  • Authentication via Kratos: Ory Kratos is used for handling authentication in the SvelteKit application.
  • Styling via tailwindcss: The example incorporates the tailwindcss library for styling the SvelteKit application.
  • GraphQL via Hasura: This feature allows for the integration of GraphQL functionality via Hasura.

Installation

To install the SvelteKit-KratosBasic example, follow these steps:

  1. Install dependencies by running npm install (or pnpm install or yarn).
  2. Start a development server.
    • If getting a “listen EACCES: permission denied 0.0.0.0:80” error when running locally on port 80, try the following:
      • Start Kratos.
      • Create a cookie/default secret.
      • Create cryptographic keys for Oathkeeper JWT.
      • Create SSL certificates for local development.
  3. Build a production version of the app by running npm run build.

To preview the built app, use npm run preview, regardless of whether an adapter has been installed. However, note that this should not be used to serve the app in production.

Summary

The SvelteKit-KratosBasic example is a demonstration of incorporating Ory Kratos for authentication in a SvelteKit application. It also includes additional features such as styling with tailwindcss and GraphQL integration via Hasura. The installation process requires installing dependencies, starting a development server, and building a production version of the app. Overall, it provides a basic foundation for implementing authentication in a SvelteKit project. However, it should be noted that SvelteKit is still in early beta and may have bugs, especially in Firefox. Additionally, Windows users using WSL2 may encounter a bug related to constant refreshes of the dev server due to a websocket connection error when using the host 127.0.0.1.