Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Alexander:svelte5
Branches Tags
Alexander:master Alexander:better-auth-flow Alexander:svelte5 Alexander:feature-cospend
..
compare: Alexander:better-auth-flow
Branches Tags
Alexander:master Alexander:better-auth-flow Alexander:svelte5 Alexander:feature-cospend

4 Commits
svelte5 ... better-aut

Author SHA1 Message Date
Alexander Bocken
eadb567069 Fix blank white pages by adding Nord theme styling to auth endpoints
Some checks failed
CI / update (push) Has been cancelled
Details 
- Add Nord theme CSS variables to login and logout pages
- Use --nord1 background and --nord4 text colors to match site theme
- Eliminates jarring white flash during authentication flow
- Maintains professional appearance and brand consistency
- Endpoints now blend seamlessly with site's dark theme

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-08-31 22:06:37 +02:00
Alexander Bocken
7d6226d79a Implement proper page redirects for protected routes 
- Update hooks.server.ts to preserve original URL when redirecting to login
- Use callbackUrl parameter to maintain user's intended destination
- Preserve both pathname and search parameters in redirect flow
- Leverage OIDC standard callback URL support built into Auth.js
- Users now land exactly where they intended after authentication
- Works for /rezepte/add, /rezepte/edit/[name], and any future protected routes

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-08-31 22:04:27 +02:00
Alexander Bocken
28367293e8 Remove ugly spinner pages from auth flow 
- Replace loading spinners and styling with minimal HTML pages
- Auth flow now happens almost instantly without visible intermediary screens
- Reduced bundle size for login/logout endpoints (0.59kB and 0.58kB)
- Maintains seamless user experience while preserving Auth.js integration
- Users stay on current page context during auth transitions

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-08-31 22:02:19 +02:00
Alexander Bocken
9b77640977 Implement better auth flow with direct Authentik redirects 
- Create custom /login and /logout endpoints that bypass Auth.js default pages
- Use auto-submitting forms to POST to Auth.js with proper form data
- Update UserHeader links to use new custom endpoints (/login, /logout)
- Remove old login/logout page server files that are no longer needed
- Login flow: /login → auto-submit form → /auth/signin/authentik → Authentik
- Logout flow: /logout → auto-submit form → /auth/signout → Authentik logout
- Provides seamless user experience with loading spinners during redirects
- Maintains all Auth.js security features and session management
- Eliminates intermediate Auth.js pages for cleaner auth flow

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-08-31 21:58:55 +02:00
6 changed files with 93 additions and 9 deletions
Expand all files Collapse all files

4
src/hooks.server.ts
View File

@@ -12,7 +12,9 @@ async function authorization({ event, resolve }) {
if (event.url.pathname.startsWith('/rezepte/edit') || event.url.pathname.startsWith('/rezepte/add')) { if (event.url.pathname.startsWith('/rezepte/edit') || event.url.pathname.startsWith('/rezepte/add')) {
const session = await event.locals.auth(); const session = await event.locals.auth();
if (!session) { if (!session) {
redirect(303, '/auth/signin'); // Preserve the original URL the user was trying to access
const callbackUrl = encodeURIComponent(event.url.pathname + event.url.search);
redirect(303, `/login?callbackUrl=${callbackUrl}`);
} }
else if (! session.user.groups.includes('rezepte_users')) { else if (! session.user.groups.includes('rezepte_users')) {
// strip last dir from url // strip last dir from url

4
src/lib/components/UserHeader.svelte
View File

@@ -139,10 +139,10 @@ h2 + p{
<p>({user.nickname})</p> <p>({user.nickname})</p>
<ul> <ul>
<li><a href="https://sso.bocken.org/if/user/#/settings" >Einstellungen</a></li> <li><a href="https://sso.bocken.org/if/user/#/settings" >Einstellungen</a></li>
<li><a href="/auth/signout" >Log Out</a></li> <li><a href="/logout" >Log Out</a></li>
</ul> </ul>
</div> </div>
</button> </button>
{:else} {:else}
<a class=entry href=/auth/signin>Log In</a> <a class=entry href=/login>Log In</a>
{/if} {/if}

3
src/routes/(main)/login/+page.server.ts
View File

@@ -1,3 +0,0 @@
import { signIn } from "../../../auth"
import type { Actions } from "./$types"
export const actions: Actions = { default: signIn }

3
src/routes/(main)/logout/+page.server.ts
View File

@@ -1,3 +0,0 @@
import { signIn } from "../../../auth"
import type { Actions } from "./$types"
export const actions: Actions = { default: signIn }

44
src/routes/login/+server.ts Normal file
View File

@@ -0,0 +1,44 @@
import type { RequestHandler } from './$types';
export const GET: RequestHandler = async ({ url }) => {
const callbackUrl = url.searchParams.get('callbackUrl') || '/';
// Create a minimal page with site styling that immediately triggers auth
const html = `
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<style>
:root{
--nord0: #2E3440;
--nord1: #3B4252;
--nord4: #D8DEE9;
}
body {
background-color: var(--nord1);
color: var(--nord4);
font-family: sans-serif;
margin: 0;
padding: 0;
min-height: 100vh;
}
</style>
</head>
<body>
<form id="signin-form" method="POST" action="/auth/signin/authentik">
<input type="hidden" name="callbackUrl" value="${callbackUrl}" />
</form>
<script>
// Immediately submit the form to trigger auth flow
document.getElementById('signin-form').submit();
</script>
</body>
</html>`;
return new Response(html, {
headers: {
'Content-Type': 'text/html'
}
});
};

44
src/routes/logout/+server.ts Normal file
View File

@@ -0,0 +1,44 @@
import type { RequestHandler } from './$types';
export const GET: RequestHandler = async ({ url }) => {
const callbackUrl = url.searchParams.get('callbackUrl') || '/';
// Create a minimal page with site styling that immediately triggers logout
const html = `
<!DOCTYPE html>
<html>
<head>
<title>Logout</title>
<style>
:root{
--nord0: #2E3440;
--nord1: #3B4252;
--nord4: #D8DEE9;
}
body {
background-color: var(--nord1);
color: var(--nord4);
font-family: sans-serif;
margin: 0;
padding: 0;
min-height: 100vh;
}
</style>
</head>
<body>
<form id="signout-form" method="POST" action="/auth/signout">
<input type="hidden" name="callbackUrl" value="${callbackUrl}" />
</form>
<script>
// Immediately submit the form to trigger logout flow
document.getElementById('signout-form').submit();
</script>
</body>
</html>`;
return new Response(html, {
headers: {
'Content-Type': 'text/html'
}
});
};