Skip to content

Commit a5264ba

Browse files
codercatdevcodercatdev
committed
update login types
1 parent 3245c4e commit a5264ba

6 files changed

Lines changed: 103 additions & 21 deletions

File tree

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

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
import { initializeApp, getApps } from 'firebase/app';
1+
import { toastStore } from '@codingcatdev/blackcatui';
2+
3+
4+
import { initializeApp, getApps, FirebaseError } from 'firebase/app';
25
import { getAuth, setPersistence, browserSessionPersistence, signInWithEmailAndPassword, signInWithPopup, type AuthProvider, GoogleAuthProvider } from 'firebase/auth';
36

47
import {
@@ -41,10 +44,26 @@ export const ccdSignInWithEmailAndPassword = async ({ email, password }: { email
4144
}
4245

4346
export const ccdSignInWithPopUp = async (provider: AuthProvider) => {
44-
const result = await signInWithPopup(auth, provider)
45-
const idToken = await result.user.getIdToken()
47+
try {
48+
const result = await signInWithPopup(auth, provider)
49+
const idToken = await result.user.getIdToken()
4650

47-
if (!idToken)
48-
throw 'Missing id Token'
49-
setCookie(idToken);
51+
if (!idToken)
52+
throw 'Missing id Token'
53+
setCookie(idToken);
54+
} catch (err) {
55+
if (err instanceof FirebaseError) {
56+
if (err.code === 'auth/account-exists-with-different-credential') {
57+
toastStore.trigger({
58+
message: 'Account Exists with Different Login Method. Please first login and then link within your Account page.',
59+
background: 'variant-filled-warning',
60+
})
61+
} else {
62+
toastStore.trigger({
63+
message: err.message,
64+
background: 'variant-filled-error'
65+
})
66+
}
67+
}
68+
}
5069
}

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -100,16 +100,20 @@
100100
{/if}
101101
</button>
102102
<!-- popup -->
103-
<div class="bcu-card p-4 w-60 shadow-xl" data-popup="theme">
104-
<div class="space-y-4">
103+
<div class="bcu-card flex flex-col gap-4 p-4 w-60 shadow-xl" data-popup="theme">
104+
<div class="space-y-4 mb-2">
105105
<section class="flex justify-between items-center">
106106
<h6>Mode</h6>
107107
<LightSwitch />
108108
</section>
109109
</div>
110-
<div class="flex flex-col gap-2">
110+
<hr />
111+
<div class="flex flex-col gap-2 mt-2">
111112
<div class="text-sm text-ellipsis">{$storeUser?.email}</div>
112-
<LogoutButton />
113+
<div class="flex gap-2">
114+
<a class="bcu-button variant-ringed-primary" href="/account">Account</a>
115+
<LogoutButton />
116+
</div>
113117
</div>
114118
</div>
115119
{:else}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@
99
import { toastStore } from '@codingcatdev/blackcatui';
1010
1111
import GoogleAuth from './GoogleAuth.svelte';
12+
import TwitterAuth from './TwitterAuth.svelte';
13+
import GitHubAuth from './GitHubAuth.svelte';
1214
1315
export let form: ActionData;
1416
</script>
@@ -70,5 +72,7 @@
7072
<hr />
7173

7274
<GoogleAuth />
75+
<TwitterAuth />
76+
<GitHubAuth />
7377
</section>
7478
</LayoutWrapper>

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<script lang="ts">
2+
import { Icon } from '@steeze-ui/svelte-icon';
3+
import { Github } from '@steeze-ui/simple-icons';
4+
5+
//Firebase
6+
import { ccdSignInWithPopUp } from '$lib/client/firebase';
7+
import { GithubAuthProvider } from 'firebase/auth';
8+
const provider = new GithubAuthProvider();
9+
10+
// Display
11+
import { enhance } from '$app/forms';
12+
</script>
13+
14+
<form
15+
class="flex justify-center w-full"
16+
method="POST"
17+
action="?/login"
18+
use:enhance={async ({ action, cancel, controller, data, form }) => {
19+
await ccdSignInWithPopUp(provider);
20+
21+
return async ({ result, update }) => {
22+
// `result` is an `ActionResult` object
23+
// `update` is a function which triggers the logic that would be triggered if this callback wasn't set
24+
25+
update();
26+
};
27+
}}
28+
>
29+
<button class="bcu-button flex gap-2 variant-ringed-primary w-full" type="submit">
30+
<Icon src={Github} class="w-4" />
31+
<div class="text-lg">GitHub</div>
32+
</button>
33+
</form>

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

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,24 +9,14 @@
99
1010
// Display
1111
import { enhance } from '$app/forms';
12-
import { toastStore } from '@codingcatdev/blackcatui';
1312
</script>
1413

1514
<form
1615
class="flex justify-center w-full"
1716
method="POST"
1817
action="?/login"
1918
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-
}
19+
await ccdSignInWithPopUp(provider);
3020

3121
return async ({ result, update }) => {
3222
// `result` is an `ActionResult` object

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<script lang="ts">
2+
import { Icon } from '@steeze-ui/svelte-icon';
3+
import { Twitter } from '@steeze-ui/simple-icons';
4+
5+
//Firebase
6+
import { ccdSignInWithPopUp } from '$lib/client/firebase';
7+
import { TwitterAuthProvider } from 'firebase/auth';
8+
const provider = new TwitterAuthProvider();
9+
10+
// Display
11+
import { enhance } from '$app/forms';
12+
</script>
13+
14+
<form
15+
class="flex justify-center w-full"
16+
method="POST"
17+
action="?/login"
18+
use:enhance={async ({ action, cancel, controller, data, form }) => {
19+
await ccdSignInWithPopUp(provider);
20+
return async ({ result, update }) => {
21+
// `result` is an `ActionResult` object
22+
// `update` is a function which triggers the logic that would be triggered if this callback wasn't set
23+
24+
update();
25+
};
26+
}}
27+
>
28+
<button class="bcu-button flex gap-2 variant-ringed-primary w-full" type="submit">
29+
<Icon src={Twitter} class="w-4" />
30+
<div class="text-lg">Twitter</div>
31+
</button>
32+
</form>

0 commit comments

Comments
 (0)