#1 adding auth

This commit is contained in:
Tim
2024-07-26 21:00:35 +02:00
parent ffd8b413a9
commit 15dab753f4
2 changed files with 36 additions and 15 deletions

View File

@@ -2,13 +2,18 @@
import '../app.css'; import '../app.css';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import type { Auth } from 'firebase/auth'; import type { Auth } from 'firebase/auth';
import {
getAuth,
signInWithPopup,
signInWithEmailAndPassword,
EmailAuthProvider
} from 'firebase/auth';
var auth: Auth; var auth: Auth | null = null;
onMount(async () => { onMount(async () => {
const firebaseApp = await import('firebase/app'); const firebaseApp = await import('firebase/app');
const firebaseAuth = await import('firebase/auth');
const firebaseUi = await import('firebaseui');
const app = firebaseApp.initializeApp({ const app = firebaseApp.initializeApp({
apiKey: 'AIzaSyCrJBW3c3Wut8DqjyVJoFAEyJ9Had__q-Q', apiKey: 'AIzaSyCrJBW3c3Wut8DqjyVJoFAEyJ9Had__q-Q',
authDomain: 'me-fit-a9365.firebaseapp.com', authDomain: 'me-fit-a9365.firebaseapp.com',
@@ -18,22 +23,37 @@
appId: '1:631045688520:web:c7e0534927b52b0db629fd' appId: '1:631045688520:web:c7e0534927b52b0db629fd'
}); });
auth = firebaseAuth.getAuth(app); auth = 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...
});
}); });
const signIn = async () => {
try {
const provider = new EmailAuthProvider();
const result = await signInWithEmailAndPassword(auth as Auth, google);
console.log(result);
} catch (error) {
console.error(error);
}
};
const signOut = async () => {
try {
await (auth as Auth).signOut();
console.log('Signed out');
} catch (error) {
console.error(error);
}
};
$: user = (auth as any as Auth)?.currentUser;
</script> </script>
<p class="text-9xl text-red-950">Tailwind working</p> <p class="text-9xl text-red-950">Tailwind working</p>
<div id="firebaseui-auth-container"></div> <button on:click={async () => signIn()}>Login</button>
<button on:click={async () => console.log(await auth.currentUser?.getIdToken())}>Click me</button> <button on:click={async () => signOut()}>Logout</button>
<!-- <button on:click={async () => console.log(await (auth as Auth).currentUser?.getIdToken())}>Click me</button> -->
<p>{user?.email}</p>
<slot></slot> <slot></slot>

View File

@@ -0,0 +1 @@
<h2>Login</h2>