@q3assets/auth 0.2.2 → 0.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/clients.ts +7 -6
- package/src/login.tsx +14 -14
package/package.json
CHANGED
package/src/clients.ts
CHANGED
|
@@ -1,20 +1,21 @@
|
|
|
1
|
+
import { createBrowserClient as createSSRBrowserClient } from "@supabase/ssr"
|
|
1
2
|
import { createClient, type SupabaseClient } from "@supabase/supabase-js"
|
|
2
3
|
|
|
3
4
|
/**
|
|
4
|
-
* Browser-side Supabase client
|
|
5
|
-
*
|
|
5
|
+
* Browser-side Supabase client using @supabase/ssr.
|
|
6
|
+
* Stores auth state (including PKCE verifiers) in cookies,
|
|
7
|
+
* which survive SSR, page navigations, and middleware.
|
|
6
8
|
*/
|
|
7
9
|
export function createBrowserClient(
|
|
8
10
|
url: string,
|
|
9
11
|
anonKey: string
|
|
10
12
|
): SupabaseClient {
|
|
11
|
-
return
|
|
13
|
+
return createSSRBrowserClient(url, anonKey, {
|
|
12
14
|
auth: {
|
|
13
15
|
flowType: "pkce",
|
|
14
|
-
detectSessionInUrl:
|
|
15
|
-
persistSession: true,
|
|
16
|
+
detectSessionInUrl: false,
|
|
16
17
|
},
|
|
17
|
-
})
|
|
18
|
+
}) as unknown as SupabaseClient
|
|
18
19
|
}
|
|
19
20
|
|
|
20
21
|
/**
|
package/src/login.tsx
CHANGED
|
@@ -47,16 +47,16 @@ export function Login({
|
|
|
47
47
|
|
|
48
48
|
return (
|
|
49
49
|
<div className="flex min-h-screen items-center justify-center px-4">
|
|
50
|
-
<div className="w-full max-w-
|
|
51
|
-
<div className="mb-
|
|
52
|
-
<h1 className="text-
|
|
53
|
-
<p className="mt-
|
|
50
|
+
<div className="w-full max-w-xs">
|
|
51
|
+
<div className="mb-5 text-center">
|
|
52
|
+
<h1 className="text-lg font-semibold tracking-tight">{title}</h1>
|
|
53
|
+
<p className="mt-1 text-xs text-[var(--text-muted)]">{subtitle}</p>
|
|
54
54
|
</div>
|
|
55
55
|
|
|
56
|
-
<div className="rounded-
|
|
56
|
+
<div className="rounded-lg border border-[var(--border)] bg-[var(--bg-card)] p-4">
|
|
57
57
|
{!sent ? (
|
|
58
58
|
<form onSubmit={handleSubmit}>
|
|
59
|
-
<label className="block text-
|
|
59
|
+
<label className="block text-xs font-medium text-[var(--text-muted)] mb-1.5">
|
|
60
60
|
Email address
|
|
61
61
|
</label>
|
|
62
62
|
<input
|
|
@@ -66,28 +66,28 @@ export function Login({
|
|
|
66
66
|
placeholder="you@example.com"
|
|
67
67
|
required
|
|
68
68
|
autoFocus
|
|
69
|
-
className="w-full rounded-
|
|
69
|
+
className="w-full rounded-md border border-[var(--border)] bg-[var(--bg)] px-3 py-2 text-sm text-[var(--text)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent)] focus:outline-none focus:ring-1 focus:ring-[var(--accent)]"
|
|
70
70
|
/>
|
|
71
71
|
{error && (
|
|
72
|
-
<p className="mt-
|
|
72
|
+
<p className="mt-2 text-xs text-red-400">{error}</p>
|
|
73
73
|
)}
|
|
74
74
|
<button
|
|
75
75
|
type="submit"
|
|
76
76
|
disabled={loading}
|
|
77
|
-
className="mt-
|
|
77
|
+
className="mt-3 w-full rounded-md bg-[var(--accent)] px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-[var(--accent-light)] disabled:opacity-50"
|
|
78
78
|
>
|
|
79
79
|
{loading ? "Sending..." : "Send login link"}
|
|
80
80
|
</button>
|
|
81
81
|
</form>
|
|
82
82
|
) : (
|
|
83
|
-
<div className="text-center">
|
|
84
|
-
<p className="text-
|
|
83
|
+
<div className="text-center py-1">
|
|
84
|
+
<p className="text-xs text-[var(--text-muted)]">
|
|
85
85
|
Check your email for a login link.
|
|
86
86
|
</p>
|
|
87
|
-
<p className="mt-
|
|
87
|
+
<p className="mt-1.5 text-sm font-medium text-[var(--text)]">{email}</p>
|
|
88
88
|
<button
|
|
89
89
|
onClick={() => { setSent(false); setEmail(""); setError(null) }}
|
|
90
|
-
className="mt-
|
|
90
|
+
className="mt-3 text-xs text-[var(--text-muted)] hover:text-[var(--text)]"
|
|
91
91
|
>
|
|
92
92
|
Send to a different email
|
|
93
93
|
</button>
|
|
@@ -95,7 +95,7 @@ export function Login({
|
|
|
95
95
|
)}
|
|
96
96
|
</div>
|
|
97
97
|
|
|
98
|
-
<p className="mt-
|
|
98
|
+
<p className="mt-4 text-center text-[10px] text-[var(--text-muted)]">{footer}</p>
|
|
99
99
|
</div>
|
|
100
100
|
</div>
|
|
101
101
|
)
|