{
61 | if (open) {
62 | if (key === 'Escape') {
63 | open = false;
64 | } else if (shouldSubmitOnEnter && key === 'Enter') {
65 | dispatch('submit');
66 | }
67 | }
68 | }}
69 | on:click
70 | on:click={() => {
71 | if (!didClickInnerModal && !preventCloseOnClickOutside) open = false;
72 | didClickInnerModal = false;
73 | }}
74 | on:mouseover
75 | on:mouseenter
76 | on:mouseleave
77 | on:transitionend={(e) => {
78 | if (e.propertyName === 'transform') {
79 | dispatch('transitionend', { open });
80 | }
81 | }}
82 | in:fade={{ duration: 200 }}
83 | out:fade={{ delay: 200, duration: 200 }}
84 | {...$$restProps}
85 | >
86 |
157 | {/if}
158 |
--------------------------------------------------------------------------------
/src/lib/InlineSvg.svelte:
--------------------------------------------------------------------------------
1 |
67 |
--------------------------------------------------------------------------------
/src/lib/Kratos/AuthContainer.svelte:
--------------------------------------------------------------------------------
1 |
9 |
10 | {
94 | didClickInnerModal = true;
95 | }}
96 | in:fly={{
97 | y: -10,
98 | delay: 200,
99 | duration: 200
100 | }}
101 | out:fly={{
102 | y: -10,
103 | duration: 200
104 | }}
105 | >
106 |
156 |
107 | {#if modalLabel}
108 |
109 |
111 | {/if}
112 |
113 |
114 |
117 |
118 |
120 |
132 |
133 |
109 | {modalLabel}
110 |
111 | {/if}
112 |
113 |
114 |
117 |
118 | {modalHeading}
119 |
120 |
132 |
134 |
136 |
155 |
15 |
57 |
--------------------------------------------------------------------------------
/src/lib/Kratos/AuthForm.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
15 |
--------------------------------------------------------------------------------
/src/lib/Kratos/FormSectionHeader.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
16 |
51 |
52 |
53 |
17 |
18 |
21 | {config.projectName}
22 |
23 |
24 |
25 |
26 |
29 |
50 |
31 | {#if flowType === 'registration'}
32 |
49 | 33 | Already have an account? Log in. 36 |
37 | {/if} 38 | 39 | {#if flowType === 'login'} 40 | 47 | {/if} 48 |
54 |
55 |
56 |
6 |
13 |
--------------------------------------------------------------------------------
/src/lib/Kratos/InputDefault.svelte:
--------------------------------------------------------------------------------
1 |
13 |
14 |
7 |
8 |
9 |
10 | {text}
11 |
12 |
15 |
16 |
21 |
22 |
31 |
32 |
33 |
20 |
21 |
31 |
33 |
34 |
15 | {text}
16 |
17 | {/each}
18 | {/if}
19 |
--------------------------------------------------------------------------------
/src/lib/Kratos/PasswordToggle.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
22 |
23 |
--------------------------------------------------------------------------------
/src/lib/Kratos/SubmitButton.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
17 |
--------------------------------------------------------------------------------
/src/lib/Link.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 |
16 |
16 |
85 |
17 |
18 |
21 | {config.projectName}
22 |
23 |
24 |
83 |
84 |
20 |
40 | {:else}
41 |
23 |
39 |
24 |
35 | 27 | Sorry, this page isn't available 28 |
29 | 34 |
36 | 
37 |
38 |
37 | {title}
42 | {/if} 43 | 44 | 47 | -------------------------------------------------------------------------------- /src/routes/__layout.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
19 | {#if !$page.path.includes('auth')}
20 |
21 | {/if}
22 |
23 |
24 |
26 |
27 |
--------------------------------------------------------------------------------
/src/routes/_load.ts:
--------------------------------------------------------------------------------
1 | import type { Load } from '@sveltejs/kit';
2 | import type { UserSession } from '$lib/types';
3 |
4 | export const createLoad = (path?: string) => {
5 | const load: Load = async ({ session }: { session: UserSession }) => {
6 | if (session.user) {
7 | return {
8 | props: {
9 | session
10 | }
11 | };
12 | }
13 |
14 | return {
15 | status: 302,
16 | redirect: path || '/auth/login'
17 | };
18 | };
19 |
20 | return load;
21 | };
22 |
--------------------------------------------------------------------------------
/src/routes/about.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
10 |
12 |
--------------------------------------------------------------------------------
/src/routes/api/auth/[...auth].ts:
--------------------------------------------------------------------------------
1 | import type { Request } from '@sveltejs/kit';
2 | import type { ErrorResponse } from '@ory/kratos-client';
3 | import type { AuthFlowType } from '$lib/types';
4 | import { kratosAdminApi } from '$lib/services/kratos';
5 |
6 | export const get = async (req: Request) => {
7 | const flowId = req.headers.flow_id;
8 | const error = req.headers.error;
9 | const flowType = req.params.auth;
10 |
11 | let authFlow =
12 | flowType === 'registration'
13 | ? 'getSelfServiceRegistrationFlow'
14 | : flowType === 'recovery'
15 | ? 'getSelfServiceRecoveryFlow'
16 | : flowType === 'verification'
17 | ? 'getSelfServiceVerificationFlow'
18 | : flowType == 'settings'
19 | ? 'getSelfServiceSettingsFlow'
20 | : flowType == 'error'
21 | ? 'getSelfServiceError'
22 | : 'getSelfServiceLoginFlow';
23 |
24 | try {
25 | const {
26 | status,
27 | data
28 | }: { status: number; data: AuthFlowType | ErrorResponse } = await kratosAdminApi[authFlow](
29 | flowType === 'error' ? error : flowId
30 | );
31 |
32 | return {
33 | body: { data },
34 | status,
35 | headers: {
36 | 'Content-Type': 'application/json'
37 | }
38 | };
39 | } catch {}
40 | };
41 |
--------------------------------------------------------------------------------
/src/routes/api/auth/delete.ts:
--------------------------------------------------------------------------------
1 | import type { Request } from '@sveltejs/kit';
2 | import { Configuration, AdminApi } from '@ory/kratos-client';
3 | import config from '$lib/config';
4 |
5 | const configuration = new Configuration({
6 | basePath: config.kratos.admin
7 | });
8 |
9 | const kratos = new AdminApi(configuration);
10 |
11 | export const del = async (request: Request) => {
12 | const { id } = JSON.parse(request.body as string);
13 |
14 | const { data } = await kratos.getIdentity(id);
15 |
16 | if (id === data.id) {
17 | await kratos.deleteIdentity(id);
18 | return {
19 | status: 200,
20 | body: { success: true, id }
21 | };
22 | }
23 |
24 | return {
25 | status: 404,
26 | body: {
27 | error: 'User not found'
28 | }
29 | };
30 | };
31 |
--------------------------------------------------------------------------------
/src/routes/auth/_load.ts:
--------------------------------------------------------------------------------
1 | import type { Load } from '@sveltejs/kit';
2 | import config from '$lib/config';
3 | import { isString } from '$lib/helpers';
4 | import type { AuthFlowType, KratosFlowType } from '$lib/types';
5 |
6 | export const createLoad = (flowType: KratosFlowType) => {
7 | const load: Load = async ({ page, fetch }) => {
8 | const flowID = page.query.get('flow');
9 |
10 | const res = await fetch(`/api/auth/${flowType}`, {
11 | headers: {
12 | flow_id: flowID
13 | }
14 | });
15 |
16 | if (!res.ok) {
17 | return {
18 | status: 302,
19 | redirect: `${config.kratos.public}/self-service/${flowType}/browser`
20 | };
21 | }
22 |
23 | const { data: flow }: { status: number; data: AuthFlowType } = await res.json();
24 |
25 | return {
26 | props: {
27 | ui: flow.ui
28 | }
29 | };
30 | };
31 |
32 | return load;
33 | };
34 |
--------------------------------------------------------------------------------
/src/routes/auth/login.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
22 |
23 | About
11 |
24 |
30 | Forgot Your Password?
25 |26 | We get it, stuff happens. Just enter your email address below and we'll send you a link to 27 | reset your password! 28 |
29 |
77 |
98 | {/if}
99 | {#if type === 'submit'}
100 |
78 | Your password must be at least 6 characters long.
79 | {passwordValue?.length > 5 ? '✓' : ''}
82 |
83 | {#if focused && passwordValue?.length > 0}
84 | {#if strength < 1}
85 | Weak
86 | {/if}
87 | {#if strength > 0 && strength < 2}
88 | Medium
89 | {/if}
90 | {#if strength > 1 && strength < 3}
91 | Really Strong
92 | {/if}
93 | {#if strength > 2}
94 | Super secure
95 | {/if}
96 | {/if}
97 |
24 |
26 | Verify your email address
25 |
50 |
53 |
--------------------------------------------------------------------------------
/src/routes/index.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 | An error occurred
51 |{message}
6 | {#if $session.user}
7 |
21 |
--------------------------------------------------------------------------------
/src/routes/profile/@[user]/index.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
13 |
14 | Hello, @{$session.user.username}
8 | {/if} 9 | 10 |Welcome to SvelteKit with Authentication via Ory Kratos!
11 |12 | Visit kit.svelte.dev to read 13 | the sveltekit documentation 14 |
15 |16 | Visit www.ory.sh/kratos/docs to read the Ory Kratos documentation 19 |
20 |Welcom back, {session.user.username}
15 | 16 |Your info:
17 | 18 |{JSON.stringify(session.user, null, 2)}
77 |
79 |
94 |
99 |
100 | {/if}
101 |
102 | {#if name === 'traits.name.first' || name === 'traits.name.last'}
103 |
112 |
117 |
118 | {/if}
119 | {#if type === 'password'}
120 |
132 | {label?.text}
133 |
134 | {/if}
135 | {/each}
136 |
137 |
142 | (open = false)}
149 | on:open
150 | on:close
151 | on:submit={() => deleteUser(session.user.id)}
152 | >
153 |
155 |
156 |
--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/drejohnson/sveltekit-kratos/32b754c281e272706953dc2f1239840f6b7c8d8e/static/favicon.png
--------------------------------------------------------------------------------
/static/images/404.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/static/images/undraw_Access_account_re_8spm.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/static/images/undraw_authentication_fsn5.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/static/images/undraw_enter_uhqk.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/static/images/undraw_my_password_d6kg.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/static/images/undraw_secure_login_pdn4.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/static/logo-192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/drejohnson/sveltekit-kratos/32b754c281e272706953dc2f1239840f6b7c8d8e/static/logo-192.png
--------------------------------------------------------------------------------
/static/logo-512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/drejohnson/sveltekit-kratos/32b754c281e272706953dc2f1239840f6b7c8d8e/static/logo-512.png
--------------------------------------------------------------------------------
/static/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "background_color": "#ffffff",
3 | "theme_color": "#5cb85c",
4 | "name": "Sveltekit Kratos",
5 | "short_name": "Sveltekit Kratos",
6 | "display": "minimal-ui",
7 | "start_url": "/",
8 | "icons": [
9 | {
10 | "src": "logo-192.png",
11 | "sizes": "192x192",
12 | "type": "image/png"
13 | },
14 | {
15 | "src": "logo-512.png",
16 | "sizes": "512x512",
17 | "type": "image/png"
18 | }
19 | ]
20 | }
--------------------------------------------------------------------------------
/static/robot.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
1 | import { readFileSync } from 'fs';
2 | import preprocess from 'svelte-preprocess';
3 | import node from '@sveltejs/adapter-node';
4 |
5 | /** @type {import('@sveltejs/kit').Config} */
6 | const config = {
7 | // Consult https://github.com/sveltejs/svelte-preprocess
8 | // for more information about preprocessors
9 | preprocess: preprocess({
10 | defaults: {
11 | style: 'postcss'
12 | },
13 | postcss: true
14 | }),
15 |
16 | kit: {
17 | adapter: node(),
18 | // hydrate the This is a permanent action and cannot be undone.
154 | element in src/app.html
19 | target: '#svelte',
20 | hostHeader: 'X-Forwarded-Host',
21 | // trailingSlash: 'ignore',
22 | vite: () => ({
23 | server: {
24 | host: '0.0.0.0',
25 | port: 3000,
26 | https: {
27 | key: readFileSync('./certs/local/svltkt.local+1-key.pem'),
28 | cert: readFileSync('./certs/local/svltkt.local+1.pem')
29 | },
30 | hmr: {
31 | host: 'localhost',
32 | protocol: 'wss',
33 | port: 24678
34 | }
35 | }
36 | })
37 | }
38 | };
39 |
40 | export default config;
41 |
--------------------------------------------------------------------------------
/tailwind.config.cjs:
--------------------------------------------------------------------------------
1 | const colors = require('tailwindcss/colors');
2 |
3 | module.exports = {
4 | mode: 'jit',
5 | purge: ['./src/**/*.{html,js,svelte,ts}'],
6 | darkMode: 'class',
7 | theme: {
8 | fontFamily: {
9 | display: ['Bebas Neue', 'cursive'],
10 | sans: ['Poppins', 'sans-serif'],
11 | body: ['Poppins', 'sans-serif']
12 | },
13 | colors: {
14 | transparent: 'transparent',
15 | current: 'currentColor',
16 | black: colors.black,
17 | white: colors.white,
18 | gray: colors.trueGray,
19 | red: colors.red,
20 | yellow: colors.amber,
21 | blue: colors.blue,
22 | indigo: colors.indigo
23 | },
24 | extend: {
25 | width: {
26 | '100px': '100px',
27 | '150px': '150px',
28 | '200px': '200px',
29 | '300px': '300px',
30 | '400px': '400px',
31 | '500px': '500px'
32 | },
33 | height: {
34 | 'screen-90': '90vh',
35 | 'screen-80': '80vh',
36 | '100px': '100px',
37 | '200px': '200px',
38 | '300px': '300px',
39 | '400px': '400px',
40 | '500px': '500px'
41 | },
42 | zIndex: {
43 | negative: '-1'
44 | }
45 | }
46 | },
47 | variants: {
48 | extend: {}
49 | },
50 | plugins: []
51 | };
52 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "moduleResolution": "node",
4 | "module": "es2020",
5 | "lib": ["es2020"],
6 | "target": "es2019",
7 | /**
8 | svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
9 | to enforce using \`import type\` instead of \`import\` for Types.
10 | */
11 | "importsNotUsedAsValues": "error",
12 | "isolatedModules": true,
13 | "resolveJsonModule": true,
14 | /**
15 | To have warnings/errors of the Svelte compiler at the correct position,
16 | enable source maps by default.
17 | */
18 | "sourceMap": true,
19 | "esModuleInterop": true,
20 | "skipLibCheck": true,
21 | "forceConsistentCasingInFileNames": true,
22 | "baseUrl": ".",
23 | "allowJs": true,
24 | "checkJs": true,
25 | "paths": {
26 | "$lib/*": ["src/lib/*"]
27 | }
28 | },
29 | "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
30 | }
31 |
--------------------------------------------------------------------------------