#1 add basic authorization

view/package.json

@@ -22,6 +22,7 @@
 		"eslint": "^9.0.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.36.0",
+		"firebaseui": "^6.1.0",
 		"globals": "^15.0.0",
 		"postcss": "^8.4.40",
 		"prettier": "^3.1.1",

view/src/routes/+layout.svelte

@@ -1,6 +1,39 @@
 <script lang="ts">
 	import '../app.css';
+	import { onMount } from 'svelte';
+	import type { Auth } from 'firebase/auth';
+
+	var auth: Auth;
+
+	onMount(async () => {
+		const firebaseApp = await import('firebase/app');
+		const firebaseAuth = await import('firebase/auth');
+		const firebaseUi = await import('firebaseui');
+		const app = firebaseApp.initializeApp({
+			apiKey: 'AIzaSyCrJBW3c3Wut8DqjyVJoFAEyJ9Had__q-Q',
+			authDomain: 'me-fit-a9365.firebaseapp.com',
+			projectId: 'me-fit-a9365',
+			storageBucket: 'me-fit-a9365.appspot.com',
+			messagingSenderId: '631045688520',
+			appId: '1:631045688520:web:c7e0534927b52b0db629fd'
+		});
+
+		auth = firebaseAuth.getAuth(app);
+
+		var ui = new firebaseUi.auth.AuthUI(auth);
+		ui.start('#firebaseui-auth-container', {
+			signInOptions: [
+				{ provider: firebaseAuth.EmailAuthProvider.PROVIDER_ID, requireDisplayName: false }
+			]
+
+			// Other config options...
+		});
+	});
 </script>
 
 <p class="text-9xl text-red-950">Tailwind working</p>
+
+<div id="firebaseui-auth-container"></div>
+<button on:click={async () => console.log(await auth.currentUser?.getIdToken())}>Click me</button>
+
 <slot></slot>