Skip to content

Commit

Permalink
Merge pull request #6 from Akademiaapp/keycloak-auth
Browse files Browse the repository at this point in the history
  • Loading branch information
@arctixdev
arctixdev authored Mar 18, 2024
2 parents fa6b143 + 27c49a4 commit 1774254
Show file tree
Hide file tree
Showing 4 changed files with 129 additions and 101 deletions.
Binary file modified bun.lockb
View file
Binary file not shown.
174 changes: 87 additions & 87 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,89 +1,89 @@
{
"name": "frontend",
"version": "0.0.1",
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --check . && eslint .",
"format": "prettier --write ."
},
"devDependencies": {
"@fontsource/fira-mono": "^5.0.8",
"@neoconfetti/svelte": "^2.2.1",
"@sveltejs/adapter-static": "^3.0.1",
"@sveltejs/kit": "^2.5.2",
"@types/cookie": "^0.6.0",
"@types/node": "^20.11.20",
"@types/web": "^0.0.140",
"@typescript-eslint/eslint-plugin": "^7.0.1",
"@typescript-eslint/parser": "^7.0.1",
"autoprefixer": "^10.4.17",
"eslint": "^8.57.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.35.1",
"mdi-svelte": "^1.1.2",
"postcss": "^8.4.35",
"postcss-load-config": "^5.0.3",
"prettier": "^3.2.5",
"prettier-plugin-svelte": "^3.2.1",
"prettier-plugin-tailwindcss": "^0.5.11",
"sass": "^1.71.1",
"svelte": "^4.2.12",
"svelte-check": "^3.6.4",
"tailwindcss": "^3.4.1",
"tslib": "^2.6.2",
"typescript": "^5.3.3",
"vite": "^5.1.4"
},
"type": "module",
"dependencies": {
"@hocuspocus/provider": "^2.11.2",
"@internationalized/date": "^3.5.2",
"@mdi/js": "^7.4.47",
"@tiptap-pro/extension-mathematics": "^2.7.5",
"@tiptap/core": "^2.2.4",
"@tiptap/extension-blockquote": "^2.2.4",
"@tiptap/extension-bold": "^2.2.4",
"@tiptap/extension-bullet-list": "^2.2.4",
"@tiptap/extension-code": "^2.2.4",
"@tiptap/extension-code-block": "^2.2.4",
"@tiptap/extension-collaboration": "^2.2.4",
"@tiptap/extension-collaboration-cursor": "^2.2.4",
"@tiptap/extension-color": "^2.2.4",
"@tiptap/extension-document": "^2.2.4",
"@tiptap/extension-dropcursor": "^2.2.4",
"@tiptap/extension-gapcursor": "^2.2.4",
"@tiptap/extension-hard-break": "^2.2.4",
"@tiptap/extension-heading": "^2.2.4",
"@tiptap/extension-horizontal-rule": "^2.2.4",
"@tiptap/extension-image": "^2.2.4",
"@tiptap/extension-italic": "^2.2.4",
"@tiptap/extension-list-item": "^2.2.4",
"@tiptap/extension-ordered-list": "^2.2.4",
"@tiptap/extension-paragraph": "^2.2.4",
"@tiptap/extension-placeholder": "^2.2.4",
"@tiptap/extension-strike": "^2.2.4",
"@tiptap/extension-subscript": "^2.2.4",
"@tiptap/extension-superscript": "^2.2.4",
"@tiptap/extension-task-item": "^2.2.4",
"@tiptap/extension-task-list": "^2.2.4",
"@tiptap/extension-text": "^2.2.4",
"@tiptap/extension-text-style": "^2.2.4",
"@tiptap/pm": "^2.2.4",
"akademia-authorizer-svelte": "^0.1.12",
"bits-ui": "^0.18.2",
"clsx": "^2.1.0",
"cmdk-sv": "^0.0.13",
"katex": "^0.16.9",
"lucide-svelte": "^0.334.0",
"mathlive": "^0.98.6",
"svelte-tiptap": "^1.1.2",
"tailwind-merge": "^2.2.1",
"tailwind-variants": "^0.2.0",
"tauri-plugin-window-state-api": "github:tauri-apps/tauri-plugin-window-state#v1",
"yjs": "^13.6.12"
}
"name": "frontend",
"version": "0.0.1",
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --check . && eslint .",
"format": "prettier --write ."
},
"devDependencies": {
"@fontsource/fira-mono": "^5.0.8",
"@neoconfetti/svelte": "^2.2.1",
"@sveltejs/adapter-static": "^3.0.1",
"@sveltejs/kit": "^2.5.2",
"@types/cookie": "^0.6.0",
"@types/node": "^20.11.20",
"@types/web": "^0.0.140",
"@typescript-eslint/eslint-plugin": "^7.0.1",
"@typescript-eslint/parser": "^7.0.1",
"autoprefixer": "^10.4.17",
"eslint": "^8.57.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.35.1",
"mdi-svelte": "^1.1.2",
"postcss": "^8.4.35",
"postcss-load-config": "^5.0.3",
"prettier": "^3.2.5",
"prettier-plugin-svelte": "^3.2.1",
"prettier-plugin-tailwindcss": "^0.5.11",
"sass": "^1.71.1",
"svelte": "^4.2.12",
"svelte-check": "^3.6.4",
"tailwindcss": "^3.4.1",
"tslib": "^2.6.2",
"typescript": "^5.3.3",
"vite": "^5.1.4"
},
"type": "module",
"dependencies": {
"@hocuspocus/provider": "^2.11.2",
"@internationalized/date": "^3.5.2",
"@mdi/js": "^7.4.47",
"@tiptap-pro/extension-mathematics": "^2.7.5",
"@tiptap/core": "^2.2.4",
"@tiptap/extension-blockquote": "^2.2.4",
"@tiptap/extension-bold": "^2.2.4",
"@tiptap/extension-bullet-list": "^2.2.4",
"@tiptap/extension-code": "^2.2.4",
"@tiptap/extension-code-block": "^2.2.4",
"@tiptap/extension-collaboration": "^2.2.4",
"@tiptap/extension-collaboration-cursor": "^2.2.4",
"@tiptap/extension-color": "^2.2.4",
"@tiptap/extension-document": "^2.2.4",
"@tiptap/extension-dropcursor": "^2.2.4",
"@tiptap/extension-gapcursor": "^2.2.4",
"@tiptap/extension-hard-break": "^2.2.4",
"@tiptap/extension-heading": "^2.2.4",
"@tiptap/extension-horizontal-rule": "^2.2.4",
"@tiptap/extension-image": "^2.2.4",
"@tiptap/extension-italic": "^2.2.4",
"@tiptap/extension-list-item": "^2.2.4",
"@tiptap/extension-ordered-list": "^2.2.4",
"@tiptap/extension-paragraph": "^2.2.4",
"@tiptap/extension-placeholder": "^2.2.4",
"@tiptap/extension-strike": "^2.2.4",
"@tiptap/extension-subscript": "^2.2.4",
"@tiptap/extension-superscript": "^2.2.4",
"@tiptap/extension-task-item": "^2.2.4",
"@tiptap/extension-task-list": "^2.2.4",
"@tiptap/extension-text": "^2.2.4",
"@tiptap/extension-text-style": "^2.2.4",
"@tiptap/pm": "^2.2.4",
"bits-ui": "^0.18.2",
"clsx": "^2.1.0",
"cmdk-sv": "^0.0.13",
"katex": "^0.16.9",
"keycloak-js": "^23.0.7",
"lucide-svelte": "^0.334.0",
"mathlive": "^0.98.6",
"svelte-tiptap": "^1.1.2",
"tailwind-merge": "^2.2.1",
"tailwind-variants": "^0.2.0",
"tauri-plugin-window-state-api": "github:tauri-apps/tauri-plugin-window-state#v1",
"yjs": "^13.6.12"
}
}
15 changes: 15 additions & 0 deletions src/authStore.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import type { Writable } from 'svelte/store';
import { writable } from 'svelte/store';

