From d3a134891cd7f0e15d935c740bf1693eeee012e6 Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Sun, 22 Sep 2024 13:11:07 +0100
Subject: [PATCH] feat(#29): Replace external magic link component

---
 package.json                        |  2 -
 pnpm-lock.yaml                      | 38 ---------------
 src/lib/components/MagicLink.svelte | 73 ++++++++++++++++++++++++-----
 src/routes/+layout.svelte           |  2 +-
 src/routes/+page.svelte             |  2 +-
 src/routes/login/+page.svelte       |  2 +-
 6 files changed, 63 insertions(+), 56 deletions(-)

diff --git a/package.json b/package.json
index 879a1b2..51e89f3 100644
--- a/package.json
+++ b/package.json
@@ -47,8 +47,6 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@supabase/auth-ui-shared": "^0.1.8",
-		"@supabase/auth-ui-svelte": "^0.2.9",
 		"@supabase/ssr": "^0.4.0",
 		"@supabase/supabase-js": "^2.44.2",
 		"stripe": "^15.4.0"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3ccb8e5..93412db 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,12 +8,6 @@ importers:
 
   .:
     dependencies:
-      '@supabase/auth-ui-shared':
-        specifier: ^0.1.8
-        version: 0.1.8(@supabase/supabase-js@2.45.4)
-      '@supabase/auth-ui-svelte':
-        specifier: ^0.2.9
-        version: 0.2.9(@supabase/supabase-js@2.45.4)
       '@supabase/ssr':
         specifier: ^0.4.0
         version: 0.4.1(@supabase/supabase-js@2.45.4)
@@ -1079,22 +1073,9 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@stitches/core@1.2.8':
-    resolution: {integrity: sha512-Gfkvwk9o9kE9r9XNBmJRfV8zONvXThnm1tcuojL04Uy5uRyqg93DC83lDebl0rocZCfKSjUv+fWYtMQmEDJldg==}
-
   '@supabase/auth-js@2.65.0':
     resolution: {integrity: sha512-+wboHfZufAE2Y612OsKeVP4rVOeGZzzMLD/Ac3HrTQkkY4qXNjI6Af9gtmxwccE5nFvTiF114FEbIQ1hRq5uUw==}
 
-  '@supabase/auth-ui-shared@0.1.8':
-    resolution: {integrity: sha512-ouQ0DjKcEFg+0gZigFIEgu01V3e6riGZPzgVD0MJsCBNsMsiDT74+GgCEIElMUpTGkwSja3xLwdFRFgMNFKcjg==}
-    peerDependencies:
-      '@supabase/supabase-js': ^2.21.0
-
-  '@supabase/auth-ui-svelte@0.2.9':
-    resolution: {integrity: sha512-oc+SRS7ykc5FCssoqT0IiK5KF/obwnWko5ePaaMTDwUEQOavv+O8/poAh2lRTKRJCqJMqOOpMS/lUE6pHcma3g==}
-    peerDependencies:
-      '@supabase/supabase-js': ^2.21.0
-
   '@supabase/functions-js@2.4.1':
     resolution: {integrity: sha512-8sZ2ibwHlf+WkHDUZJUXqqmPvWQ3UHN0W30behOJngVh/qHHekhJLCFbh0AjkE9/FqqXtf9eoVvmYgfCLk5tNA==}
 
@@ -2984,10 +2965,6 @@ packages:
       typescript:
         optional: true
 
-  svelte@3.59.2:
-    resolution: {integrity: sha512-vzSyuGr3eEoAtT/A6bmajosJZIUWySzY2CzB3w2pgPvnkUjGqlDnsNnA0PMO+mMAhuyMul6C2uuZzY6ELSkzyA==}
-    engines: {node: '>= 8'}
-
   svelte@4.2.19:
     resolution: {integrity: sha512-IY1rnGr6izd10B0A8LqsBfmlT5OILVuZ7XsI0vdGPEvuonFV7NYEUK4dAkm9Zg2q0Um92kYjTpS1CAP3Nh/KWw==}
     engines: {node: '>=16'}
@@ -4422,23 +4399,10 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.21.3':
     optional: true
 
-  '@stitches/core@1.2.8': {}
-
   '@supabase/auth-js@2.65.0':
     dependencies:
       '@supabase/node-fetch': 2.6.15
 
-  '@supabase/auth-ui-shared@0.1.8(@supabase/supabase-js@2.45.4)':
-    dependencies:
-      '@supabase/supabase-js': 2.45.4
-
-  '@supabase/auth-ui-svelte@0.2.9(@supabase/supabase-js@2.45.4)':
-    dependencies:
-      '@stitches/core': 1.2.8
-      '@supabase/auth-ui-shared': 0.1.8(@supabase/supabase-js@2.45.4)
-      '@supabase/supabase-js': 2.45.4
-      svelte: 3.59.2
-
   '@supabase/functions-js@2.4.1':
     dependencies:
       '@supabase/node-fetch': 2.6.15
@@ -6474,8 +6438,6 @@ snapshots:
       postcss-load-config: 5.1.0(jiti@1.21.6)(postcss@8.4.47)
       typescript: 5.6.2
 
-  svelte@3.59.2: {}
-
   svelte@4.2.19:
     dependencies:
       '@ampproject/remapping': 2.3.0
diff --git a/src/lib/components/MagicLink.svelte b/src/lib/components/MagicLink.svelte
index dda34f4..679e86f 100644
--- a/src/lib/components/MagicLink.svelte
+++ b/src/lib/components/MagicLink.svelte
@@ -1,19 +1,66 @@
 <script lang="ts">
-import { Auth } from '@supabase/auth-ui-svelte'
-import { ThemeSupa } from '@supabase/auth-ui-shared'
+	export let supabase: any;
 
-export let supabase: any;
-export let url: string;
+	let error = '',
+		message = '',
+		loading = false,
+		email = '';
 
+	async function submit() {
+		error = '';
+		message = '';
+		loading = true;
+
+		const { error: err } = await supabase.auth.signInWithOtp({ email });
+
+		if (err) error = err.message;
+		else message = 'Check your email for the magic link.';
+
+		loading = false;
+	}
 </script>
 
 <div class="p-4">
-  <Auth
-      supabaseClient={supabase}
-      view="magic_link"
-      redirectTo={`${url}/auth/callback`}
-      showLinks={false}
-      appearance={{ theme: ThemeSupa, style: { input: 'color: #fff' } }}
-      additionalData={{}}
-    />
-</div>
\ No newline at end of file
+	<div class="component">
+		<div class="container">
+			<form on:submit|preventDefault={submit}>
+				<label class="input input-bordered flex items-center gap-2">
+					Email
+					<input
+						type="text"
+						name="email"
+						class="grow"
+						placeholder="Your email address"
+						bind:value={email}
+					/>
+				</label>
+				<button class="btn btn-active btn-primary w-full" on:click disabled={loading}
+					>Send magic link</button
+				>
+
+				{#if message}
+					<div class="text-success">
+						{message}
+					</div>
+				{/if}
+
+				{#if error}
+					<div class="text-error">
+						{error}
+					</div>
+				{/if}
+			</form>
+		</div>
+	</div>
+</div>
+
+<style>
+	.component {
+		width: 100%;
+	}
+
+	.container {
+		display: flex;
+		flex-direction: column;
+	}
+</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2399c15..ef19b76 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -147,7 +147,7 @@
 					<div
 						class="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 text-base-content rounded-box min-w-[13rem] w-auto"
 					>
-						<MagicLink {supabase} {url} />
+						<MagicLink {supabase} />
 					</div>
 				{/if}
 			</details>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2047ba0..2ffc849 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -19,7 +19,7 @@
 				</h1>
 			</div>
 			<div id="sign-up" class="card shrink-0 w-full max-w-sm shadow-2xl">
-				<MagicLink {supabase} {url} />
+				<MagicLink {supabase} />
 			</div>
 		</div>
 	</div>
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index 10b4694..ae990ed 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -6,4 +6,4 @@
 	$: ({ supabase, session, url } = data);
 </script>
 
-<MagicLink {supabase} {url} />
+<MagicLink {supabase} />