vinckr / kratos-selfservice

Self-service UI for Ory Kratos built using SvelteKit, MeltUI and TailwindCSS

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Kratos Self-Service UI

This is my attempt at developing self-service UI for Ory Kratos in SvelteKit. It uses Melt UI and TailwindCSS for styling and components.

Showcase

Features

  • Mobile support
  • Dark mode
  • All flows supported: login, logout, signup, recovery, verification, settings
  • Tested self-service methods: password, webauthn, code, totp
  • Error, success and info messages

Environment variables

# Publicly available Kratos instance URL, without trailing slash
PUBLIC_KRATOS=http://localhost:4433

# Name of the organization/instance, used for page titles
PUBLIC_ORGANIZATION=My Org
# Links to the Terms of Service and Privacy Policy, used for registration page
PUBLIC_TERMS_OF_SERVICE=http://localhost/terms-of-service
PUBLIC_PRIVACY_POLICY=http://localhost/privacy-policy

Dockerfile

There is also a dockerfile to build containerized version of this self-service, but the method used is not production ready as it uses Vite Preview and not proper Node.js server. Why? Well, for whatever reason when running the build with node build, it does not work and javascript runs out of memory or something.

Screenshots

Login screen Sign up screen Session screen Settings - Profile Settings - TOTP

About

Self-service UI for Ory Kratos built using SvelteKit, MeltUI and TailwindCSS

License:Mozilla Public License 2.0


Languages

Language:Svelte 73.5%Language:TypeScript 12.6%Language:JavaScript 9.3%Language:CSS 1.8%Language:HTML 1.6%Language:Dockerfile 1.2%