nuxt kratos selfservice example.

nuxt-kratos-selfservice/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

nuxt-kratos-selfservice/.kratos/identity.schema.json

@@ -0,0 +1,39 @@
+{
+  "$id": "https://schemas.ory.sh/presets/kratos/quickstart/email-password/identity.schema.json",
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "Person",
+  "type": "object",
+  "properties": {
+    "traits": {
+      "type": "object",
+      "properties": {
+        "email": {
+          "type": "string",
+          "format": "email",
+          "title": "E-Mail",
+          "minLength": 3,
+          "ory.sh/kratos": {
+            "credentials": {
+              "password": {
+                "identifier": true
+              }
+            },
+            "verification": {
+              "via": "email"
+            },
+            "recovery": {
+              "via": "email"
+            }
+          }
+        }
+      },
+      "required": [
+        "email"
+      ],
+      "additionalProperties": false
+    }
+  },
+  "required": [
+    "traits"
+  ]
+}

nuxt-kratos-selfservice/.kratos/kratos.yml

@@ -0,0 +1,100 @@
+
+dsn: memory
+
+serve:
+  public:
+    base_url: http://127.0.0.1:4433/
+    cors:
+      enabled: true
+      allowed_origins:
+      - http://127.0.0.1:3000
+      allowed_methods:
+      - POST
+      - GET
+      - PUT
+      - PATCH
+      - DELETE
+      allowed_headers:
+      - Authorization
+      - Content-Type
+      exposed_headers:
+      - Content-Type
+      allow_credentials: true
+  admin:
+    base_url: http://127.0.0.1:4434/
+
+selfservice:
+  default_browser_return_url: http://127.0.0.1:3000/
+  allowed_return_urls:
+  - http://127.0.0.1:3000
+
+  methods:
+    password:
+      enabled: true
+      config:
+        haveibeenpwned_enabled: false
+        min_password_length: 8
+
+    totp:
+      enabled: true
+    lookup_secret:
+      enabled: true
+
+  flows:
+    error:
+      ui_url: http://127.0.0.1:3000/error
+
+    settings:
+      ui_url: http://127.0.0.1:3000/settings
+      privileged_session_max_age: 15m
+
+    recovery:
+      enabled: true
+      ui_url: http://127.0.0.1:3000/recovery
+
+    verification:
+      enabled: true
+      ui_url: http://127.0.0.1:3000/verification
+      after:
+        default_browser_return_url: http://127.0.0.1:3000/
+
+    logout:
+      after:
+        default_browser_return_url: http://127.0.0.1:3000/login
+
+    login:
+      ui_url: http://127.0.0.1:3000/login
+
+    registration:
+      ui_url: http://127.0.0.1:3000/signup
+      after:
+        password:
+          hooks:
+          - hook: session
+
+log:
+  level: debug
+  format: text
+  leak_sensitive_values: true
+
+secrets:
+  cookie:
+  - PLEASE-CHANGE-ME-I-AM-VERY-INSECURE
+
+session:
+  cookie:
+    same_site: Lax
+
+hashers:
+  argon2:
+    parallelism: 1
+    memory: 128MB
+    iterations: 2
+    salt_length: 16
+    key_length: 16
+
+identity:
+  default_schema_id: default
+  schemas:
+  - id: default
+    url: file:///etc/config/kratos/identity.schema.json

nuxt-kratos-selfservice/.nvmrc

@@ -0,0 +1 @@
+v20.12.2

nuxt-kratos-selfservice/README.md

@@ -0,0 +1,38 @@
+# Nuxt 3 Kratox Selfservice example
+
+## Relevant files
+
+The nuxt integration is very simple and is not based on any modules.
+The files used to handle authentication and session checks are
+
+- `composables/useAuth.ts`: Contains the functions to login, logout and check if the user is authenticated.
+- `middleware/auth.global.ts`: Checks for a valid kratos session and redirects to the login page if not found.
+- `pages/signup.vue` & `pages/login.vue`: The signup and login pages implements with `useAuth`
+- `plugins/kratos.ts`: Provide kratos client's to the nuxt app.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+
+```bash
+docker compose up -d
+```
+
+Then the frontend will be available on http://127.0.0.1:3000. Make sure to use the IP address not `localhost` as it will lead to problems with cookies.

nuxt-kratos-selfservice/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>