export interface UserInfo {
email: string;
name: string;
username: string;
sub: string;
email_verified: boolean;
preferred_username: string;
given_name: string;
family_name: string;
}

export const userInfo: Writable<UserInfo> = writable();
41 changes: 27 additions & 14 deletions src/routes/signin/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,27 @@
<script lang="ts">
import { getContext } from 'svelte';
import { Authorizer } from 'akademia-authorizer-svelte';
import { goto } from '$app/navigation';
import type { Readable } from 'svelte/store';
import type { AuthorizerState } from 'akademia-authorizer-svelte/types';
import Keycloak from 'keycloak-js';
import { userInfo, type UserInfo } from '../../authStore';
let state: AuthorizerState;
const store = <Readable<AuthorizerState>>getContext('authorizerContext');
const keycloak = new Keycloak({
url: 'http://localhost:8080/',
realm: 'akademia',
clientId: 'akademia-frontend',
});
let loggedIn = false;
store.subscribe((data: AuthorizerState) => {
state = data;
if (state.token) {
goto('/workspace/home');
keycloak.init({
onLoad: 'login-required',
}).then((authenticated) => {
loggedIn = authenticated;
if (loggedIn) {
keycloak.loadUserInfo().then((userInfoKc) => {
userInfo.set(userInfoKc as UserInfo);
console.log('User info:', userInfoKc);
});
}
}).catch((e) => {
console.error(e);
});
</script>

Expand All @@ -24,9 +33,13 @@
<div class="login-cont">
<img src="/favicon.png" class="logo" alt="Akademia logo" />
<h1 class="header">Velkommen til Akademia!</h1>
<h2>Vælg en loginmetode</h2>
<br />
<Authorizer />
{#if loggedIn}
<h2>Du er logget ind som {$userInfo.preferred_username}!</h2>
<button on:click={() => {keycloak.logout();}}>Log ud</button>
{:else}
Du er ikke logget ind
<button on:click={() => {keycloak.login();}}>Login</button>
{/if}
</div>
</div>

Expand Down

0 comments on commit 1774254

Please sign in to comment.