x/web-app-template
Archived
Template
2
0
Fork 0
Code Issues 13 Pull Requests 4 Actions Packages Activity

#1 finalize auth

Browse Source
This commit is contained in:
Tim
2024-07-26 23:11:22 +02:00
parent 15dab753f4
commit f15f085462
4 changed files with 107 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
view/src/lib/firebase.ts Normal file
View File

@@ -0,0 +1,16 @@
import { getAuth } from 'firebase/auth';
import { initializeApp } from 'firebase/app';
const app = 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'
});
const auth = getAuth(app);
export { auth };

61
view/src/routes/+layout.svelte
View File

@@ -1,59 +1,44 @@
<script lang="ts"> <script lang="ts">
import '../app.css'; import '../app.css';
import { onMount } from 'svelte'; import { onDestroy, onMount } from 'svelte';
import type { Auth } from 'firebase/auth'; import type { Auth, User } from 'firebase/auth';
import {
getAuth,
signInWithPopup,
signInWithEmailAndPassword,
EmailAuthProvider
} from 'firebase/auth';
var auth: Auth | null = null; var auth: Auth | null = null;
var user: User | null = null;
var unsub: (() => void) | null = null;
onMount(async () => { onMount(async (): Promise<any> => {
const firebaseApp = await import('firebase/app'); const { auth: _auth } = await import('../lib/firebase');
auth = _auth;
const app = firebaseApp.initializeApp({ user = auth.currentUser;
apiKey: 'AIzaSyCrJBW3c3Wut8DqjyVJoFAEyJ9Had__q-Q', unsub = auth.onAuthStateChanged((newUser) => {
authDomain: 'me-fit-a9365.firebaseapp.com', user = newUser;
projectId: 'me-fit-a9365',
storageBucket: 'me-fit-a9365.appspot.com',
messagingSenderId: '631045688520',
appId: '1:631045688520:web:c7e0534927b52b0db629fd'
}); });
auth = getAuth(app);
}); });
const signIn = async () => { onDestroy(() => {
try { if (unsub) {
const provider = new EmailAuthProvider(); unsub();
const result = await signInWithEmailAndPassword(auth as Auth, google);
console.log(result);
} catch (error) {
console.error(error);
} }
}; });
const signOut = async () => { const signOut = async () => {
try { try {
await (auth as Auth).signOut(); await (auth as Auth).signOut();
console.log('Signed out');
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} }
}; };
$: user = (auth as any as Auth)?.currentUser;
</script> </script>
<p class="text-9xl text-red-950">Tailwind working</p> <div class="flex justify-end items-center min-h-10 gap-10 py-1 px-10 border-b border-accent">
<a href="/" class="flex-1">ME-FIT</a>
<button on:click={async () => signIn()}>Login</button> {#if user}
<button on:click={async () => signOut()}>Logout</button> <p>{user?.email}</p>
<!-- <button on:click={async () => console.log(await (auth as Auth).currentUser?.getIdToken())}>Click me</button> --> <button class="btn" on:click={async () => signOut()}>Logout</button>
{:else}
<p>{user?.email}</p> <a href="/login" class="btn">Login</a>
{/if}
</div>
<slot></slot> <slot></slot>

5
view/src/routes/+page.svelte
View File

@@ -1,2 +1,3 @@
<h1>Welcome to SvelteKit</h1> <div class="flex h-svh justify-center items-center">
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p> <h1 class="text-9xl text-primary-content">Welcome to ME-FIT</h1>
</div>

66
view/src/routes/login/+page.svelte
View File

@@ -1 +1,65 @@
<h2>Login</h2> <script lang="ts">
import { goto } from '$app/navigation';
import { signInWithEmailAndPassword } from 'firebase/auth';
var errorStr: string | null = null;
const signIn = async (event: SubmitEvent) => {
errorStr = null;
const { auth } = await import('$lib/firebase');
try {
const data = new FormData(event.target as HTMLFormElement);
await signInWithEmailAndPassword(
auth,
data.get('email') as string,
data.get('password') as string
);
goto('/');
} catch (error: any) {
errorStr = error.code ? error.code : error.message;
}
};
</script>
<form class="max-w-xl mx-auto flex flex-col gap-4" on:submit|preventDefault={signIn}>
<h2 class="text-6xl mb-10">Login</h2>
<label class="input input-bordered flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="h-4 w-4 opacity-70"
>
<path
d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z"
/>
<path
d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z"
/>
</svg>
<input type="text" class="grow" placeholder="Email" name="email" />
</label>
<label class="input input-bordered flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="h-4 w-4 opacity-70"
>
<path
fill-rule="evenodd"
d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
clip-rule="evenodd"
/>
</svg>
<input type="password" class="grow" placeholder="Password" name="password" />
</label>
<button class="btn btn-primary self-end">Login</button>
{#if errorStr}
<p class="text-red-500">{errorStr}</p>
{/if}
</form>