Skip to content

Refactor auth logic #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
omfj merged 1 commit into from
Dec 11, 2024
Merged

Refactor auth logic #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions apps/www/src/lib/components/app/header/Header.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@
import { onNavigate } from '$app/navigation';
import logo from '$lib/assets/programmerbar-modern.svg';
import { cn } from '$lib/cn';
import { getAuthContext } from '$lib/context/user.context';
import HeaderItem from './HeaderItem.svelte';
import HeaderSignOut from './HeaderSignOut.svelte';
import MenuItem from './MenuItem.svelte';
import ProgressBar from './ProgressBar.svelte';
import { Menu, X } from 'lucide-svelte';
import MenuSignOut from './MenuSignOut.svelte';
import { getUser } from '$lib/context/user.context';

let isOpen = $state(false);
let auth = getAuthContext();
let user = getUser();

onNavigate(() => {
isOpen = false;
Expand Down Expand Up @@ -55,7 +55,7 @@
<HeaderItem to="/meny" name="/meny" />
<HeaderItem to="https://forms.gle/BLdygdoRJgjMbQZj6" name="/booking" />
<HeaderItem to="/om-oss" name="/om oss" />
{#if auth.user}
{#if !!$user}
<HeaderSignOut />
{/if}
</ul>
Expand All @@ -75,7 +75,7 @@
<MenuItem to="/meny" name="/meny" />
<MenuItem to="https://forms.gle/BLdygdoRJgjMbQZj6" name="/booking" />
<MenuItem to="/om-oss" name="/om oss" />
{#if auth.user}
{#if !!$user}
<MenuSignOut />
{:else}
<MenuItem to="/logg-inn" name="/logg inn" />
Expand Down
8 changes: 4 additions & 4 deletions apps/www/src/lib/components/footer/Footer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
<script lang="ts">
import lervigLogo from '$lib/assets/lervig-logo-black.png';
import { getAuthContext } from '$lib/context/user.context';
import { getUser } from '$lib/context/user.context';
import CornerLink from './CornerLink.svelte';

let auth = getAuthContext();
let user = getUser();
</script>

<div class="relative mt-24 border-t-2 border-primary-dark bg-primary-light">
<div class="absolute bottom-0 left-0 flex items-center gap-2 px-2 py-1 text-xs text-gray-700">
<CornerLink href="https://programmerbar.sanity.studio" isExternal>Sanity</CornerLink>
<CornerLink href="https://github.com/programmerbar/mono" isExternal>GitHub</CornerLink>
<CornerLink href="/beer-pong">Beer Pong</CornerLink>
<CornerLink when={!!auth.user} href="/portal">Portal</CornerLink>
<CornerLink when={!auth.user} href="/logg-inn">Logg inn</CornerLink>
<CornerLink when={!!$user} href="/portal">Portal</CornerLink>
<CornerLink when={!$user} href="/logg-inn">Logg inn</CornerLink>
</div>

<footer
Expand Down
6 changes: 3 additions & 3 deletions apps/www/src/lib/components/portal/Header.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<script lang="ts">
import logo from '$lib/assets/programmerbar-modern.svg';
import { getAuthContext } from '$lib/context/user.context';
import { getUser } from '$lib/context/user.context';

let auth = getAuthContext();
let user = getUser();
</script>

<div class="sticky top-0 z-10 border-b bg-background p-4">
Expand Down Expand Up @@ -37,7 +37,7 @@
>
</li>

{#if auth.user?.role === 'board'}
{#if $user?.role === 'board'}
<li>
<a class="px-1 text-gray-500 transition hover:text-gray-900" href="/portal/admin"
>Admin</a
Expand Down
29 changes: 19 additions & 10 deletions apps/www/src/lib/context/user.context.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,25 @@
import type { User } from 'lucia';
import { getContext, setContext } from 'svelte';
import { get, type Writable } from 'svelte/store';

export const AUTH_KEY = 'user';
export type UserContext = Writable<User | null>;

export type AuthContext = {
user: User | null;
};
const AUTH_CONTEXT_KEY = '__auth';

export const setAuthContext = (ctx: AuthContext) => {
setContext(AUTH_KEY, ctx);
};
export function setUserContext(value: UserContext) {
return setContext<UserContext>(AUTH_CONTEXT_KEY, value);
}

export const getAuthContext = () => {
return getContext<AuthContext>(AUTH_KEY);
};
export function getUser() {
return getContext<UserContext>(AUTH_CONTEXT_KEY);
}

export function getAuthenticatedUser() {
const userStore = getUser();

if (!get(userStore)) {
throw new Error('User context not found');
}

return userStore as Writable<User>;
}
11 changes: 6 additions & 5 deletions apps/www/src/routes/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
<script lang="ts">
import { setAuthContext } from '$lib/context/user.context';
import { setUserContext } from '$lib/context/user.context';
import { Toaster } from 'svelte-sonner';
import '../tailwind.css';
import { writable } from 'svelte/store';

const { data, children } = $props();

setAuthContext({
get user() {
return data.user;
}
const user = writable(data.user);
$effect.pre(() => {
user.set(data.user);
});
setUserContext(user);
</script>

<Toaster />
Expand Down
6 changes: 3 additions & 3 deletions apps/www/src/routes/portal/arrangementer/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
<script lang="ts">
import EventPreview from '$lib/components/portal/EventPreview.svelte';
import Heading from '$lib/components/ui/Heading.svelte';
import { getAuthContext } from '$lib/context/user.context.js';
import { getUser } from '$lib/context/user.context.js';

let { data } = $props();

let auth = getAuthContext();
let user = getUser();
</script>

<svelte:head>
<title>Arrangementer</title>
</svelte:head>

<Heading>Arrangementer</Heading>
{#if auth.user?.role == 'board'}
{#if $user?.role == 'board'}
<p class="mt-4">
<a href="/portal/arrangementer/ny" class="text-blue-500 hover:underline">Nytt arrangement</a>
</p>
Expand Down
6 changes: 3 additions & 3 deletions apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@
import { formatDate, time } from '$lib/date';
import { capitalize } from '$lib/utils';
import { enhance } from '$app/forms';
import { getAuthContext } from '$lib/context/user.context.js';
import { getUser } from '$lib/context/user.context.js';

let { data } = $props();

const auth = getAuthContext();
let user = getUser();
</script>

<svelte:head>
Expand All @@ -22,7 +22,7 @@

<ul class="mt-2 flex flex-col gap-4">
{#each data.event.shifts as shift}
{@const isInShift = shift.members.some((member) => member.userId === auth.user?.id)}
{@const isInShift = shift.members.some((member) => member.userId === $user?.id)}
<li class="block rounded-lg border bg-white p-4">
<p>{capitalize(formatDate(shift.start))}</p>
<p>{time(shift.start)} - {time(shift.end)}</p>
Expand Down
Loading