mirror of
https://github.com/linsa-io/linsa.git
synced 2026-04-26 18:28:35 +02:00
feat: Add Cloudflare StreamPlayer component and update schema with billing and access control
- Introduced `CloudflareStreamPlayer` React component for embedding streams - Updated `package.json` with new dependencies: `@cloudflare/stream-react` and `stripe` - Extended database schema with user tiers, Stripe billing, storage, and archive management - Added access control logic in `access.ts` for user tiers and feature permissions - Enhanced billing logic with archive storage limits and subscription checks
This commit is contained in:
Nikita
@@ -2,6 +2,8 @@ import { useEffect, useState } from "react"
|
||||
import { createFileRoute } from "@tanstack/react-router"
|
||||
import { getStreamByUsername, type StreamPageData } from "@/lib/stream/db"
|
||||
import { VideoPlayer } from "@/components/VideoPlayer"
|
||||
import { CloudflareStreamPlayer } from "@/components/CloudflareStreamPlayer"
|
||||
import { resolveStreamPlayback } from "@/lib/stream/playback"
|
||||
|
||||
export const Route = createFileRoute("/$username")({
|
||||
ssr: false,
|
||||
@@ -10,6 +12,7 @@ export const Route = createFileRoute("/$username")({
|
||||
|
||||
// Cloudflare Stream HLS URL
|
||||
const HLS_URL = "https://customer-xctsztqzu046isdc.cloudflarestream.com/bb7858eafc85de6c92963f3817477b5d/manifest/video.m3u8"
|
||||
const NIKIV_PLAYBACK = resolveStreamPlayback({ hlsUrl: HLS_URL })
|
||||
|
||||
// Hardcoded user for nikiv
|
||||
const NIKIV_DATA: StreamPageData = {
|
||||
@@ -26,6 +29,7 @@ const NIKIV_DATA: StreamPageData = {
|
||||
is_live: true,
|
||||
viewer_count: 0,
|
||||
hls_url: HLS_URL,
|
||||
playback: NIKIV_PLAYBACK,
|
||||
thumbnail_url: null,
|
||||
started_at: null,
|
||||
},
|
||||
@@ -39,35 +43,72 @@ function StreamPage() {
|
||||
const [streamReady, setStreamReady] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
let isActive = true
|
||||
const setReadySafe = (ready: boolean) => {
|
||||
if (isActive) {
|
||||
setStreamReady(ready)
|
||||
}
|
||||
}
|
||||
const setDataSafe = (next: StreamPageData | null) => {
|
||||
if (isActive) {
|
||||
setData(next)
|
||||
}
|
||||
}
|
||||
const setLoadingSafe = (next: boolean) => {
|
||||
if (isActive) {
|
||||
setLoading(next)
|
||||
}
|
||||
}
|
||||
const setErrorSafe = (next: string | null) => {
|
||||
if (isActive) {
|
||||
setError(next)
|
||||
}
|
||||
}
|
||||
|
||||
setReadySafe(false)
|
||||
|
||||
// Special handling for nikiv - hardcoded stream
|
||||
if (username === "nikiv") {
|
||||
setData(NIKIV_DATA)
|
||||
setLoading(false)
|
||||
// Check if stream is actually live
|
||||
fetch(HLS_URL)
|
||||
.then((res) => setStreamReady(res.ok))
|
||||
.catch(() => setStreamReady(false))
|
||||
return
|
||||
setDataSafe(NIKIV_DATA)
|
||||
setLoadingSafe(false)
|
||||
|
||||
if (NIKIV_PLAYBACK?.type === "hls") {
|
||||
fetch(NIKIV_PLAYBACK.url)
|
||||
.then((res) => setReadySafe(res.ok))
|
||||
.catch(() => setReadySafe(false))
|
||||
}
|
||||
|
||||
return () => {
|
||||
isActive = false
|
||||
}
|
||||
}
|
||||
|
||||
const loadData = async () => {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
setLoadingSafe(true)
|
||||
setErrorSafe(null)
|
||||
try {
|
||||
const result = await getStreamByUsername(username)
|
||||
setData(result)
|
||||
if (result?.stream?.hls_url) {
|
||||
const res = await fetch(result.stream.hls_url)
|
||||
setStreamReady(res.ok)
|
||||
setDataSafe(result)
|
||||
|
||||
const playback = result?.stream?.playback
|
||||
if (playback?.type === "hls") {
|
||||
const res = await fetch(playback.url)
|
||||
setReadySafe(res.ok)
|
||||
} else {
|
||||
setReadySafe(false)
|
||||
}
|
||||
} catch (err) {
|
||||
setError("Failed to load stream")
|
||||
setErrorSafe("Failed to load stream")
|
||||
console.error(err)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
setLoadingSafe(false)
|
||||
}
|
||||
}
|
||||
loadData()
|
||||
|
||||
return () => {
|
||||
isActive = false
|
||||
}
|
||||
}, [username])
|
||||
|
||||
if (loading) {
|
||||
@@ -103,12 +144,36 @@ function StreamPage() {
|
||||
}
|
||||
|
||||
const { user, stream } = data
|
||||
const playback = stream?.playback
|
||||
const showPlayer =
|
||||
playback?.type === "cloudflare" || (playback?.type === "hls" && streamReady)
|
||||
|
||||
return (
|
||||
<div className="h-screen w-screen bg-black">
|
||||
{stream?.is_live && stream.hls_url && streamReady ? (
|
||||
<VideoPlayer src={stream.hls_url} muted={false} />
|
||||
) : stream?.is_live && stream.hls_url ? (
|
||||
{stream?.is_live && playback && showPlayer ? (
|
||||
playback.type === "cloudflare" ? (
|
||||
<div className="relative h-full w-full">
|
||||
<CloudflareStreamPlayer
|
||||
uid={playback.uid}
|
||||
customerCode={playback.customerCode}
|
||||
muted={false}
|
||||
onReady={() => setStreamReady(true)}
|
||||
/>
|
||||
{!streamReady && (
|
||||
<div className="absolute inset-0 flex items-center justify-center text-white">
|
||||
<div className="text-center">
|
||||
<div className="animate-pulse text-4xl">🔴</div>
|
||||
<p className="mt-4 text-xl text-neutral-400">
|
||||
Connecting to stream...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<VideoPlayer src={playback.url} muted={false} />
|
||||
)
|
||||
) : stream?.is_live && playback ? (
|
||||
<div className="flex h-full w-full items-center justify-center text-white">
|
||||
<div className="text-center">
|
||||
<div className="animate-pulse text-4xl">🔴</div>
|
||||
|
||||
@@ -4,6 +4,7 @@ import { getDb } from "@/db/connection"
|
||||
import { users, streams } from "@/db/schema"
|
||||
import { getAuth } from "@/lib/auth"
|
||||
import { randomUUID } from "crypto"
|
||||
import { resolveStreamPlayback } from "@/lib/stream/playback"
|
||||
|
||||
const resolveDatabaseUrl = (request: Request) => {
|
||||
try {
|
||||
@@ -48,6 +49,10 @@ const getProfile = async ({ request }: { request: Request }) => {
|
||||
where: eq(streams.user_id, user.id),
|
||||
})
|
||||
|
||||
const playback = stream
|
||||
? resolveStreamPlayback({ hlsUrl: stream.hls_url })
|
||||
: null
|
||||
|
||||
return new Response(
|
||||
JSON.stringify({
|
||||
id: user.id,
|
||||
@@ -61,6 +66,7 @@ const getProfile = async ({ request }: { request: Request }) => {
|
||||
title: stream.title,
|
||||
is_live: stream.is_live,
|
||||
hls_url: stream.hls_url,
|
||||
playback,
|
||||
stream_key: stream.stream_key,
|
||||
}
|
||||
: null,
|
||||
|
||||
@@ -3,6 +3,7 @@ import { eq } from "drizzle-orm"
|
||||
import { getDb } from "@/db/connection"
|
||||
import { streams } from "@/db/schema"
|
||||
import { getAuth } from "@/lib/auth"
|
||||
import { resolveStreamPlayback } from "@/lib/stream/playback"
|
||||
|
||||
const resolveDatabaseUrl = (request: Request) => {
|
||||
try {
|
||||
@@ -42,7 +43,9 @@ const getStream = async ({ request }: { request: Request }) => {
|
||||
})
|
||||
}
|
||||
|
||||
return new Response(JSON.stringify(stream), {
|
||||
const playback = resolveStreamPlayback({ hlsUrl: stream.hls_url })
|
||||
|
||||
return new Response(JSON.stringify({ ...stream, playback }), {
|
||||
status: 200,
|
||||
headers: { "content-type": "application/json" },
|
||||
})
|
||||
|
||||
@@ -2,6 +2,7 @@ import { createFileRoute } from "@tanstack/react-router"
|
||||
import { eq } from "drizzle-orm"
|
||||
import { getDb } from "@/db/connection"
|
||||
import { users, streams } from "@/db/schema"
|
||||
import { resolveStreamPlayback } from "@/lib/stream/playback"
|
||||
|
||||
const resolveDatabaseUrl = (request: Request) => {
|
||||
try {
|
||||
@@ -58,6 +59,10 @@ const serve = async ({
|
||||
where: eq(streams.user_id, user.id),
|
||||
})
|
||||
|
||||
const playback = stream
|
||||
? resolveStreamPlayback({ hlsUrl: stream.hls_url })
|
||||
: null
|
||||
|
||||
const data = {
|
||||
user: {
|
||||
id: user.id,
|
||||
@@ -73,6 +78,7 @@ const serve = async ({
|
||||
is_live: stream.is_live,
|
||||
viewer_count: stream.viewer_count,
|
||||
hls_url: stream.hls_url,
|
||||
playback,
|
||||
thumbnail_url: stream.thumbnail_url,
|
||||
started_at: stream.started_at?.toISOString() ?? null,
|
||||
}
|
||||
|
||||
111
packages/web/src/routes/api/stripe/checkout.ts
Normal file
111
packages/web/src/routes/api/stripe/checkout.ts
Normal file
@@ -0,0 +1,111 @@
|
||||
import { createFileRoute } from "@tanstack/react-router"
|
||||
import { getAuth } from "@/lib/auth"
|
||||
import { getStripe, getStripeConfig } from "@/lib/stripe"
|
||||
import { db } from "@/db/connection"
|
||||
import { stripe_customers } from "@/db/schema"
|
||||
import { eq } from "drizzle-orm"
|
||||
|
||||
const json = (data: unknown, status = 200) =>
|
||||
new Response(JSON.stringify(data), {
|
||||
status,
|
||||
headers: { "content-type": "application/json" },
|
||||
})
|
||||
|
||||
export const Route = createFileRoute("/api/stripe/checkout")({
|
||||
server: {
|
||||
handlers: {
|
||||
POST: async ({ request }) => {
|
||||
const session = await getAuth().api.getSession({
|
||||
headers: request.headers,
|
||||
})
|
||||
if (!session?.user?.id) {
|
||||
return json({ error: "Unauthorized" }, 401)
|
||||
}
|
||||
|
||||
const stripe = getStripe()
|
||||
const { archivePriceId } = getStripeConfig()
|
||||
|
||||
if (!stripe) {
|
||||
console.error("[stripe] Stripe not configured - missing STRIPE_SECRET_KEY")
|
||||
return json({ error: "Stripe not configured" }, 500)
|
||||
}
|
||||
|
||||
if (!archivePriceId) {
|
||||
console.error("[stripe] Price ID not configured - missing STRIPE_ARCHIVE_PRICE_ID")
|
||||
return json({ error: "Price ID not configured" }, 500)
|
||||
}
|
||||
|
||||
const database = db()
|
||||
|
||||
try {
|
||||
// Get or create Stripe customer
|
||||
let [customer] = await database
|
||||
.select()
|
||||
.from(stripe_customers)
|
||||
.where(eq(stripe_customers.user_id, session.user.id))
|
||||
.limit(1)
|
||||
|
||||
let stripeCustomerId: string
|
||||
|
||||
if (customer) {
|
||||
stripeCustomerId = customer.stripe_customer_id
|
||||
} else {
|
||||
// Create new Stripe customer
|
||||
const stripeCustomer = await stripe.customers.create({
|
||||
email: session.user.email,
|
||||
name: session.user.name ?? undefined,
|
||||
metadata: {
|
||||
user_id: session.user.id,
|
||||
},
|
||||
})
|
||||
|
||||
await database.insert(stripe_customers).values({
|
||||
user_id: session.user.id,
|
||||
stripe_customer_id: stripeCustomer.id,
|
||||
})
|
||||
|
||||
stripeCustomerId = stripeCustomer.id
|
||||
}
|
||||
|
||||
// Parse request body for success/cancel URLs
|
||||
const body = (await request.json().catch(() => ({}))) as {
|
||||
successUrl?: string
|
||||
cancelUrl?: string
|
||||
}
|
||||
|
||||
const origin = new URL(request.url).origin
|
||||
const successUrl = body.successUrl ?? `${origin}/archive?billing=success`
|
||||
const cancelUrl = body.cancelUrl ?? `${origin}/archive?billing=canceled`
|
||||
|
||||
// Create checkout session
|
||||
const checkoutSession = await stripe.checkout.sessions.create({
|
||||
customer: stripeCustomerId,
|
||||
mode: "subscription",
|
||||
line_items: [
|
||||
{
|
||||
price: archivePriceId,
|
||||
quantity: 1,
|
||||
},
|
||||
],
|
||||
success_url: successUrl,
|
||||
cancel_url: cancelUrl,
|
||||
subscription_data: {
|
||||
metadata: {
|
||||
user_id: session.user.id,
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
return json({ url: checkoutSession.url })
|
||||
} catch (error) {
|
||||
const err = error as Error
|
||||
console.error("[stripe] Checkout error:", err.message)
|
||||
return json(
|
||||
{ error: `Failed to create checkout session: ${err.message}` },
|
||||
500
|
||||
)
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
201
packages/web/src/routes/api/stripe/webhooks.ts
Normal file
201
packages/web/src/routes/api/stripe/webhooks.ts
Normal file
@@ -0,0 +1,201 @@
|
||||
import { createFileRoute } from "@tanstack/react-router"
|
||||
import { getStripe, getStripeConfig } from "@/lib/stripe"
|
||||
import { db } from "@/db/connection"
|
||||
import { stripe_customers, stripe_subscriptions, storage_usage } from "@/db/schema"
|
||||
import { eq, and } from "drizzle-orm"
|
||||
import type Stripe from "stripe"
|
||||
|
||||
// Archive subscription limits
|
||||
const ARCHIVE_LIMITS = {
|
||||
archives: 10,
|
||||
storageBytes: 1073741824, // 1GB
|
||||
}
|
||||
|
||||
export const Route = createFileRoute("/api/stripe/webhooks")({
|
||||
server: {
|
||||
handlers: {
|
||||
POST: async ({ request }) => {
|
||||
const stripe = getStripe()
|
||||
const { webhookSecret } = getStripeConfig()
|
||||
|
||||
if (!stripe || !webhookSecret) {
|
||||
console.error("[stripe] Stripe not configured")
|
||||
return new Response("Stripe not configured", { status: 500 })
|
||||
}
|
||||
|
||||
const body = await request.text()
|
||||
const signature = request.headers.get("stripe-signature")
|
||||
|
||||
if (!signature) {
|
||||
return new Response("Missing stripe-signature header", { status: 400 })
|
||||
}
|
||||
|
||||
let event: Stripe.Event
|
||||
try {
|
||||
event = stripe.webhooks.constructEvent(body, signature, webhookSecret)
|
||||
} catch (err) {
|
||||
console.error("[stripe] Webhook signature verification failed:", err)
|
||||
return new Response("Invalid signature", { status: 400 })
|
||||
}
|
||||
|
||||
const database = db()
|
||||
|
||||
try {
|
||||
switch (event.type) {
|
||||
case "checkout.session.completed": {
|
||||
const session = event.data.object as Stripe.Checkout.Session
|
||||
console.log("[stripe] Checkout completed:", session.id)
|
||||
|
||||
if (session.mode === "subscription" && session.subscription) {
|
||||
const subscription = await stripe.subscriptions.retrieve(
|
||||
session.subscription as string
|
||||
)
|
||||
await handleSubscriptionCreated(database, subscription)
|
||||
}
|
||||
break
|
||||
}
|
||||
|
||||
case "customer.subscription.created":
|
||||
case "customer.subscription.updated": {
|
||||
const subscription = event.data.object as Stripe.Subscription
|
||||
console.log(`[stripe] Subscription ${event.type}:`, subscription.id)
|
||||
await handleSubscriptionCreated(database, subscription)
|
||||
break
|
||||
}
|
||||
|
||||
case "customer.subscription.deleted": {
|
||||
const subscription = event.data.object as Stripe.Subscription
|
||||
console.log("[stripe] Subscription deleted:", subscription.id)
|
||||
await handleSubscriptionDeleted(database, subscription)
|
||||
break
|
||||
}
|
||||
|
||||
case "invoice.payment_succeeded": {
|
||||
const invoice = event.data.object as Stripe.Invoice
|
||||
console.log("[stripe] Invoice paid:", invoice.id)
|
||||
break
|
||||
}
|
||||
|
||||
case "invoice.payment_failed": {
|
||||
const invoice = event.data.object as Stripe.Invoice
|
||||
console.log("[stripe] Invoice payment failed:", invoice.id)
|
||||
break
|
||||
}
|
||||
|
||||
default:
|
||||
console.log(`[stripe] Unhandled event type: ${event.type}`)
|
||||
}
|
||||
|
||||
return new Response(JSON.stringify({ received: true }), {
|
||||
status: 200,
|
||||
headers: { "content-type": "application/json" },
|
||||
})
|
||||
} catch (error) {
|
||||
console.error("[stripe] Webhook handler error:", error)
|
||||
return new Response("Webhook handler error", { status: 500 })
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
async function handleSubscriptionCreated(
|
||||
database: ReturnType<typeof db>,
|
||||
subscription: Stripe.Subscription
|
||||
) {
|
||||
const customerId = subscription.customer as string
|
||||
const priceId = subscription.items.data[0]?.price.id
|
||||
|
||||
// Find user by Stripe customer ID
|
||||
const [customer] = await database
|
||||
.select()
|
||||
.from(stripe_customers)
|
||||
.where(eq(stripe_customers.stripe_customer_id, customerId))
|
||||
.limit(1)
|
||||
|
||||
if (!customer) {
|
||||
console.error("[stripe] No customer found for:", customerId)
|
||||
return
|
||||
}
|
||||
|
||||
// Upsert subscription
|
||||
const existing = await database
|
||||
.select()
|
||||
.from(stripe_subscriptions)
|
||||
.where(eq(stripe_subscriptions.stripe_subscription_id, subscription.id))
|
||||
.limit(1)
|
||||
|
||||
// Period dates
|
||||
const item = subscription.items.data[0]
|
||||
const periodStart = item?.current_period_start
|
||||
? new Date(item.current_period_start * 1000)
|
||||
: new Date()
|
||||
const periodEnd = item?.current_period_end
|
||||
? new Date(item.current_period_end * 1000)
|
||||
: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000)
|
||||
|
||||
const subscriptionData = {
|
||||
stripe_subscription_id: subscription.id,
|
||||
stripe_customer_id: customerId,
|
||||
stripe_price_id: priceId,
|
||||
status: subscription.status,
|
||||
current_period_start: periodStart,
|
||||
current_period_end: periodEnd,
|
||||
cancel_at_period_end: subscription.cancel_at_period_end,
|
||||
updated_at: new Date(),
|
||||
}
|
||||
|
||||
if (existing.length > 0) {
|
||||
await database
|
||||
.update(stripe_subscriptions)
|
||||
.set(subscriptionData)
|
||||
.where(eq(stripe_subscriptions.stripe_subscription_id, subscription.id))
|
||||
} else {
|
||||
await database.insert(stripe_subscriptions).values({
|
||||
user_id: customer.user_id,
|
||||
...subscriptionData,
|
||||
})
|
||||
}
|
||||
|
||||
// Create or update storage usage record for this billing period
|
||||
const [existingUsage] = await database
|
||||
.select()
|
||||
.from(storage_usage)
|
||||
.where(
|
||||
and(
|
||||
eq(storage_usage.user_id, customer.user_id),
|
||||
eq(storage_usage.period_start, periodStart)
|
||||
)
|
||||
)
|
||||
.limit(1)
|
||||
|
||||
if (!existingUsage) {
|
||||
await database.insert(storage_usage).values({
|
||||
user_id: customer.user_id,
|
||||
archives_used: 0,
|
||||
archives_limit: ARCHIVE_LIMITS.archives,
|
||||
storage_bytes_used: 0,
|
||||
storage_bytes_limit: ARCHIVE_LIMITS.storageBytes,
|
||||
period_start: periodStart,
|
||||
period_end: periodEnd,
|
||||
})
|
||||
console.log(`[stripe] Created storage usage record for user ${customer.user_id}`)
|
||||
}
|
||||
|
||||
console.log(`[stripe] Subscription synced for user ${customer.user_id}`)
|
||||
}
|
||||
|
||||
async function handleSubscriptionDeleted(
|
||||
database: ReturnType<typeof db>,
|
||||
subscription: Stripe.Subscription
|
||||
) {
|
||||
await database
|
||||
.update(stripe_subscriptions)
|
||||
.set({
|
||||
status: "canceled",
|
||||
updated_at: new Date(),
|
||||
})
|
||||
.where(eq(stripe_subscriptions.stripe_subscription_id, subscription.id))
|
||||
|
||||
console.log(`[stripe] Subscription ${subscription.id} marked as canceled`)
|
||||
}
|
||||
122
packages/web/src/routes/api/users.username.ts
Normal file
122
packages/web/src/routes/api/users.username.ts
Normal file
@@ -0,0 +1,122 @@
|
||||
import { createFileRoute } from "@tanstack/react-router"
|
||||
import { getAuth } from "@/lib/auth"
|
||||
import { db } from "@/db/connection"
|
||||
import { users } from "@/db/schema"
|
||||
import { eq } from "drizzle-orm"
|
||||
|
||||
// Username validation: lowercase letters, numbers, underscores, 3-20 chars
|
||||
const isValidUsername = (username: string): boolean => {
|
||||
return /^[a-z0-9_]{3,20}$/.test(username)
|
||||
}
|
||||
|
||||
const handlePost = async ({ request }: { request: Request }) => {
|
||||
const auth = getAuth()
|
||||
const session = await auth.api.getSession({ headers: request.headers })
|
||||
|
||||
if (!session?.user) {
|
||||
return new Response(JSON.stringify({ error: "Unauthorized" }), {
|
||||
status: 401,
|
||||
headers: { "content-type": "application/json" },
|
||||
})
|
||||
}
|
||||
|
||||
const body = await request.json()
|
||||
const { username } = body as { username?: string }
|
||||
|
||||
if (!username || typeof username !== "string") {
|
||||
return new Response(JSON.stringify({ error: "Username is required" }), {
|
||||
status: 400,
|
||||
headers: { "content-type": "application/json" },
|
||||
})
|
||||
}
|
||||
|
||||
const normalizedUsername = username.toLowerCase().trim()
|
||||
|
||||
if (!isValidUsername(normalizedUsername)) {
|
||||
return new Response(
|
||||
JSON.stringify({
|
||||
error:
|
||||
"Username must be 3-20 characters, lowercase letters, numbers, or underscores only",
|
||||
}),
|
||||
{
|
||||
status: 400,
|
||||
headers: { "content-type": "application/json" },
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
const database = db()
|
||||
|
||||
// Check if username is already taken (by another user)
|
||||
const existing = await database
|
||||
.select({ id: users.id })
|
||||
.from(users)
|
||||
.where(eq(users.username, normalizedUsername))
|
||||
.limit(1)
|
||||
|
||||
if (existing.length > 0 && existing[0].id !== session.user.id) {
|
||||
return new Response(JSON.stringify({ error: "Username is already taken" }), {
|
||||
status: 409,
|
||||
headers: { "content-type": "application/json" },
|
||||
})
|
||||
}
|
||||
|
||||
// Update username
|
||||
await database
|
||||
.update(users)
|
||||
.set({ username: normalizedUsername, updatedAt: new Date() })
|
||||
.where(eq(users.id, session.user.id))
|
||||
|
||||
return new Response(
|
||||
JSON.stringify({ success: true, username: normalizedUsername }),
|
||||
{
|
||||
status: 200,
|
||||
headers: { "content-type": "application/json" },
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
const handleGet = async ({ request }: { request: Request }) => {
|
||||
const auth = getAuth()
|
||||
const session = await auth.api.getSession({ headers: request.headers })
|
||||
|
||||
if (!session?.user) {
|
||||
return new Response(JSON.stringify({ error: "Unauthorized" }), {
|
||||
status: 401,
|
||||
headers: { "content-type": "application/json" },
|
||||
})
|
||||
}
|
||||
|
||||
const database = db()
|
||||
const user = await database
|
||||
.select({ username: users.username })
|
||||
.from(users)
|
||||
.where(eq(users.id, session.user.id))
|
||||
.limit(1)
|
||||
|
||||
return new Response(
|
||||
JSON.stringify({ username: user[0]?.username ?? null }),
|
||||
{
|
||||
status: 200,
|
||||
headers: { "content-type": "application/json" },
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
export const Route = createFileRoute("/api/users/username")({
|
||||
server: {
|
||||
handlers: {
|
||||
GET: handleGet,
|
||||
POST: handlePost,
|
||||
OPTIONS: () =>
|
||||
new Response(null, {
|
||||
status: 204,
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
"Access-Control-Allow-Methods": "GET, POST, OPTIONS",
|
||||
"Access-Control-Allow-Headers": "Content-Type",
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
})
|
||||
@@ -7,22 +7,27 @@ export const Route = createFileRoute("/login")({
|
||||
ssr: false,
|
||||
})
|
||||
|
||||
type Step = "email" | "otp"
|
||||
type Step = "email" | "otp" | "username"
|
||||
|
||||
function AuthPage() {
|
||||
const [step, setStep] = useState<Step>("email")
|
||||
const emailInputRef = useRef<HTMLInputElement>(null)
|
||||
const otpInputRef = useRef<HTMLInputElement>(null)
|
||||
const usernameInputRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (step === "email") {
|
||||
emailInputRef.current?.focus()
|
||||
} else {
|
||||
} else if (step === "otp") {
|
||||
otpInputRef.current?.focus()
|
||||
} else if (step === "username") {
|
||||
usernameInputRef.current?.focus()
|
||||
}
|
||||
}, [step])
|
||||
|
||||
const [email, setEmail] = useState("")
|
||||
const [otp, setOtp] = useState("")
|
||||
const [username, setUsername] = useState("")
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [error, setError] = useState("")
|
||||
|
||||
@@ -60,7 +65,6 @@ function AuthPage() {
|
||||
setError("")
|
||||
|
||||
try {
|
||||
// Use signIn.emailOtp for sign-in type OTPs (not verifyEmail which is for email verification)
|
||||
const { error } = await authClient.signIn.emailOtp({
|
||||
email,
|
||||
otp,
|
||||
@@ -69,7 +73,17 @@ function AuthPage() {
|
||||
if (error) {
|
||||
setError(error.message || "Invalid code")
|
||||
} else {
|
||||
window.location.href = "/"
|
||||
// Check if user has a username
|
||||
const response = await fetch("/api/users/username")
|
||||
const data = await response.json()
|
||||
|
||||
if (!data.username) {
|
||||
// New user or user without username - show username setup
|
||||
setStep("username")
|
||||
} else {
|
||||
// Existing user with username - go to home
|
||||
window.location.href = "/"
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Verify OTP error:", err)
|
||||
@@ -79,6 +93,35 @@ function AuthPage() {
|
||||
}
|
||||
}
|
||||
|
||||
const handleSetUsername = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (!username.trim()) return
|
||||
|
||||
setIsLoading(true)
|
||||
setError("")
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/users/username", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ username: username.toLowerCase().trim() }),
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
|
||||
if (!response.ok) {
|
||||
setError(data.error || "Failed to set username")
|
||||
} else {
|
||||
window.location.href = "/"
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Set username error:", err)
|
||||
setError("Failed to set username")
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleResend = async () => {
|
||||
setIsLoading(true)
|
||||
setError("")
|
||||
@@ -93,7 +136,7 @@ function AuthPage() {
|
||||
if (error) {
|
||||
setError(error.message || "Failed to resend code")
|
||||
}
|
||||
} catch (err) {
|
||||
} catch {
|
||||
setError("Failed to resend code")
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
@@ -101,26 +144,42 @@ function AuthPage() {
|
||||
}
|
||||
|
||||
const handleBack = () => {
|
||||
setStep("email")
|
||||
setOtp("")
|
||||
if (step === "otp") {
|
||||
setStep("email")
|
||||
setOtp("")
|
||||
} else if (step === "username") {
|
||||
// Can't go back from username step - they're already signed in
|
||||
// Just skip for now
|
||||
window.location.href = "/"
|
||||
}
|
||||
setError("")
|
||||
}
|
||||
|
||||
const handleSkipUsername = () => {
|
||||
window.location.href = "/"
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-[#050505] py-12 px-4">
|
||||
<div className="max-w-sm w-full space-y-6">
|
||||
<div className="text-center">
|
||||
<h1 className="text-2xl font-bold text-white">
|
||||
{step === "email" ? "Sign in" : "Enter code"}
|
||||
{step === "email"
|
||||
? "Sign in"
|
||||
: step === "otp"
|
||||
? "Enter code"
|
||||
: "Choose username"}
|
||||
</h1>
|
||||
<p className="mt-2 text-sm text-neutral-400">
|
||||
{step === "email"
|
||||
? "Enter your email to receive a verification code"
|
||||
: `We sent a 6-digit code to ${email}`}
|
||||
: step === "otp"
|
||||
? `We sent a 6-digit code to ${email}`
|
||||
: "Pick a unique username for your profile"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{step === "email" ? (
|
||||
{step === "email" && (
|
||||
<form onSubmit={handleSendOTP} className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="email" className="sr-only">
|
||||
@@ -154,7 +213,9 @@ function AuthPage() {
|
||||
{isLoading ? "Sending..." : "Continue"}
|
||||
</button>
|
||||
</form>
|
||||
) : (
|
||||
)}
|
||||
|
||||
{step === "otp" && (
|
||||
<form onSubmit={handleVerifyOTP} className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="otp" className="sr-only">
|
||||
@@ -196,7 +257,7 @@ function AuthPage() {
|
||||
onClick={handleBack}
|
||||
className="text-neutral-400 hover:text-white transition-colors"
|
||||
>
|
||||
← Back
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@@ -209,6 +270,61 @@ function AuthPage() {
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{step === "username" && (
|
||||
<form onSubmit={handleSetUsername} className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="username" className="sr-only">
|
||||
Username
|
||||
</label>
|
||||
<div className="relative">
|
||||
<span className="absolute left-4 top-1/2 -translate-y-1/2 text-neutral-500">
|
||||
linsa.io/
|
||||
</span>
|
||||
<input
|
||||
ref={usernameInputRef}
|
||||
id="username"
|
||||
name="username"
|
||||
type="text"
|
||||
autoComplete="username"
|
||||
required
|
||||
maxLength={20}
|
||||
value={username}
|
||||
onChange={(e) =>
|
||||
setUsername(e.target.value.toLowerCase().replace(/[^a-z0-9_]/g, ""))
|
||||
}
|
||||
className="w-full pl-[88px] pr-4 py-3 bg-[#18181b] border border-[#27272a] rounded-xl text-white placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent"
|
||||
placeholder="yourname"
|
||||
/>
|
||||
</div>
|
||||
<p className="mt-2 text-xs text-neutral-500">
|
||||
3-20 characters, letters, numbers, underscores
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="p-3 bg-red-500/10 border border-red-500/20 rounded-xl">
|
||||
<p className="text-sm text-red-400">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading || username.length < 3}
|
||||
className="w-full py-3 px-4 bg-teal-600 text-white font-medium rounded-xl hover:bg-teal-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-[#050505] focus:ring-teal-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
{isLoading ? "Saving..." : "Continue"}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSkipUsername}
|
||||
className="w-full py-2 text-sm text-neutral-400 hover:text-white transition-colors"
|
||||
>
|
||||
Skip for now
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user