mark/muzak
2
0
Fork 0
Code Issues Pull Requests Activity

Authentication?

Browse Source 
Voor een gegeven definitie van...
This commit is contained in:
Mark Hoekveen
2025-06-25 16:38:22 +02:00
parent e7ca11d1bc
commit bfa1c7879b
7 changed files with 128 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/package-lock.json
Generated
+37 -1
View File
@@ -6,8 +6,10 @@
"": { "": {
"dependencies": { "dependencies": {
"next": "^15.3.3", "next": "^15.3.3",
"oidc-client-ts": "^3.3.0",
"react": "^19.1.0", "react": "^19.1.0",
"react-dom": "^19.1.0" "react-dom": "^19.1.0",
"react-oidc-context": "^3.3.0"
}, },
"devDependencies": { "devDependencies": {
"@tailwindcss/postcss": "^4.1.10", "@tailwindcss/postcss": "^4.1.10",
@@ -1109,6 +1111,15 @@
"jiti": "lib/jiti-cli.mjs" "jiti": "lib/jiti-cli.mjs"
} }
}, },
"node_modules/jwt-decode": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
"integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
"license": "MIT",
"engines": {
"node": ">=18"
}
},
"node_modules/lightningcss": { "node_modules/lightningcss": {
"version": "1.30.1", "version": "1.30.1",
"resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz", "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
@@ -1497,6 +1508,18 @@
"node": "^10 || ^12 || >=14" "node": "^10 || ^12 || >=14"
} }
}, },
"node_modules/oidc-client-ts": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/oidc-client-ts/-/oidc-client-ts-3.3.0.tgz",
"integrity": "sha512-t13S540ZwFOEZKLYHJwSfITugupW4uYLwuQSSXyKH/wHwZ+7FvgHE7gnNJh1YQIZ1Yd1hKSRjqeXGSUtS0r9JA==",
"license": "Apache-2.0",
"dependencies": {
"jwt-decode": "^4.0.0"
},
"engines": {
"node": ">=18"
}
},
"node_modules/picocolors": { "node_modules/picocolors": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -1553,6 +1576,19 @@
"react": "^19.1.0" "react": "^19.1.0"
} }
}, },
"node_modules/react-oidc-context": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/react-oidc-context/-/react-oidc-context-3.3.0.tgz",
"integrity": "sha512-302T/ma4AOVAxrHdYctDSKXjCq9KNHT564XEO2yOPxRfxEP58xa4nz+GQinNl8x7CnEXECSM5JEjQJk3Cr5BvA==",
"license": "MIT",
"engines": {
"node": ">=18"
},
"peerDependencies": {
"oidc-client-ts": "^3.1.0",
"react": ">=16.14.0"
}
},
"node_modules/scheduler": { "node_modules/scheduler": {
"version": "0.26.0", "version": "0.26.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
frontend/package.json
+3 -1
View File
@@ -1,8 +1,10 @@
{ {
"dependencies": { "dependencies": {
"next": "^15.3.3", "next": "^15.3.3",
"oidc-client-ts": "^3.3.0",
"react": "^19.1.0", "react": "^19.1.0",
"react-dom": "^19.1.0" "react-dom": "^19.1.0",
"react-oidc-context": "^3.3.0"
}, },
"scripts": { "scripts": {
"dev": "next dev", "dev": "next dev",
frontend/src/app/auth/callback/page.tsx
+16
View File
@@ -0,0 +1,16 @@
"use client";
import { useEffect } from "react";
import { userManager } from "muzak/config/auth";
import { useRouter } from "next/navigation";
export default function SignInCallback() {
const router = useRouter();
useEffect(() => {
userManager.signinCallback();
router.push("/");
}, []);
return <></>;
}
frontend/src/app/layout.tsx
+3 -1
View File
@@ -1,6 +1,8 @@
"use client"; "use client";
import "./style.css"; import "./style.css";
import { useState } from "react"; import { useState } from "react";
import { AuthProvider } from "react-oidc-context";
import { oidcConfig, userManager } from "muzak/config/auth";
export default function RootLayout({ export default function RootLayout({
children, children,
@@ -16,7 +18,7 @@ export default function RootLayout({
return ( return (
<html lang="en"> <html lang="en">
<body className={`bg-game-show ${isAnimate ? "animate" : ""} h-screen`}> <body className={`bg-game-show ${isAnimate ? "animate" : ""} h-screen`}>
{children} <AuthProvider {...oidcConfig}>{children}</AuthProvider>
<button <button
className={`absolute top-1 left-1 ${isAnimate ? "pause" : "play"}`} className={`absolute top-1 left-1 ${isAnimate ? "pause" : "play"}`}
onClick={toggleAnimation} onClick={toggleAnimation}
frontend/src/app/page.tsx
+35 -2
View File
@@ -1,9 +1,42 @@
"use client";
import Image from "next/image"; import Image from "next/image";
import { Log } from "oidc-client-ts";
import { useAuth } from "react-oidc-context";
Log.setLogger(console);
export default function Page() { export default function Page() {
const auth = useAuth();
switch (auth.activeNavigator) {
case "signinSilent":
return <div>Signing you in...</div>;
case "signoutRedirect":
return <div>Signing you out...</div>;
}
if (auth.isLoading) {
return <div>Loading...</div>;
}
return ( return (
<div className="flex items-center justify-center h-full"> <main
<Image src={"/meowl.png"} width="460" height="460" alt="Meowl image" /> className={`flex min-h-screen flex-col items-center justify-between p-24`}
>
{auth.error && <div>{auth.error.message}</div>}
{auth.isAuthenticated && (
<div>
<p>Hello {auth.user?.profile.name} </p>
</div> </div>
)}
{auth.isAuthenticated && (
<button onClick={() => void auth.removeUser()}>Log out</button>
)}
{!auth.isAuthenticated && (
<button onClick={() => void auth.signinRedirect()}>Log in</button>
)}
<Image src={"/meowl.png"} width="460" height="460" alt="Meowl image" />
</main>
); );
} }
frontend/src/config/auth.ts
+23
View File
@@ -0,0 +1,23 @@
import { UserManager } from "oidc-client-ts";
import { AuthProviderProps } from "react-oidc-context";
const ORIGIN_URI = globalThis?.window?.location.origin;
const REDIRECT_URI = `${ORIGIN_URI}/auth/callback`;
const userConfig: AuthProviderProps = {
authority: process.env.NEXT_PUBLIC_AUTHORITY!,
client_id: process.env.NEXT_PUBLIC_CLIENT_ID!,
client_secret: process.env.NEXT_PUBLIC_CLIENT_SECRET!,
redirect_uri: REDIRECT_URI,
response_type: "code",
includeIdTokenInSilentRenew: true,
automaticSilentRenew: false, //TODO: Dit moet dus denk ik wel gewoon aan?
scope: "openid profile email offline_access", //TODO: Iets met scopes.
accessTokenExpiringNotificationTimeInSeconds: 5 * 60,
loadUserInfo: true,
post_logout_redirect_uri: ORIGIN_URI,
response_mode: "query",
};
export const userManager = new UserManager(userConfig);
export const oidcConfig = { ...userConfig, userManager };
frontend/tsconfig.json
+11 -15
View File
@@ -1,12 +1,15 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "ES2017", "target": "ES2017",
"lib": [ "lib": ["dom", "dom.iterable", "esnext"],
"dom",
"dom.iterable", // Make local stuff available for non-relative import
"esnext" "baseUrl": "./",
], "paths": {
"allowJs": true, "muzak/config/*": ["./src/config/*"]
},
"allowJs": false,
"skipLibCheck": true, "skipLibCheck": true,
"strict": false, "strict": false,
"noEmit": true, "noEmit": true,
@@ -23,13 +26,6 @@
} }
] ]
}, },
"include": [ "include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx"],
"next-env.d.ts", "exclude": ["node_modules"]
".next/types/**/*.ts",
"**/*.ts",
"**/*.tsx"
],
"exclude": [
"node_modules"
]
} }