Skip to content

Commit 3245c4e

Browse files
codercatdevcodercatdev
committed
include google auth
1 parent 52e745c commit 3245c4e

4 files changed

Lines changed: 98 additions & 54 deletions

File tree

‎apps/codingcatdev/src/lib/client/firebase.ts‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { initializeApp, getApps } from 'firebase/app';
2-
import { getAuth, setPersistence, browserSessionPersistence, signInWithEmailAndPassword, signInWithPopup, type AuthProvider } from 'firebase/auth';
2+
import { getAuth, setPersistence, browserSessionPersistence, signInWithEmailAndPassword, signInWithPopup, type AuthProvider, GoogleAuthProvider } from 'firebase/auth';
33

44
import {
55
PUBLIC_FB_API_KEY,
@@ -30,13 +30,21 @@ export const auth = getAuth(app);
3030
setPersistence(auth, browserSessionPersistence);
3131

3232
/* AUTH */
33+
const setCookie = (idToken: string) => {
34+
document.cookie = '__ccdlogin=' + idToken + ';max-age=3600';
35+
}
3336

3437
export const ccdSignInWithEmailAndPassword = async ({ email, password }: { email: string, password: string }) => {
3538
const userResponse = await signInWithEmailAndPassword(auth, email, password);
3639
const idToken = await userResponse.user.getIdToken();
37-
document.cookie = '__ccdlogin=' + idToken + ';max-age=3600';
40+
setCookie(idToken);
3841
}
3942

4043
export const ccdSignInWithPopUp = async (provider: AuthProvider) => {
41-
signInWithPopup(auth, provider)
44+
const result = await signInWithPopup(auth, provider)
45+
const idToken = await result.user.getIdToken()
46+
47+
if (!idToken)
48+
throw 'Missing id Token'
49+
setCookie(idToken);
4250
}

‎apps/codingcatdev/src/routes/(layout-partials)/CcdAppBar.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@
9090
use:popup={{ event: 'click', target: 'theme' }}
9191
>
9292
{#if $storeUser?.picture}
93-
<Avatar class="bcu-avatar-xs w-8 h-4" src={$storeUser.picture} alt="User Photo" />
93+
<Avatar class="bcu-avatar-xs w-8 h-8" src={$storeUser.picture} alt="User Photo" />
9494
{:else}
9595
<Avatar class="bcu-avatar-xs w-8 h-8">
9696
<svelte:fragment slot="bcu-avatar-message">

‎apps/codingcatdev/src/routes/login/+page.svelte‎

Lines changed: 51 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -14,56 +14,61 @@
1414
</script>
1515

1616
<LayoutWrapper>
17-
<form
18-
class="flex justify-center w-full"
19-
method="POST"
20-
action="?/login"
21-
use:enhance={async ({ action, cancel, controller, data, form }) => {
22-
// `form` is the `<form>` element
23-
// `data` is its `FormData` object
24-
// `action` is the URL to which the form is posted
25-
// `cancel()` will prevent the submission
17+
<section class="bcu-card flex flex-col gap-4 p-4">
18+
<form
19+
class="flex justify-center w-full"
20+
method="POST"
21+
action="?/login"
22+
use:enhance={async ({ action, cancel, controller, data, form }) => {
23+
// `form` is the `<form>` element
24+
// `data` is its `FormData` object
25+
// `action` is the URL to which the form is posted
26+
// `cancel()` will prevent the submission
2627

27-
const email = `${data.get('email')}`;
28-
const password = `${data.get('password')}`;
28+
const email = `${data.get('email')}`;
29+
const password = `${data.get('password')}`;
2930

30-
if (!email || !password) {
31-
toastStore.trigger({
32-
message: 'Please Provide Username and Password.'
33-
});
34-
cancel();
35-
} else {
36-
try {
37-
await ccdSignInWithEmailAndPassword({ email, password });
38-
} catch (err) {
39-
if (err instanceof Error) {
40-
toastStore.trigger({
41-
message: err.message,
42-
background: 'variant-filled-error'
43-
});
31+
if (!email || !password) {
32+
toastStore.trigger({
33+
message: 'Please Provide Username and Password.'
34+
});
35+
cancel();
36+
} else {
37+
try {
38+
await ccdSignInWithEmailAndPassword({ email, password });
39+
} catch (err) {
40+
if (err instanceof Error) {
41+
toastStore.trigger({
42+
message: err.message,
43+
background: 'variant-filled-error'
44+
});
45+
}
4446
}
4547
}
46-
}
4748

48-
return async ({ result, update }) => {
49-
// `result` is an `ActionResult` object
50-
// `update` is a function which triggers the logic that would be triggered if this callback wasn't set
49+
return async ({ result, update }) => {
50+
// `result` is an `ActionResult` object
51+
// `update` is a function which triggers the logic that would be triggered if this callback wasn't set
5152

52-
update();
53-
};
54-
}}
55-
>
56-
<div class="flex flex-col gap-4 p-4 bcu-card text-token">
57-
<label class="label">
58-
<span>Email</span>
59-
<input class="input" name="email" type="email" placeholder="codercatdev" />
60-
</label>
61-
<label class="label">
62-
<span>Password</span>
63-
<input class="input" name="password" type="password" placeholder="****" />
64-
</label>
65-
<button class="bcu-button variant-filled-primary" type="submit">Login</button>
66-
<GoogleAuth />
67-
</div>
68-
</form>
53+
update();
54+
};
55+
}}
56+
>
57+
<div class="flex flex-col gap-4 text-token">
58+
<label class="label">
59+
<span>Email</span>
60+
<input class="input" name="email" type="email" placeholder="codercatdev" />
61+
</label>
62+
<label class="label">
63+
<span>Password</span>
64+
<input class="input" name="password" type="password" placeholder="****" />
65+
</label>
66+
<button class="bcu-button variant-filled-primary" type="submit">Login</button>
67+
</div>
68+
</form>
69+
70+
<hr />
71+
72+
<GoogleAuth />
73+
</section>
6974
</LayoutWrapper>

‎apps/codingcatdev/src/routes/login/GoogleAuth.svelte‎

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,42 @@
22
import { Icon } from '@steeze-ui/svelte-icon';
33
import { Google } from '@steeze-ui/simple-icons';
44
5+
//Firebase
6+
import { ccdSignInWithPopUp } from '$lib/client/firebase';
57
import { GoogleAuthProvider } from 'firebase/auth';
68
const provider = new GoogleAuthProvider();
9+
10+
// Display
11+
import { enhance } from '$app/forms';
12+
import { toastStore } from '@codingcatdev/blackcatui';
713
</script>
814

9-
<button class="bcu-button flex gap-2 variant-ringed-primary" type="button">
10-
<Icon src={Google} class="w-4" />
11-
<div class="text-lg">Google</div>
12-
</button>
15+
<form
16+
class="flex justify-center w-full"
17+
method="POST"
18+
action="?/login"
19+
use:enhance={async ({ action, cancel, controller, data, form }) => {
20+
try {
21+
await ccdSignInWithPopUp(provider);
22+
} catch (err) {
23+
if (err instanceof Error) {
24+
toastStore.trigger({
25+
message: err.message,
26+
background: 'variant-filled-error'
27+
});
28+
}
29+
}
30+
31+
return async ({ result, update }) => {
32+
// `result` is an `ActionResult` object
33+
// `update` is a function which triggers the logic that would be triggered if this callback wasn't set
34+
35+
update();
36+
};
37+
}}
38+
>
39+
<button class="bcu-button flex gap-2 variant-ringed-primary w-full" type="submit">
40+
<Icon src={Google} class="w-4" />
41+
<div class="text-lg">Google</div>
42+
</button>
43+
</form>

0 commit comments

Comments
 (0)