\n
\n )\n}\n",
+ "content": "import { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\nimport { type ActionFunctionArgs, Link, redirect, useFetcher, useSearchParams } from 'react-router'\n\nexport const action = async ({ request }: ActionFunctionArgs) => {\n const { supabase } = createClient(request)\n\n const url = new URL(request.url)\n const origin = url.origin\n\n const formData = await request.formData()\n\n const email = formData.get('email') as string\n const password = formData.get('password') as string\n const repeatPassword = formData.get('repeat-password') as string\n\n if (!password) {\n return {\n error: 'Password is required',\n }\n }\n\n if (password !== repeatPassword) {\n return { error: 'Passwords do not match' }\n }\n\n const { error } = await supabase.auth.signUp({\n email,\n password,\n options: {\n emailRedirectTo: `${origin}/protected`,\n },\n })\n\n if (error) {\n return { error: error.message }\n }\n\n return redirect('/sign-up?success')\n}\n\nexport default function SignUp() {\n const fetcher = useFetcher\n
\n \n {success ? (\n \n \n Thank you for signing up! \n Check your email to confirm \n \n \n \n \n ) : (\n \n \n Sign up \n Create a new account \n \n \n \n \n \n \n )}\n
\n \n You've successfully signed up. Please check your email to confirm your account\n before signing in.\n
\n\n
\n \n \n
\n \n
\n \n \n
\n \n \n
\n {error && \n \n
\n \n {error}
}\n \n\n Already have an account?{' '}\n \n Login\n \n
\n \n
\n )\n}\n",
"type": "registry:file",
"target": "app/routes/sign-up.tsx"
},
diff --git a/apps/ui-library/public/r/password-based-auth-react.json b/apps/ui-library/public/r/password-based-auth-react.json
index a50604835e8..75fdd187e97 100644
--- a/apps/ui-library/public/r/password-based-auth-react.json
+++ b/apps/ui-library/public/r/password-based-auth-react.json
@@ -21,7 +21,7 @@
},
{
"path": "registry/default/blocks/password-based-auth-react/components/sign-up-form.tsx",
- "content": "import { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/react/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\nimport { useState } from 'react'\n\nexport function SignUpForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n const [email, setEmail] = useState('')\n const [password, setPassword] = useState('')\n const [repeatPassword, setRepeatPassword] = useState('')\n const [error, setError] = useState\n
\n \n {success ? (\n \n \n Thank you for signing up! \n Check your email to confirm \n \n \n \n \n ) : (\n \n \n Sign up \n Create a new account \n \n \n \n \n \n \n )}\n
\n \n You've successfully signed up. Please check your email to confirm your\n account before signing in.\n
\n\n
\n \n \n
\n \n
\n \n \n
\n \n \n
\n {error && \n \n
\n \n {error}
}\n \n\n Already have an account?{' '}\n \n Login\n \n
\n \n {success ? (\n \n \n Thank you for signing up! \n Check your email to confirm \n \n \n \n \n ) : (\n \n \n Sign up \n Create a new account \n \n \n \n \n \n )}\n
\n )\n}\n",
+ "content": "import { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/react/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\nimport { useState } from 'react'\n\nexport function SignUpForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n const [email, setEmail] = useState('')\n const [password, setPassword] = useState('')\n const [repeatPassword, setRepeatPassword] = useState('')\n const [error, setError] = useState\n You've successfully signed up. Please check your email to confirm your account before\n signing in.\n
\n\n {success ? (\n \n \n Thank you for signing up! \n Check your email to confirm \n \n \n \n \n ) : (\n \n \n Sign up \n Create a new account \n \n \n \n \n \n )}\n
\n )\n}\n",
"type": "registry:component"
},
{
diff --git a/apps/ui-library/public/r/password-based-auth-tanstack.json b/apps/ui-library/public/r/password-based-auth-tanstack.json
index 0d84095b204..9c5efdba4de 100644
--- a/apps/ui-library/public/r/password-based-auth-tanstack.json
+++ b/apps/ui-library/public/r/password-based-auth-tanstack.json
@@ -58,7 +58,7 @@
},
{
"path": "registry/default/blocks/password-based-auth-tanstack/routes/sign-up-success.tsx",
- "content": "import {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/sign-up-success')({\n component: SignUpSuccess,\n})\n\nfunction SignUpSuccess() {\n return (\n \n You've successfully signed up. Please check your email to confirm your account\n before signing in.\n
\n\n
\n )\n}\n",
+ "content": "import {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/sign-up-success')({\n component: SignUpSuccess,\n})\n\nfunction SignUpSuccess() {\n return (\n \n
\n \n \n \n Thank you for signing up! \n Check your email to confirm \n \n \n \n \n
\n \n You've successfully signed up. Please check your email to confirm your account\n before signing in.\n
\n\n
\n )\n}\n",
"type": "registry:file",
"target": "routes/sign-up-success.tsx"
},
diff --git a/apps/ui-library/public/r/passwordless-auth-nextjs.json b/apps/ui-library/public/r/passwordless-auth-nextjs.json
new file mode 100644
index 00000000000..f845e0b4e19
--- /dev/null
+++ b/apps/ui-library/public/r/passwordless-auth-nextjs.json
@@ -0,0 +1,108 @@
+{
+ "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+ "name": "passwordless-auth-nextjs",
+ "type": "registry:block",
+ "title": "Passwordless Auth for Next.js and Supabase",
+ "description": "Passwordless authentication for Next.js using Supabase Auth. Supports both Magic Link and OTP (One-Time Password) login methods.",
+ "dependencies": [
+ "@supabase/ssr@latest",
+ "@supabase/supabase-js@latest"
+ ],
+ "registryDependencies": [
+ "button",
+ "card",
+ "input",
+ "label",
+ "link"
+ ],
+ "files": [
+ {
+ "path": "registry/default/blocks/passwordless-auth-nextjs/components/magic-link-form.tsx",
+ "content": "'use client'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\nimport { useState } from 'react'\n\nexport function MagicLinkForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n const [email, setEmail] = useState('')\n const [error, setError] = useState\n
\n \n \n \n Thank you for signing up! \n Check your email to confirm \n \n \n \n \n
\n \n You've successfully signed up. Please check your email to confirm your account\n before signing in.\n
\n\n \n \n Magic Link Login \n \n Enter your email to receive a magic link for passwordless login\n \n \n \n {isSuccess ? (\n \n \n
\n )\n}\n",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-nextjs/components/otp-request-form.tsx",
+ "content": "'use client'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\nimport { useRouter } from 'next/navigation'\nimport { useState } from 'react'\n\nexport function OTPRequestForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n const [email, setEmail] = useState('')\n const [error, setError] = useState\n
\n ) : (\n \n )}\n Check your email!
\n\n We've sent a magic link to {email}. Click the\n link in the email to sign in.\n
\n\n \n \n OTP Login \n \n Enter your email to receive a one-time password for passwordless login\n \n \n \n \n \n \n
\n )\n}\n",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-nextjs/components/otp-verify-form.tsx",
+ "content": "'use client'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\nimport { useRouter, useSearchParams } from 'next/navigation'\nimport { useState } from 'react'\n\nexport function OTPVerifyForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n const searchParams = useSearchParams()\n const email = searchParams.get('email') || ''\n const [otp, setOTP] = useState('')\n const [error, setError] = useState\n \n \n Verify Your Email \n \n Enter the 6-digit code sent to{' '}\n {email}\n \n \n \n \n \n \n
\n )\n}\n",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-nextjs/components/passwordless-login-form.tsx",
+ "content": "'use client'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\nimport { useRouter } from 'next/navigation'\nimport { useState } from 'react'\n\ntype LoginMethod = 'magic-link' | 'otp'\n\ninterface PasswordlessLoginFormProps extends React.ComponentPropsWithoutRef<'div'> {\n method?: LoginMethod\n}\n\nexport function PasswordlessLoginForm({\n className,\n method = 'magic-link',\n ...props\n}: PasswordlessLoginFormProps) {\n const [email, setEmail] = useState('')\n const [error, setError] = useState\n \n \n Sign up \n Sign in or create a new account \n \n \n {isMagicLinkSent ? (\n \n \n
\n )\n}\n",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-nextjs/app/auth/magic-link/page.tsx",
+ "content": "import { MagicLinkForm } from '@/registry/default/blocks/passwordless-auth-nextjs/components/magic-link-form'\n\nexport default function MagicLinkPage() {\n return (\n \n {\n setIsMagicLinkSent(false)\n setEmail('')\n }}\n >\n Send another link\n \n
\n ) : (\n \n )}\n Check your email!
\n\n We've sent a magic link to {email}. Click\n the link in the email to sign in.\n
\n\n
\n )\n}\n",
+ "type": "registry:page",
+ "target": "app/auth/magic-link/page.tsx"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-nextjs/app/auth/otp/page.tsx",
+ "content": "import { OTPRequestForm } from '@/registry/default/blocks/passwordless-auth-nextjs/components/otp-request-form'\n\nexport default function OTPRequestPage() {\n return (\n \n
\n \n
\n )\n}\n",
+ "type": "registry:page",
+ "target": "app/auth/otp/page.tsx"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-nextjs/app/auth/verify-otp/page.tsx",
+ "content": "import { OTPVerifyForm } from '@/registry/default/blocks/passwordless-auth-nextjs/components/otp-verify-form'\nimport { Suspense } from 'react'\n\nfunction OTPVerifyContent() {\n return (\n \n
\n \n
\n )\n}\n\nexport default function OTPVerifyPage() {\n return (\n \n
\n \n
\n )\n}\n",
+ "type": "registry:page",
+ "target": "app/auth/passwordless/page.tsx"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-nextjs/app/auth/confirm/route.ts",
+ "content": "import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/server'\nimport { type EmailOtpType } from '@supabase/supabase-js'\nimport { type NextRequest, NextResponse } from 'next/server'\n\nexport async function GET(request: NextRequest) {\n const { searchParams } = new URL(request.url)\n const token_hash = searchParams.get('token_hash')\n const type = searchParams.get('type') as EmailOtpType | null\n const next = searchParams.get('next') ?? '/protected'\n\n if (token_hash && type) {\n const supabase = await createClient()\n\n const { error } = await supabase.auth.verifyOtp({\n type,\n token_hash,\n })\n if (!error) {\n // Redirect user to specified redirect URL or default to protected page\n return NextResponse.redirect(new URL(next, request.url))\n }\n }\n\n // Redirect the user to an error page with some instructions\n return NextResponse.redirect(new URL('/auth/error', request.url))\n}\n",
+ "type": "registry:page",
+ "target": "app/auth/confirm/route.ts"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-nextjs/app/auth/error/page.tsx",
+ "content": "import {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Button } from '@/registry/default/components/ui/button'\nimport Link from 'next/link'\n\nexport default function AuthErrorPage() {\n return (\n \n
\n \n
\n )\n}\n",
+ "type": "registry:page",
+ "target": "app/auth/error/page.tsx"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-nextjs/app/protected/page.tsx",
+ "content": "import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/server'\nimport { redirect } from 'next/navigation'\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Button } from '@/registry/default/components/ui/button'\n\nexport default async function ProtectedPage() {\n const supabase = await createClient()\n\n const {\n data: { user },\n } = await supabase.auth.getUser()\n\n if (!user) {\n redirect('/auth/passwordless')\n }\n\n const handleSignOut = async () => {\n 'use server'\n const supabase = await createClient()\n await supabase.auth.signOut()\n redirect('/auth/passwordless')\n }\n\n return (\n \n \n \n Authentication Error \n There was an error authenticating your account \n \n \n \n \n
\n \n
\n \n The authentication link may have expired or is invalid. Please try requesting a new\n one.\n
\n \n\n
\n )\n}\n",
+ "type": "registry:page",
+ "target": "app/protected/page.tsx"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-nextjs/middleware.ts",
+ "content": "import { createServerClient } from '@supabase/ssr'\nimport { NextResponse, type NextRequest } from 'next/server'\n\nexport async function middleware(request: NextRequest) {\n let supabaseResponse = NextResponse.next({\n request,\n })\n\n const supabase = createServerClient(\n process.env.NEXT_PUBLIC_SUPABASE_URL!,\n process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,\n {\n cookies: {\n getAll() {\n return request.cookies.getAll()\n },\n setAll(cookiesToSet) {\n cookiesToSet.forEach(({ name, value, options }) => request.cookies.set(name, value))\n supabaseResponse = NextResponse.next({\n request,\n })\n cookiesToSet.forEach(({ name, value, options }) =>\n supabaseResponse.cookies.set(name, value, options)\n )\n },\n },\n }\n )\n\n const {\n data: { user },\n } = await supabase.auth.getUser()\n\n // Protect /protected route\n if (request.nextUrl.pathname.startsWith('/protected') && !user) {\n const url = request.nextUrl.clone()\n url.pathname = '/auth/passwordless'\n return NextResponse.redirect(url)\n }\n\n return supabaseResponse\n}\n\nexport const config = {\n matcher: ['/((?!_next/static|_next/image|favicon.ico|.*\\\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)'],\n}\n",
+ "type": "registry:file",
+ "target": "middleware.ts"
+ },
+ {
+ "path": "registry/default/clients/nextjs/lib/supabase/client.ts",
+ "content": "import { createBrowserClient } from '@supabase/ssr'\n\nexport function createClient() {\n return createBrowserClient(\n process.env.NEXT_PUBLIC_SUPABASE_URL!,\n process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_OR_ANON_KEY!\n )\n}\n",
+ "type": "registry:lib"
+ },
+ {
+ "path": "registry/default/clients/nextjs/lib/supabase/middleware.ts",
+ "content": "import { createServerClient } from '@supabase/ssr'\nimport { NextResponse, type NextRequest } from 'next/server'\n\nexport async function updateSession(request: NextRequest) {\n let supabaseResponse = NextResponse.next({\n request,\n })\n\n // With Fluid compute, don't put this client in a global environment\n // variable. Always create a new one on each request.\n const supabase = createServerClient(\n process.env.NEXT_PUBLIC_SUPABASE_URL!,\n process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_OR_ANON_KEY!,\n {\n cookies: {\n getAll() {\n return request.cookies.getAll()\n },\n setAll(cookiesToSet) {\n cookiesToSet.forEach(({ name, value }) => request.cookies.set(name, value))\n supabaseResponse = NextResponse.next({\n request,\n })\n cookiesToSet.forEach(({ name, value, options }) =>\n supabaseResponse.cookies.set(name, value, options)\n )\n },\n },\n }\n )\n\n // Do not run code between createServerClient and\n // supabase.auth.getClaims(). A simple mistake could make it very hard to debug\n // issues with users being randomly logged out.\n\n // IMPORTANT: If you remove getClaims() and you use server-side rendering\n // with the Supabase client, your users may be randomly logged out.\n const { data } = await supabase.auth.getClaims()\n const user = data?.claims\n\n if (\n !user &&\n !request.nextUrl.pathname.startsWith('/login') &&\n !request.nextUrl.pathname.startsWith('/auth')\n ) {\n // no user, potentially respond by redirecting the user to the login page\n const url = request.nextUrl.clone()\n url.pathname = '/auth/login'\n return NextResponse.redirect(url)\n }\n\n // IMPORTANT: You *must* return the supabaseResponse object as it is.\n // If you're creating a new response object with NextResponse.next() make sure to:\n // 1. Pass the request in it, like so:\n // const myNewResponse = NextResponse.next({ request })\n // 2. Copy over the cookies, like so:\n // myNewResponse.cookies.setAll(supabaseResponse.cookies.getAll())\n // 3. Change the myNewResponse object to fit your needs, but avoid changing\n // the cookies!\n // 4. Finally:\n // return myNewResponse\n // If this is not done, you may be causing the browser and server to go out\n // of sync and terminate the user's session prematurely!\n\n return supabaseResponse\n}\n",
+ "type": "registry:lib"
+ },
+ {
+ "path": "registry/default/clients/nextjs/lib/supabase/server.ts",
+ "content": "import { createServerClient } from '@supabase/ssr'\nimport { cookies } from 'next/headers'\n\n/**\n * If using Fluid compute: Don't put this client in a global variable. Always create a new client within each\n * function when using it.\n */\nexport async function createClient() {\n const cookieStore = await cookies()\n\n return createServerClient(\n process.env.NEXT_PUBLIC_SUPABASE_URL!,\n process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_OR_ANON_KEY!,\n {\n cookies: {\n getAll() {\n return cookieStore.getAll()\n },\n setAll(cookiesToSet) {\n try {\n cookiesToSet.forEach(({ name, value, options }) =>\n cookieStore.set(name, value, options)\n )\n } catch {\n // The `setAll` method was called from a Server Component.\n // This can be ignored if you have middleware refreshing\n // user sessions.\n }\n },\n },\n }\n )\n}\n",
+ "type": "registry:lib"
+ }
+ ],
+ "envVars": {
+ "NEXT_PUBLIC_SUPABASE_URL": "",
+ "NEXT_PUBLIC_SUPABASE_PUBLISHABLE_OR_ANON_KEY": ""
+ },
+ "docs": "You'll need to set the following environment variables in your project: `NEXT_PUBLIC_SUPABASE_URL` and `NEXT_PUBLIC_SUPABASE_PUBLISHABLE_OR_ANON_KEY`."
+}
\ No newline at end of file
diff --git a/apps/ui-library/public/r/passwordless-auth-react-router.json b/apps/ui-library/public/r/passwordless-auth-react-router.json
new file mode 100644
index 00000000000..bd2abdc3592
--- /dev/null
+++ b/apps/ui-library/public/r/passwordless-auth-react-router.json
@@ -0,0 +1,86 @@
+{
+ "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+ "name": "passwordless-auth-react-router",
+ "type": "registry:block",
+ "title": "Passwordless Auth for React Router and Supabase",
+ "description": "Passwordless authentication for React Router using Supabase Auth. Supports both Magic Link and OTP (One-Time Password) login methods.",
+ "dependencies": [
+ "@supabase/ssr@latest",
+ "@react-router/dev@latest",
+ "@react-router/fs-routes@latest",
+ "@supabase/supabase-js@latest"
+ ],
+ "registryDependencies": [
+ "button",
+ "card",
+ "input",
+ "label"
+ ],
+ "files": [
+ {
+ "path": "registry/default/blocks/passwordless-auth-react-router/components/passwordless-login-form.tsx",
+ "content": "'use client'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/react-router/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\nimport { useNavigate } from 'react-router'\nimport { useState } from 'react'\n\ntype LoginMethod = 'magic-link' | 'otp'\n\ninterface PasswordlessLoginFormProps extends React.ComponentPropsWithoutRef<'div'> {\n method?: LoginMethod\n}\n\nexport function PasswordlessLoginForm({\n className,\n method = 'magic-link',\n ...props\n}: PasswordlessLoginFormProps) {\n const [email, setEmail] = useState('')\n const [error, setError] = useState\n \n \n Protected Page \n You are logged in \n \n \n \n \n
\n \n
\n \n Email
\n
\n {user.email}
\n\n
\n \n User ID
\n{user.id}
\n\n \n \n Sign up \n Sign in or create a new account \n \n \n {isMagicLinkSent ? (\n \n \n
\n )\n}\n",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-react-router/components/magic-link-form.tsx",
+ "content": "'use client'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/react-router/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\nimport { useState } from 'react'\n\nexport function MagicLinkForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n const [email, setEmail] = useState('')\n const [error, setError] = useState\n {\n setIsMagicLinkSent(false)\n setEmail('')\n }}\n >\n Send another link\n \n
\n ) : (\n \n )}\n Check your email!
\n\n We've sent a magic link to {email}. Click\n the link in the email to sign in.\n
\n\n \n \n Magic Link Login \n \n Enter your email to receive a magic link for passwordless login\n \n \n \n {isSuccess ? (\n \n \n
\n )\n}\n",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-react-router/components/otp-request-form.tsx",
+ "content": "'use client'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/react-router/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\nimport { useNavigate } from 'react-router'\nimport { useState } from 'react'\n\nexport function OTPRequestForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n const [email, setEmail] = useState('')\n const [error, setError] = useState\n
\n ) : (\n \n )}\n Check your email!
\n\n We've sent a magic link to {email}. Click the\n link in the email to sign in.\n
\n\n \n \n OTP Login \n \n Enter your email to receive a one-time password for passwordless login\n \n \n \n \n \n \n
\n )\n}\n",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-react-router/components/otp-verify-form.tsx",
+ "content": "'use client'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/react-router/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\nimport { useNavigate, useSearchParams } from 'react-router'\nimport { useState } from 'react'\n\nexport function OTPVerifyForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n const [searchParams] = useSearchParams()\n const email = searchParams.get('email') || ''\n const [otp, setOTP] = useState('')\n const [error, setError] = useState\n \n \n Verify Your Email \n \n Enter the 6-digit code sent to{' '}\n {email}\n \n \n \n \n \n \n
\n )\n}\n",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-react-router/app/routes/auth.confirm.tsx",
+ "content": "import { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'\nimport { type EmailOtpType } from '@supabase/supabase-js'\nimport { type LoaderFunctionArgs, redirect } from 'react-router'\n\nexport async function loader({ request }: LoaderFunctionArgs) {\n const requestUrl = new URL(request.url)\n const token_hash = requestUrl.searchParams.get('token_hash')\n const type = requestUrl.searchParams.get('type') as EmailOtpType | null\n const _next = requestUrl.searchParams.get('next')\n const next = _next?.startsWith('/') ? _next : '/protected'\n\n if (token_hash && type) {\n const { supabase, headers } = createClient(request)\n const { error } = await supabase.auth.verifyOtp({\n type,\n token_hash,\n })\n if (!error) {\n return redirect(next, { headers })\n } else {\n return redirect(`/auth/error?error=${error?.message}`)\n }\n }\n\n // redirect the user to an error page with some instructions\n return redirect(`/auth/error?error=No token hash or type`)\n}\n",
+ "type": "registry:file",
+ "target": "app/routes/auth.confirm.tsx"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-react-router/app/routes/auth.error.tsx",
+ "content": "import {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Button } from '@/registry/default/components/ui/button'\nimport { Link } from 'react-router'\n\nexport default function AuthErrorPage() {\n return (\n \n
\n )\n}\n",
+ "type": "registry:file",
+ "target": "app/routes/auth.error.tsx"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-react-router/app/routes/passwordless.tsx",
+ "content": "import { PasswordlessLoginForm } from '@/registry/default/blocks/passwordless-auth-react-router/components/passwordless-login-form'\n\nexport default function PasswordlessPage() {\n return (\n \n \n \n Authentication Error \n There was an error authenticating your account \n \n \n \n \n
\n \n
\n \n The authentication link may have expired or is invalid. Please try requesting a new\n one.\n
\n \n\n
\n )\n}\n",
+ "type": "registry:file",
+ "target": "app/routes/passwordless.tsx"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-react-router/app/routes/verify-otp.tsx",
+ "content": "import { OTPVerifyForm } from '@/registry/default/blocks/passwordless-auth-react-router/components/otp-verify-form'\n\nexport default function VerifyOTPPage() {\n return (\n \n
\n \n
\n )\n}\n",
+ "type": "registry:file",
+ "target": "app/routes/verify-otp.tsx"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-react-router/app/routes/protected.tsx",
+ "content": "import { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { type LoaderFunctionArgs, redirect, useLoaderData } from 'react-router'\n\nexport const loader = async ({ request }: LoaderFunctionArgs) => {\n const { supabase } = createClient(request)\n\n const { data, error } = await supabase.auth.getUser()\n if (error || !data?.user) {\n return redirect('/passwordless')\n }\n\n return data\n}\n\nexport default function ProtectedPage() {\n let data = useLoaderData\n
\n \n
\n )\n}\n",
+ "type": "registry:file",
+ "target": "app/routes/protected.tsx"
+ },
+ {
+ "path": "registry/default/clients/react-router/lib/supabase/client.ts",
+ "content": "/// \n \n \n Protected Page \n You are logged in \n \n \n \n \n
\n \n
\n \n Email
\n
\n {data.user.email}
\n\n
\n \n User ID
\n{data.user.id}
\n\n \n \n Sign up \n Sign in or create a new account \n \n \n {isMagicLinkSent ? (\n \n \n
\n )\n}\n",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-react/components/magic-link-form.tsx",
+ "content": "'use client'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/react/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\nimport { useState } from 'react'\n\nexport function MagicLinkForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n const [email, setEmail] = useState('')\n const [error, setError] = useState\n {\n setIsMagicLinkSent(false)\n setEmail('')\n }}\n >\n Send another link\n \n
\n ) : (\n \n )}\n Check your email!
\n\n We've sent a magic link to {email}. Click\n the link in the email to sign in.\n
\n\n \n \n Magic Link Login \n \n Enter your email to receive a magic link for passwordless login\n \n \n \n {isSuccess ? (\n \n \n
\n )\n}\n",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-react/components/otp-request-form.tsx",
+ "content": "'use client'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/react/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\nimport { useState } from 'react'\n\ninterface OTPRequestFormProps extends React.ComponentPropsWithoutRef<'div'> {\n onOtpRequested?: (email: string) => void\n}\n\nexport function OTPRequestForm({ className, onOtpRequested, ...props }: OTPRequestFormProps) {\n const [email, setEmail] = useState('')\n const [error, setError] = useState\n
\n ) : (\n \n )}\n Check your email!
\n\n We've sent a magic link to {email}. Click the\n link in the email to sign in.\n
\n\n \n \n OTP Login \n \n Enter your email to receive a one-time password for passwordless login\n \n \n \n \n \n \n
\n )\n}\n",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-react/components/otp-verify-form.tsx",
+ "content": "'use client'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/react/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\nimport { useState } from 'react'\n\ninterface OTPVerifyFormProps extends React.ComponentPropsWithoutRef<'div'> {\n email: string\n onVerified?: () => void\n}\n\nexport function OTPVerifyForm({ className, email, onVerified, ...props }: OTPVerifyFormProps) {\n const [otp, setOTP] = useState('')\n const [error, setError] = useState\n \n \n Verify Your Email \n \n Enter the 6-digit code sent to{' '}\n {email}\n \n \n \n \n \n \n
\n )\n}\n",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/clients/react/lib/supabase/client.ts",
+ "content": "import { createClient as createSupabaseClient } from '@supabase/supabase-js'\n\nexport function createClient() {\n return createSupabaseClient(\n import.meta.env.VITE_SUPABASE_URL!,\n import.meta.env.VITE_SUPABASE_PUBLISHABLE_OR_ANON_KEY!\n )\n}\n",
+ "type": "registry:lib"
+ }
+ ],
+ "envVars": {
+ "VITE_SUPABASE_URL": "",
+ "VITE_SUPABASE_PUBLISHABLE_OR_ANON_KEY": ""
+ },
+ "docs": "You'll need to set the following environment variables in your project: `VITE_SUPABASE_URL` and `VITE_SUPABASE_PUBLISHABLE_OR_ANON_KEY`."
+}
\ No newline at end of file
diff --git a/apps/ui-library/public/r/passwordless-auth-tanstack.json b/apps/ui-library/public/r/passwordless-auth-tanstack.json
new file mode 100644
index 00000000000..0d76a017882
--- /dev/null
+++ b/apps/ui-library/public/r/passwordless-auth-tanstack.json
@@ -0,0 +1,95 @@
+{
+ "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+ "name": "passwordless-auth-tanstack",
+ "type": "registry:block",
+ "title": "Passwordless Auth for TanStack and Supabase",
+ "description": "Passwordless authentication for TanStack using Supabase Auth. Supports both Magic Link and OTP (One-Time Password) login methods.",
+ "dependencies": [
+ "@supabase/ssr@latest",
+ "@supabase/supabase-js@latest"
+ ],
+ "registryDependencies": [
+ "button",
+ "card",
+ "input",
+ "label"
+ ],
+ "files": [
+ {
+ "path": "registry/default/blocks/passwordless-auth-tanstack/components/passwordless-login-form.tsx",
+ "content": "'use client'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/tanstack/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\nimport { useNavigate } from '@tanstack/react-router'\nimport { useState } from 'react'\n\ntype LoginMethod = 'magic-link' | 'otp'\n\ninterface PasswordlessLoginFormProps extends React.ComponentPropsWithoutRef<'div'> {\n method?: LoginMethod\n}\n\nexport function PasswordlessLoginForm({\n className,\n method = 'magic-link',\n ...props\n}: PasswordlessLoginFormProps) {\n const [email, setEmail] = useState('')\n const [error, setError] = useState\n \n \n Sign up \n Sign in or create a new account \n \n \n {isMagicLinkSent ? (\n \n \n
\n )\n}\n",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-tanstack/components/magic-link-form.tsx",
+ "content": "'use client'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/tanstack/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\nimport { useState } from 'react'\n\nexport function MagicLinkForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n const [email, setEmail] = useState('')\n const [error, setError] = useState\n {\n setIsMagicLinkSent(false)\n setEmail('')\n }}\n >\n Send another link\n \n
\n ) : (\n \n )}\n Check your email!
\n\n We've sent a magic link to {email}. Click\n the link in the email to sign in.\n
\n\n \n \n Magic Link Login \n \n Enter your email to receive a magic link for passwordless login\n \n \n \n {isSuccess ? (\n \n \n
\n )\n}\n",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-tanstack/components/otp-request-form.tsx",
+ "content": "'use client'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/tanstack/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\nimport { useNavigate } from '@tanstack/react-router'\nimport { useState } from 'react'\n\nexport function OTPRequestForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n const [email, setEmail] = useState('')\n const [error, setError] = useState\n
\n ) : (\n \n )}\n Check your email!
\n\n We've sent a magic link to {email}. Click the\n link in the email to sign in.\n
\n\n \n \n OTP Login \n \n Enter your email to receive a one-time password for passwordless login\n \n \n \n \n \n \n
\n )\n}\n",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-tanstack/components/otp-verify-form.tsx",
+ "content": "'use client'\n\nimport { cn } from '@/lib/utils'\nimport { createClient } from '@/registry/default/clients/tanstack/lib/supabase/client'\nimport { Button } from '@/registry/default/components/ui/button'\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Input } from '@/registry/default/components/ui/input'\nimport { Label } from '@/registry/default/components/ui/label'\nimport { useNavigate, useSearch } from '@tanstack/react-router'\nimport { useState } from 'react'\n\nexport function OTPVerifyForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {\n const search = useSearch({ strict: false })\n const email = (search as { email?: string })?.email || ''\n const [otp, setOTP] = useState('')\n const [error, setError] = useState\n \n \n Verify Your Email \n \n Enter the 6-digit code sent to{' '}\n {email}\n \n \n \n \n \n \n
\n )\n}\n",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-tanstack/routes/passwordless.tsx",
+ "content": "import { PasswordlessLoginForm } from '@/registry/default/blocks/passwordless-auth-tanstack/components/passwordless-login-form'\nimport { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/passwordless')({\n component: PasswordlessPage,\n})\n\nfunction PasswordlessPage() {\n return (\n \n
\n )\n}\n",
+ "type": "registry:file",
+ "target": "routes/passwordless.tsx"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-tanstack/routes/auth/error.tsx",
+ "content": "import {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from '@/registry/default/components/ui/card'\nimport { Button } from '@/registry/default/components/ui/button'\nimport { Link, createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/auth/error')({\n component: AuthErrorPage,\n})\n\nfunction AuthErrorPage() {\n return (\n \n
\n \n
\n )\n}\n",
+ "type": "registry:file",
+ "target": "routes/auth/error.tsx"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-tanstack/routes/_protected.tsx",
+ "content": "import { fetchUserServerFn } from '@/registry/default/blocks/passwordless-auth-tanstack/lib/supabase/fetch-user-server-fn'\nimport { createFileRoute, Outlet, redirect } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/_protected')({\n beforeLoad: async () => {\n const user = await fetchUserServerFn()\n if (!user) {\n throw redirect({\n to: '/passwordless',\n })\n }\n return { user }\n },\n component: () => \n \n \n Authentication Error \n There was an error authenticating your account \n \n \n \n \n
\n \n
\n \n The authentication link may have expired or is invalid. Please try requesting a new\n one.\n
\n \n\n
\n )\n}\n",
+ "type": "registry:file",
+ "target": "routes/_protected/protected.tsx"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-tanstack/routes/auth/confirm.ts",
+ "content": "import { createClient } from '@/registry/default/clients/tanstack/lib/supabase/server'\nimport { type EmailOtpType } from '@supabase/supabase-js'\nimport { createFileRoute, redirect } from '@tanstack/react-router'\nimport { createServerFn } from '@tanstack/react-start'\nimport { getWebRequest } from '@tanstack/react-start/server'\n\nconst confirmFn = createServerFn({ method: 'GET' })\n .validator((searchParams: unknown) => {\n if (\n searchParams &&\n typeof searchParams === 'object' &&\n 'token_hash' in searchParams &&\n 'type' in searchParams\n ) {\n return searchParams\n }\n throw new Error('Invalid search params')\n })\n .handler(async (ctx) => {\n const request = getWebRequest()\n\n if (!request) {\n throw redirect({ to: `/auth/error`, search: { error: 'No request' } })\n }\n\n const searchParams = ctx.data\n const token_hash = searchParams['token_hash'] as string\n const type = searchParams['type'] as EmailOtpType | null\n const _next = searchParams['next'] as string | undefined\n const next = _next?.startsWith('/') ? _next : '/protected'\n\n if (token_hash && type) {\n const supabase = createClient()\n\n const { error } = await supabase.auth.verifyOtp({\n type,\n token_hash,\n })\n if (!error) {\n // redirect user to specified redirect URL or protected page\n throw redirect({ href: next })\n } else {\n // redirect the user to an error page with some instructions\n throw redirect({\n to: `/auth/error`,\n search: { error: error?.message },\n })\n }\n }\n\n // redirect the user to an error page with some instructions\n throw redirect({\n to: `/auth/error`,\n search: { error: 'No token hash or type' },\n })\n })\n\nexport const Route = createFileRoute('/auth/confirm')({\n preload: false,\n loader: (opts) => confirmFn({ data: opts.location.search }),\n})\n",
+ "type": "registry:file",
+ "target": "routes/auth/confirm.ts"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-tanstack/routes/verify-otp.tsx",
+ "content": "import { OTPVerifyForm } from '@/registry/default/blocks/passwordless-auth-tanstack/components/otp-verify-form'\nimport { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/verify-otp')({\n component: VerifyOTPPage,\n validateSearch: (search: Record\n \n \n Protected Page \n You are logged in \n \n \n \n \n
\n \n
\n \n Email
\n
\n {user.email}
\n\n
\n \n User ID
\n{user.id}
\n\n
\n )\n}\n",
+ "type": "registry:file",
+ "target": "routes/verify-otp.tsx"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-tanstack/lib/supabase/fetch-user-server-fn.ts",
+ "content": "import { createClient } from '@/registry/default/clients/tanstack/lib/supabase/server'\nimport type { Factor, User } from '@supabase/supabase-js'\nimport { createServerFn } from '@tanstack/react-start'\ntype SSRSafeUser = User & {\n factors: (Factor & { factor_type: 'phone' | 'totp' })[]\n}\n\nexport const fetchUserServerFn: () => Promise\n
\n \n \n Error fetching suggestions \n \n {(error as any)?.message || 'An unexpected error occurred. Please try again.'}\n \n \n )}\n {suggestions && (\n \n No suggestions found \n \n Your project looks good! No suggestions at this time.\n \n \n )}\n
\n )}\n \n )\n}\n",
+ "content": "'use client'\n\nimport { useGetSuggestions } from '@/registry/default/platform/platform-kit-nextjs/hooks/use-suggestions'\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/default/components/ui/alert'\nimport { Terminal } from 'lucide-react'\nimport { Badge } from '@/registry/default/components/ui/badge'\nimport { useMemo } from 'react'\n\nimport ReactMarkdown from 'react-markdown'\nimport { Skeleton } from '@/registry/default/components/ui/skeleton'\n\nexport function SuggestionsManager({ projectRef }: { projectRef: string }) {\n const { data: suggestions, isLoading, error } = useGetSuggestions(projectRef)\n\n const sortedSuggestions = useMemo(() => {\n if (!suggestions) return []\n const levelOrder = { ERROR: 1, WARN: 2, INFO: 3 }\n return [...suggestions].sort((a: any, b: any) => {\n const levelA = levelOrder[a.level as keyof typeof levelOrder] || 99\n const levelB = levelOrder[b.level as keyof typeof levelOrder] || 99\n return levelA - levelB\n })\n }, [suggestions])\n\n const getBadgeVariant = (level: 'ERROR' | 'WARN' | 'INFO') => {\n switch (level) {\n case 'ERROR':\n return 'destructive'\n case 'WARN':\n return 'secondary'\n default:\n return 'outline'\n }\n }\n\n return (\n Suggestions
\n\n Improve your project's security and performance.\n
\n {isLoading && (\n\n
\n )}\n {error && (\n \n {sortedSuggestions.length > 0 ? (\n
\n ) : (\n \n {sortedSuggestions.map((suggestion: any) => (\n \n
\n ))}\n \n
\n \n
\n {suggestion.title}
\n\n \n {suggestion.level}\n \n {suggestion.type && (\n \n {suggestion.type.charAt(0).toUpperCase() + suggestion.type.slice(1)}\n \n )}\n
\n \n \n {children}\n \n ) : (\n
\n \n {children}\n \n )\n },\n }}\n >\n {suggestion.detail}\n \n \n \n Error fetching suggestions \n \n {(error as any)?.message || 'An unexpected error occurred. Please try again.'}\n \n \n )}\n {suggestions && (\n \n No suggestions found \n \n Your project looks good! No suggestions at this time.\n \n \n )}\n
\n )}\n \n )\n}\n",
"type": "registry:component"
},
{
diff --git a/apps/ui-library/public/r/registry.json b/apps/ui-library/public/r/registry.json
index 595c4484a22..5943b01a622 100644
--- a/apps/ui-library/public/r/registry.json
+++ b/apps/ui-library/public/r/registry.json
@@ -319,6 +319,295 @@
"VITE_SUPABASE_PUBLISHABLE_OR_ANON_KEY": ""
}
},
+ {
+ "name": "passwordless-auth-nextjs",
+ "type": "registry:block",
+ "title": "Passwordless Auth for Next.js and Supabase",
+ "description": "Passwordless authentication for Next.js using Supabase Auth. Supports both Magic Link and OTP (One-Time Password) login methods.",
+ "registryDependencies": [
+ "button",
+ "card",
+ "input",
+ "label",
+ "link"
+ ],
+ "dependencies": [
+ "@supabase/ssr@latest",
+ "@supabase/supabase-js@latest"
+ ],
+ "files": [
+ {
+ "path": "registry/default/blocks/passwordless-auth-nextjs/components/magic-link-form.tsx",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-nextjs/components/otp-request-form.tsx",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-nextjs/components/otp-verify-form.tsx",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-nextjs/components/passwordless-login-form.tsx",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-nextjs/app/auth/magic-link/page.tsx",
+ "type": "registry:page",
+ "target": "app/auth/magic-link/page.tsx"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-nextjs/app/auth/otp/page.tsx",
+ "type": "registry:page",
+ "target": "app/auth/otp/page.tsx"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-nextjs/app/auth/verify-otp/page.tsx",
+ "type": "registry:page",
+ "target": "app/auth/verify-otp/page.tsx"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-nextjs/app/auth/passwordless/page.tsx",
+ "type": "registry:page",
+ "target": "app/auth/passwordless/page.tsx"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-nextjs/app/auth/confirm/route.ts",
+ "type": "registry:page",
+ "target": "app/auth/confirm/route.ts"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-nextjs/app/auth/error/page.tsx",
+ "type": "registry:page",
+ "target": "app/auth/error/page.tsx"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-nextjs/app/protected/page.tsx",
+ "type": "registry:page",
+ "target": "app/protected/page.tsx"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-nextjs/middleware.ts",
+ "type": "registry:file",
+ "target": "middleware.ts"
+ },
+ {
+ "path": "registry/default/clients/nextjs/lib/supabase/client.ts",
+ "type": "registry:lib"
+ },
+ {
+ "path": "registry/default/clients/nextjs/lib/supabase/middleware.ts",
+ "type": "registry:lib"
+ },
+ {
+ "path": "registry/default/clients/nextjs/lib/supabase/server.ts",
+ "type": "registry:lib"
+ }
+ ],
+ "docs": "You'll need to set the following environment variables in your project: `NEXT_PUBLIC_SUPABASE_URL` and `NEXT_PUBLIC_SUPABASE_PUBLISHABLE_OR_ANON_KEY`.",
+ "envVars": {
+ "NEXT_PUBLIC_SUPABASE_URL": "",
+ "NEXT_PUBLIC_SUPABASE_PUBLISHABLE_OR_ANON_KEY": ""
+ }
+ },
+ {
+ "name": "passwordless-auth-react",
+ "type": "registry:block",
+ "title": "Passwordless Auth for React and Supabase",
+ "description": "Passwordless authentication for React using Supabase Auth. Supports both Magic Link and OTP (One-Time Password) login methods. Components only, no routing included.",
+ "registryDependencies": [
+ "button",
+ "card",
+ "input",
+ "label"
+ ],
+ "dependencies": [
+ "@supabase/supabase-js@latest"
+ ],
+ "files": [
+ {
+ "path": "registry/default/blocks/passwordless-auth-react/components/passwordless-login-form.tsx",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-react/components/magic-link-form.tsx",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-react/components/otp-request-form.tsx",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-react/components/otp-verify-form.tsx",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/clients/react/lib/supabase/client.ts",
+ "type": "registry:lib"
+ }
+ ],
+ "docs": "You'll need to set the following environment variables in your project: `VITE_SUPABASE_URL` and `VITE_SUPABASE_PUBLISHABLE_OR_ANON_KEY`.",
+ "envVars": {
+ "VITE_SUPABASE_URL": "",
+ "VITE_SUPABASE_PUBLISHABLE_OR_ANON_KEY": ""
+ }
+ },
+ {
+ "name": "passwordless-auth-react-router",
+ "type": "registry:block",
+ "title": "Passwordless Auth for React Router and Supabase",
+ "description": "Passwordless authentication for React Router using Supabase Auth. Supports both Magic Link and OTP (One-Time Password) login methods.",
+ "registryDependencies": [
+ "button",
+ "card",
+ "input",
+ "label"
+ ],
+ "dependencies": [
+ "@supabase/ssr@latest",
+ "@react-router/dev@latest",
+ "@react-router/fs-routes@latest",
+ "@supabase/supabase-js@latest"
+ ],
+ "files": [
+ {
+ "path": "registry/default/blocks/passwordless-auth-react-router/components/passwordless-login-form.tsx",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-react-router/components/magic-link-form.tsx",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-react-router/components/otp-request-form.tsx",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-react-router/components/otp-verify-form.tsx",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-react-router/app/routes/auth.confirm.tsx",
+ "type": "registry:file",
+ "target": "app/routes/auth.confirm.tsx"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-react-router/app/routes/auth.error.tsx",
+ "type": "registry:file",
+ "target": "app/routes/auth.error.tsx"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-react-router/app/routes/passwordless.tsx",
+ "type": "registry:file",
+ "target": "app/routes/passwordless.tsx"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-react-router/app/routes/verify-otp.tsx",
+ "type": "registry:file",
+ "target": "app/routes/verify-otp.tsx"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-react-router/app/routes/protected.tsx",
+ "type": "registry:file",
+ "target": "app/routes/protected.tsx"
+ },
+ {
+ "path": "registry/default/clients/react-router/lib/supabase/client.ts",
+ "type": "registry:lib"
+ },
+ {
+ "path": "registry/default/clients/react-router/lib/supabase/server.ts",
+ "type": "registry:lib"
+ }
+ ],
+ "docs": "You'll need to set the following environment variables in your project: `VITE_SUPABASE_URL` and `VITE_SUPABASE_PUBLISHABLE_OR_ANON_KEY`.",
+ "envVars": {
+ "VITE_SUPABASE_URL": "",
+ "VITE_SUPABASE_PUBLISHABLE_OR_ANON_KEY": ""
+ }
+ },
+ {
+ "name": "passwordless-auth-tanstack",
+ "type": "registry:block",
+ "title": "Passwordless Auth for TanStack and Supabase",
+ "description": "Passwordless authentication for TanStack using Supabase Auth. Supports both Magic Link and OTP (One-Time Password) login methods.",
+ "registryDependencies": [
+ "button",
+ "card",
+ "input",
+ "label"
+ ],
+ "dependencies": [
+ "@supabase/ssr@latest",
+ "@supabase/supabase-js@latest"
+ ],
+ "files": [
+ {
+ "path": "registry/default/blocks/passwordless-auth-tanstack/components/passwordless-login-form.tsx",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-tanstack/components/magic-link-form.tsx",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-tanstack/components/otp-request-form.tsx",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-tanstack/components/otp-verify-form.tsx",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-tanstack/routes/passwordless.tsx",
+ "type": "registry:file",
+ "target": "routes/passwordless.tsx"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-tanstack/routes/auth/error.tsx",
+ "type": "registry:file",
+ "target": "routes/auth/error.tsx"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-tanstack/routes/_protected.tsx",
+ "type": "registry:file",
+ "target": "routes/_protected.tsx"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-tanstack/routes/_protected/protected.tsx",
+ "type": "registry:file",
+ "target": "routes/_protected/protected.tsx"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-tanstack/routes/auth/confirm.ts",
+ "type": "registry:file",
+ "target": "routes/auth/confirm.ts"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-tanstack/routes/verify-otp.tsx",
+ "type": "registry:file",
+ "target": "routes/verify-otp.tsx"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-tanstack/lib/supabase/fetch-user-server-fn.ts",
+ "type": "registry:lib"
+ },
+ {
+ "path": "registry/default/clients/tanstack/lib/supabase/client.ts",
+ "type": "registry:lib"
+ },
+ {
+ "path": "registry/default/clients/tanstack/lib/supabase/server.ts",
+ "type": "registry:lib"
+ }
+ ],
+ "docs": "You'll need to set the following environment variables in your project: `VITE_SUPABASE_URL` and `VITE_SUPABASE_PUBLISHABLE_OR_ANON_KEY`.",
+ "envVars": {
+ "VITE_SUPABASE_URL": "",
+ "VITE_SUPABASE_PUBLISHABLE_OR_ANON_KEY": ""
+ }
+ },
{
"name": "social-auth-nextjs",
"type": "registry:block",
diff --git a/apps/ui-library/registry/blocks.ts b/apps/ui-library/registry/blocks.ts
index fc993d76be1..657601e1e8e 100644
--- a/apps/ui-library/registry/blocks.ts
+++ b/apps/ui-library/registry/blocks.ts
@@ -14,6 +14,11 @@ import passwordBasedAuthReactRouter from './default/blocks/password-based-auth-r
import passwordBasedAuthReact from './default/blocks/password-based-auth-react/registry-item.json' with { type: 'json' }
import passwordBasedAuthTanstack from './default/blocks/password-based-auth-tanstack/registry-item.json' with { type: 'json' }
+import passwordlessAuthNextjs from './default/blocks/passwordless-auth-nextjs/registry-item.json' with { type: 'json' }
+import passwordlessAuthReactRouter from './default/blocks/passwordless-auth-react-router/registry-item.json' with { type: 'json' }
+import passwordlessAuthReact from './default/blocks/passwordless-auth-react/registry-item.json' with { type: 'json' }
+import passwordlessAuthTanstack from './default/blocks/passwordless-auth-tanstack/registry-item.json' with { type: 'json' }
+
import socialAuthNextjs from './default/blocks/social-auth-nextjs/registry-item.json' with { type: 'json' }
import socialAuthReactRouter from './default/blocks/social-auth-react-router/registry-item.json' with { type: 'json' }
import socialAuthReact from './default/blocks/social-auth-react/registry-item.json' with { type: 'json' }
@@ -42,6 +47,11 @@ export const blocks = [
registryItemAppend(passwordBasedAuthReactRouter as RegistryItem, [reactRouterClient!]),
registryItemAppend(passwordBasedAuthTanstack as RegistryItem, [tanstackClient!]),
+ registryItemAppend(passwordlessAuthNextjs as RegistryItem, [nextjsClient!]),
+ registryItemAppend(passwordlessAuthReact as RegistryItem, [reactClient!]),
+ registryItemAppend(passwordlessAuthReactRouter as RegistryItem, [reactRouterClient!]),
+ registryItemAppend(passwordlessAuthTanstack as RegistryItem, [tanstackClient!]),
+
registryItemAppend(socialAuthNextjs as RegistryItem, [nextjsClient!]),
registryItemAppend(socialAuthReact as RegistryItem, [reactClient!]),
registryItemAppend(socialAuthReactRouter as RegistryItem, [reactRouterClient!]),
diff --git a/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/GETTING_STARTED.md b/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/GETTING_STARTED.md
new file mode 100644
index 00000000000..fb8e67888da
--- /dev/null
+++ b/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/GETTING_STARTED.md
@@ -0,0 +1,398 @@
+# Getting Started with Passwordless Authentication
+
+This guide will help you set up passwordless authentication in your Next.js application in under 10 minutes.
+
+## Prerequisites
+
+- A Next.js 13+ application (App Router)
+- A Supabase project ([create one here](https://supabase.com/dashboard))
+- Node.js 18+ installed
+
+## Step-by-Step Setup
+
+### Step 1: Install Dependencies
+
+```bash
+npm install @supabase/supabase-js @supabase/ssr
+```
+
+### Step 2: Configure Environment Variables
+
+Create a `.env.local` file in your project root:
+
+```env
+NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
+NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
+```
+
+You can find these values in your Supabase Dashboard:
+
+1. Go to [Supabase Dashboard](https://supabase.com/dashboard)
+2. Select your project
+3. Go to **Settings** > **API**
+4. Copy the **Project URL** and **anon/public key**
+
+### Step 3: Configure Supabase Authentication
+
+#### A. Enable Email Authentication
+
+1. In Supabase Dashboard, go to **Authentication** > **Providers**
+2. Ensure **Email** is enabled (it's enabled by default)
+
+#### B. Configure Redirect URLs
+
+1. Go to **Authentication** > **URL Configuration**
+2. Add your redirect URLs:
+
+**For Development:**
+
+```
+Site URL: http://localhost:3000
+Redirect URLs:
+ - http://localhost:3000/auth/confirm
+ - http://localhost:3000/protected
+```
+
+**For Production:**
+
+```
+Site URL: https://yourdomain.com
+Redirect URLs:
+ - https://yourdomain.com/auth/confirm
+ - https://yourdomain.com/protected
+```
+
+#### C. Configure Email Template (Choose One)
+
+**Option 1: Magic Link (Default)**
+Go to **Authentication** > **Email Templates** > **Magic Link**
+
+Use this template:
+
+```html
+Suggestions
\n\n Improve your project's security and performance.\n
\n {isLoading && (\n\n
\n )}\n {error && (\n \n {sortedSuggestions.length > 0 ? (\n
\n ) : (\n \n {sortedSuggestions.map((suggestion: any) => (\n \n
\n ))}\n \n
\n \n
\n {suggestion.title}
\n\n \n {suggestion.level}\n \n {suggestion.type && (\n \n {suggestion.type.charAt(0).toUpperCase() + suggestion.type.slice(1)}\n \n )}\n
\n \n \n {children}\n \n ) : (\n
\n \n {children}\n \n )\n },\n }}\n >\n {suggestion.detail}\n \n Magic Link
+Follow this link to login:
+ +``` + +**Option 2: OTP** +Go to **Authentication** > **Email Templates** > **Magic Link** (yes, same template) + +Replace with this template: + +```html +One Time Login Code
+Please enter this code to sign in:
+{{ .Token }}
+This code will expire in 1 hour.
+``` + +**Option 3: Support Both** +You can create a more sophisticated template that shows both the token and link. + +### Step 4: Create Supabase Client + +Create `lib/supabase/client.ts`: + +```typescript +import { createBrowserClient } from '@supabase/ssr' + +export function createClient() { + return createBrowserClient( + process.env.NEXT_PUBLIC_SUPABASE_URL!, + process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY! + ) +} +``` + +Create `lib/supabase/server.ts`: + +```typescript +import { createServerClient } from '@supabase/ssr' +import { cookies } from 'next/headers' + +export async function createClient() { + const cookieStore = await cookies() + + return createServerClient( + process.env.NEXT_PUBLIC_SUPABASE_URL!, + process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, + { + cookies: { + getAll() { + return cookieStore.getAll() + }, + setAll(cookiesToSet) { + try { + cookiesToSet.forEach(({ name, value, options }) => + cookieStore.set(name, value, options) + ) + } catch { + // The `setAll` method was called from a Server Component. + // This can be ignored if you have middleware refreshing + // user sessions. + } + }, + }, + } + ) +} +``` + +### Step 5: Install UI Components + +This block uses shadcn/ui components. Install the required components: + +```bash +npx shadcn@latest add button card input label +``` + +### Step 6: Copy the Components + +Copy the passwordless authentication components to your project: + +```bash +# Create directories +mkdir -p components/auth +mkdir -p app/auth/{magic-link,otp,verify-otp,confirm,error,passwordless} +mkdir -p app/protected + +# Copy components (adjust paths as needed) +cp registry/default/blocks/passwordless-auth-nextjs/components/*.tsx components/auth/ +cp registry/default/blocks/passwordless-auth-nextjs/app/auth/*/page.tsx app/auth/ +cp registry/default/blocks/passwordless-auth-nextjs/app/auth/confirm/route.ts app/auth/confirm/ +``` + +Or manually copy the files from the `passwordless-auth-nextjs` block. + +### Step 7: Add Middleware (Optional but Recommended) + +Create or update `middleware.ts` in your project root: + +```typescript +import { createServerClient } from '@supabase/ssr' +import { NextResponse, type NextRequest } from 'next/server' + +export async function middleware(request: NextRequest) { + let supabaseResponse = NextResponse.next({ + request, + }) + + const supabase = createServerClient( + process.env.NEXT_PUBLIC_SUPABASE_URL!, + process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, + { + cookies: { + getAll() { + return request.cookies.getAll() + }, + setAll(cookiesToSet) { + cookiesToSet.forEach(({ name, value, options }) => request.cookies.set(name, value)) + supabaseResponse = NextResponse.next({ + request, + }) + cookiesToSet.forEach(({ name, value, options }) => + supabaseResponse.cookies.set(name, value, options) + ) + }, + }, + } + ) + + const { + data: { user }, + } = await supabase.auth.getUser() + + // Protect routes that start with /protected + if (request.nextUrl.pathname.startsWith('/protected') && !user) { + const url = request.nextUrl.clone() + url.pathname = '/auth/passwordless' + return NextResponse.redirect(url) + } + + return supabaseResponse +} + +export const config = { + matcher: ['/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)'], +} +``` + +### Step 8: Create Your First Login Page + +Choose one of the following implementations: + +#### Option A: PasswordlessLoginForm with Magic Link (Recommended) + +Create `app/auth/login/page.tsx`: + +```tsx +import { PasswordlessLoginForm } from '@/components/auth/passwordless-login-form' + +export default function LoginPage() { + return ( +
+
+ )
+}
+```
+
+**Note:** You can change `method="magic-link"` to `method="otp"` to use OTP authentication instead.
+
+#### Option B: Magic Link Only
+
+Create `app/auth/login/page.tsx`:
+
+```tsx
+import { MagicLinkForm } from '@/components/auth/magic-link-form'
+
+export default function LoginPage() {
+ return (
+
+
+
+
+ )
+}
+```
+
+#### Option C: OTP Only
+
+Create `app/auth/login/page.tsx`:
+
+```tsx
+import { OTPRequestForm } from '@/components/auth/otp-request-form'
+
+export default function LoginPage() {
+ return (
+
+
+
+
+ )
+}
+```
+
+### Step 9: Create a Protected Page
+
+Create `app/protected/page.tsx`:
+
+```tsx
+import { createClient } from '@/lib/supabase/server'
+import { redirect } from 'next/navigation'
+import { Button } from '@/components/ui/button'
+
+export default async function ProtectedPage() {
+ const supabase = await createClient()
+ const {
+ data: { user },
+ } = await supabase.auth.getUser()
+
+ if (!user) {
+ redirect('/auth/login')
+ }
+
+ const handleSignOut = async () => {
+ 'use server'
+ const supabase = await createClient()
+ await supabase.auth.signOut()
+ redirect('/auth/login')
+ }
+
+ return (
+
+
+
+
+ )
+}
+```
+
+### Step 10: Test Your Implementation
+
+1. Start your development server:
+
+```bash
+npm run dev
+```
+
+2. Navigate to `http://localhost:3000/auth/login`
+
+3. Enter your email address
+
+4. Check your email for either:
+
+ - A magic link (click it to sign in)
+ - An OTP code (enter it on the verification page)
+
+5. You should be redirected to `/protected` after successful authentication
+
+## Common Issues and Solutions
+
+### Issue: Email not arriving
+
+**Solutions:**
+
+- Check your spam folder
+- Verify email provider settings in Supabase Dashboard
+- Check Supabase logs: **Authentication** > **Logs**
+
+### Issue: "Invalid redirect URL" error
+
+**Solutions:**
+
+- Verify the redirect URL is whitelisted in Supabase Dashboard
+- Ensure the URL matches exactly (including http/https)
+- Check for trailing slashes
+
+### Issue: "User not found" error
+
+**Solutions:**
+
+- Set `shouldCreateUser: true` to allow automatic user creation
+- Or manually create the user in Supabase Dashboard first
+
+### Issue: Middleware not working
+
+**Solutions:**
+
+- Ensure middleware.ts is in the project root
+- Check the matcher configuration
+- Restart your development server
+
+## Next Steps
+
+1. **Customize the UI**: Modify the components to match your brand
+2. **Add Analytics**: Track authentication events
+3. **Configure Email Templates**: Customize the email design
+4. **Add Social Auth**: Combine with OAuth providers
+5. **Implement Role-Based Access**: Add user roles and permissions
+
+## Additional Resources
+
+- [Full Documentation](./README.md)
+- [Usage Guide](./USAGE.md)
+- [Supabase Auth Docs](https://supabase.com/docs/guides/auth)
+- [Next.js App Router](https://nextjs.org/docs/app)
+
+## Need Help?
+
+- [Supabase Discord](https://discord.supabase.com)
+- [GitHub Issues](https://github.com/supabase/supabase/issues)
+- [Supabase Documentation](https://supabase.com/docs)
+
+---
+
+**Congratulations!** You now have passwordless email authentication set up in your Next.js application. 🎉
diff --git a/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/INDEX.md b/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/INDEX.md
new file mode 100644
index 00000000000..db24cb479d8
--- /dev/null
+++ b/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/INDEX.md
@@ -0,0 +1,286 @@
+# Passwordless Authentication - Complete Documentation Index
+
+## Overview
+
+This is a complete passwordless authentication solution for Next.js applications using Supabase Auth. It supports both Magic Link and OTP (One-Time Password) authentication methods.
+
+## Documentation Files
+
+### 📚 Getting Started
+- **[GETTING_STARTED.md](./GETTING_STARTED.md)** - Step-by-step setup guide (10 minutes)
+ - Installation instructions
+ - Configuration steps
+ - Your first login page
+ - Troubleshooting
+
+### 📖 Main Documentation
+- **[README.md](./README.md)** - Complete feature documentation
+ - Features overview
+ - Components reference
+ - Setup instructions
+ - Configuration options
+ - Security considerations
+
+### 🎯 Quick Reference
+- **[QUICK_REFERENCE.md](./QUICK_REFERENCE.md)** - Quick lookup guide
+ - Component comparison table
+ - API reference
+ - Configuration checklist
+ - Common code snippets
+ - Error messages reference
+
+### 📘 Usage Guide
+- **[USAGE.md](./USAGE.md)** - Detailed usage instructions
+ - Authentication methods comparison
+ - Component API
+ - Advanced configuration
+ - Best practices
+ - Migration guides
+
+### 🔧 Integration Examples
+- **[INTEGRATION_EXAMPLES.md](./INTEGRATION_EXAMPLES.md)** - Real-world implementations
+ - E-commerce application
+ - SaaS dashboard
+ - Blog platform
+ - Multi-tenant application
+ - Progressive Web App
+
+## Components
+
+### Core Components
+
+#### 1. PasswordlessLoginForm (Recommended)
+A unified form supporting both Magic Link and OTP authentication via the `method` prop.
+
+**File**: `components/passwordless-login-form.tsx`
+
+**Use when**: You want a single form that can handle either authentication method.
+
+```tsx
+import { PasswordlessLoginForm } from '@/components/auth/passwordless-login-form'
+
+// Magic Link (default)
+
+
+ Protected Page
+Welcome, {user.email}!
+ +
+
+ )
+}
+```
+
+## SaaS Dashboard
+
+### Scenario
+
+Multi-step onboarding after first login with role-based access.
+
+### Implementation
+
+**app/auth/login/page.tsx**
+
+```tsx
+import { PasswordlessLoginForm } from '@/components/auth/passwordless-login-form'
+
+export default function LoginPage() {
+ return (
+
+
+ Sign in to continue
+Sign in to view your cart and complete checkout
+
+ {/* Left side - Login form */}
+
+ )
+}
+```
+
+**lib/auth/check-onboarding.ts**
+
+```typescript
+import { createClient } from '@/lib/supabase/server'
+
+export async function checkOnboardingStatus() {
+ const supabase = await createClient()
+ const {
+ data: { user },
+ } = await supabase.auth.getUser()
+
+ if (!user) return null
+
+ // Check if user has completed onboarding
+ const { data: profile } = await supabase
+ .from('profiles')
+ .select('onboarding_completed')
+ .eq('id', user.id)
+ .single()
+
+ return {
+ user,
+ needsOnboarding: !profile?.onboarding_completed,
+ }
+}
+```
+
+**app/dashboard/page.tsx**
+
+```tsx
+import { checkOnboardingStatus } from '@/lib/auth/check-onboarding'
+import { redirect } from 'next/navigation'
+import { DashboardContent } from '@/components/dashboard-content'
+
+export default async function DashboardPage() {
+ const status = await checkOnboardingStatus()
+
+ if (!status) {
+ redirect('/auth/login?redirect=/dashboard')
+ }
+
+ if (status.needsOnboarding) {
+ redirect('/onboarding')
+ }
+
+ return
+
+
+ {/* Right side - Marketing content */}
+
+
+
+
+ Welcome back
+Sign in to your account to continue
+
+
+
+
+ Secure, passwordless authentication
+No passwords to remember. Just enter your email.
+
+
+ )
+}
+```
+
+## Multi-tenant Application
+
+### Scenario
+
+Different authentication flows for different organizations/tenants.
+
+### Implementation
+
+**app/[tenant]/auth/login/page.tsx**
+
+```tsx
+import { PasswordlessLoginForm } from '@/components/auth/passwordless-login-form'
+import { notFound } from 'next/navigation'
+import { getTenantConfig } from '@/lib/tenants'
+
+export default async function TenantLoginPage({ params }: { params: { tenant: string } }) {
+ const tenantConfig = await getTenantConfig(params.tenant)
+
+ if (!tenantConfig) {
+ notFound()
+ }
+
+ return (
+ {message}
+
+
+
+
+
+
+ )
+}
+```
+
+**lib/tenants.ts**
+
+```typescript
+import { createClient } from '@/lib/supabase/server'
+
+export async function getTenantConfig(slug: string) {
+ const supabase = await createClient()
+
+ const { data: tenant } = await supabase.from('tenants').select('*').eq('slug', slug).single()
+
+ return tenant
+}
+
+export async function getUserTenant(userId: string) {
+ const supabase = await createClient()
+
+ const { data } = await supabase
+ .from('user_tenants')
+ .select('tenant:tenants(*)')
+ .eq('user_id', userId)
+ .single()
+
+ return data?.tenant
+}
+```
+
+**middleware.ts**
+
+```typescript
+import { createServerClient } from '@supabase/ssr'
+import { NextResponse, type NextRequest } from 'next/server'
+
+export async function middleware(request: NextRequest) {
+ let supabaseResponse = NextResponse.next({ request })
+
+ const supabase = createServerClient(
+ process.env.NEXT_PUBLIC_SUPABASE_URL!,
+ process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+ {
+ cookies: {
+ getAll() {
+ return request.cookies.getAll()
+ },
+ setAll(cookiesToSet) {
+ cookiesToSet.forEach(({ name, value }) => request.cookies.set(name, value))
+ supabaseResponse = NextResponse.next({ request })
+ cookiesToSet.forEach(({ name, value, options }) =>
+ supabaseResponse.cookies.set(name, value, options)
+ )
+ },
+ },
+ }
+ )
+
+ const {
+ data: { user },
+ } = await supabase.auth.getUser()
+
+ // Extract tenant from URL
+ const pathParts = request.nextUrl.pathname.split('/')
+ const tenant = pathParts[1]
+
+ // Protected tenant routes
+ if (pathParts[2] === 'dashboard' && !user) {
+ return NextResponse.redirect(new URL(`/${tenant}/auth/login`, request.url))
+ }
+
+ // Verify user belongs to tenant
+ if (user && pathParts[2] === 'dashboard') {
+ const { data: membership } = await supabase
+ .from('user_tenants')
+ .select('tenant_id, tenants(slug)')
+ .eq('user_id', user.id)
+ .single()
+
+ if (membership?.tenants?.slug !== tenant) {
+ return NextResponse.redirect(new URL(`/${tenant}/auth/login?error=unauthorized`, request.url))
+ }
+ }
+
+ return supabaseResponse
+}
+
+export const config = {
+ matcher: ['/:tenant/dashboard/:path*', '/:tenant/auth/:path*'],
+}
+```
+
+## Progressive Web App
+
+### Scenario
+
+Offline-first PWA with authentication state persistence.
+
+### Implementation
+
+**lib/auth/auth-provider.tsx**
+
+```tsx
+'use client'
+
+import { createContext, useContext, useEffect, useState } from 'react'
+import { createClient } from '@/lib/supabase/client'
+import type { User } from '@supabase/supabase-js'
+
+interface AuthContextType {
+ user: User | null
+ loading: boolean
+ signOut: () => Promise
+ {/* Tenant branding */}
+
+
+ 
+
+
+ {tenantConfig.name}
+Sign in to your account
+
+ Need help?
+
+ Loading...
+ }
+
+ if (!user) {
+ return null
+ }
+
+ return <>{children}
+}
+```
+
+**app/offline/page.tsx**
+
+```tsx
+'use client'
+
+import { useAuth } from '@/lib/auth/auth-provider'
+import { Card } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+
+export default function OfflinePage() {
+ const { user } = useAuth()
+
+ return (
+
+
+
+
+ )
+}
+```
+
+## Best Practices for Each Pattern
+
+### E-commerce
+
+- Store return URL for post-login redirect
+- Show items in cart even when not logged in
+- Prompt for login at checkout
+- Remember cart items after login
+
+### SaaS
+
+- Implement role-based access control
+- Check subscription status
+- Handle team/organization memberships
+- Redirect to onboarding for new users
+
+### Blog/Content
+
+- Allow anonymous browsing
+- Gate premium content behind auth
+- Show auth prompts contextually
+- Remember reading position
+
+### Multi-tenant
+
+- Validate user belongs to tenant
+- Custom branding per tenant
+- Tenant-specific routing
+- Isolated data per tenant
+
+### PWA
+
+- Cache authentication state
+- Handle offline gracefully
+- Show connection status
+- Sync when online
+
+## Common Patterns
+
+### Redirect After Login
+
+```tsx
+// Store intended destination
+const intendedUrl = request.nextUrl.pathname
+redirect(`/auth/login?redirect=${encodeURIComponent(intendedUrl)}`)
+
+// Restore after login
+const redirect = searchParams.get('redirect') || '/dashboard'
+router.push(redirect)
+```
+
+### Role-Based Access
+
+```typescript
+async function checkUserRole(userId: string, requiredRole: string) {
+ const supabase = await createClient()
+
+ const { data: user_role } = await supabase
+ .from('user_roles')
+ .select('role')
+ .eq('user_id', userId)
+ .single()
+
+ return user_role?.role === requiredRole
+}
+```
+
+### Session Refresh
+
+```typescript
+// Automatically refresh session
+useEffect(() => {
+ const {
+ data: { subscription },
+ } = supabase.auth.onAuthStateChange(async (event, session) => {
+ if (event === 'TOKEN_REFRESHED') {
+ console.log('Session refreshed')
+ }
+ })
+
+ return () => subscription.unsubscribe()
+}, [])
+```
+
+## Testing Integration
+
+```typescript
+// __tests__/auth-integration.test.ts
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { PasswordlessLoginForm } from '@/components/auth/passwordless-login-form'
+
+describe('Passwordless Auth Integration', () => {
+ it('should send magic link when email submitted', async () => {
+ render(You're offline
++ No internet connection detected. Some features may be unavailable. +
+ + {user && ( +
+
+ )}
+
+
+ ✓ You're signed in as {user.email}
+Magic Link
+Click here to sign in:
+ +``` + +### OTP Template + +```html +Your Login Code
+Enter this code to sign in:
+{{ .Token }}
+Expires in 1 hour
+``` + +## Environment Variables + +```env +NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co +NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key +``` + +## Supabase Dashboard URLs + +- **Project Settings**: Settings > API +- **Auth Configuration**: Authentication > Providers +- **URL Configuration**: Authentication > URL Configuration +- **Email Templates**: Authentication > Email Templates +- **Rate Limits**: Authentication > Rate Limits +- **Auth Logs**: Authentication > Logs + +## Default Settings + +| Setting | Default Value | Configurable | +| --------------------- | ------------------- | ----------------- | +| OTP Expiration | 1 hour | Yes (max 24h) | +| Rate Limit | 1 req/60s per email | Yes | +| Magic Link Expiration | 1 hour | Yes | +| Auto Sign-Up | Enabled | Yes (per request) | + +## Error Messages + +| Error | Cause | Solution | +| --------------------------- | ----------------------- | -------------------------------- | +| "Email rate limit exceeded" | Too many requests | Wait 60 seconds | +| "Invalid redirect URL" | URL not whitelisted | Add to Supabase Dashboard | +| "Invalid token" | Expired or used token | Request new token | +| "User not found" | shouldCreateUser: false | Set to true or create user first | + +## Testing Checklist + +- [ ] Magic link arrives in email +- [ ] Magic link redirects correctly +- [ ] OTP code arrives in email +- [ ] OTP verification works +- [ ] Expired tokens are rejected +- [ ] Invalid tokens show error +- [ ] Rate limiting works +- [ ] Protected routes redirect +- [ ] Sign out works +- [ ] Middleware protects routes + +## Performance Tips + +1. Use Suspense for OTP verify page +2. Implement loading states +3. Add error boundaries +4. Use optimistic UI updates +5. Cache auth state when appropriate + +## Security Best Practices + +1. Always use HTTPS in production +2. Implement rate limiting +3. Monitor auth logs +4. Set appropriate token expiration +5. Validate email addresses +6. Use secure cookies +7. Enable CSRF protection + +## Browser Support + +- ✅ Chrome/Edge (Chromium) +- ✅ Firefox +- ✅ Safari +- ✅ Mobile browsers +- ⚠️ IE11 (not supported) + +## Dependencies + +```json +{ + "@supabase/supabase-js": "^2.x.x", + "@supabase/ssr": "^0.x.x", + "next": "^13.x.x || ^14.x.x || ^15.x.x", + "react": "^18.x.x" +} +``` + +## Useful Links + +- [Full Documentation](./README.md) +- [Getting Started Guide](./GETTING_STARTED.md) +- [Usage Guide](./USAGE.md) +- [Supabase Auth Docs](https://supabase.com/docs/guides/auth) + +--- + +**Pro Tip**: Start with `PasswordlessLoginForm` - it gives users both options and you can always switch to individual forms later! diff --git a/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/README.md b/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/README.md new file mode 100644 index 00000000000..33d7af5f0ad --- /dev/null +++ b/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/README.md @@ -0,0 +1,293 @@ +# Passwordless Authentication for Next.js + +A complete passwordless authentication solution for Next.js applications using Supabase Auth. This block includes support for both Magic Link and OTP (One-Time Password) login methods. + +## Features + +- **Magic Link Login**: Users receive a clickable link in their email to sign in +- **OTP Login**: Users receive a 6-digit code to enter for authentication +- **Combined Form**: Single form that supports both methods +- **Auto Sign-Up**: Automatically creates user accounts on first login (configurable) +- **Protected Routes**: Middleware-protected pages requiring authentication +- **Error Handling**: Comprehensive error states and user feedback +- **TypeScript**: Full type safety with TypeScript + +## Components + +### 1. MagicLinkForm + +A standalone form for Magic Link authentication. + +```tsx +import { MagicLinkForm } from '@/registry/default/blocks/passwordless-auth-nextjs/components/magic-link-form' + +export default function LoginPage() { + returnMagic Link
+Follow this link to login:
+ +``` + +For **OTP**: +Update the Magic Link email template to show the OTP code: + +```html +One time login code
+Please enter this code: {{ .Token }}
+``` + +### 3. Middleware + +Copy the included `middleware.ts` to your project root to protect routes: + +```typescript +// middleware.ts +export async function middleware(request: NextRequest) { + // ... (see middleware.ts in this block) +} + +export const config = { + matcher: ['/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)'], +} +``` + +## Usage Examples + +### Basic Magic Link Login + +```tsx +// app/auth/login/page.tsx +import { MagicLinkForm } from '@/registry/default/blocks/passwordless-auth-nextjs/components/magic-link-form' + +export default function LoginPage() { + return ( +
+
+ )
+}
+```
+
+### OTP Flow
+
+```tsx
+// app/auth/otp/page.tsx
+import { OTPRequestForm } from '@/registry/default/blocks/passwordless-auth-nextjs/components/otp-request-form'
+
+export default function OTPPage() {
+ return (
+
+
+ )
+}
+
+// app/auth/verify-otp/page.tsx
+import { OTPVerifyForm } from '@/registry/default/blocks/passwordless-auth-nextjs/components/otp-verify-form'
+import { Suspense } from 'react'
+
+export default function VerifyPage() {
+ return (
+
+
+
+
+ )
+}
+```
+
+## Configuration Options
+
+### Disable Auto Sign-Up
+
+If you want to prevent automatic user creation, set `shouldCreateUser` to `false`:
+
+```typescript
+const { error } = await supabase.auth.signInWithOtp({
+ email,
+ options: {
+ shouldCreateUser: false, // Only allow existing users to sign in
+ },
+})
+```
+
+### Custom Redirect
+
+Customize where users are redirected after authentication:
+
+```typescript
+const { error } = await supabase.auth.signInWithOtp({
+ email,
+ options: {
+ emailRedirectTo: `${window.location.origin}/dashboard`, // Custom redirect
+ },
+})
+```
+
+### OTP Expiration
+
+By default:
+
+- OTPs can be requested once every 60 seconds
+- OTPs expire after 1 hour
+
+Configure these in your Supabase Dashboard:
+**Authentication** > **Providers** > **Email** > **Email OTP Expiration**
+
+## Protected Routes
+
+Create protected pages that require authentication:
+
+```tsx
+// app/protected/page.tsx
+import { createClient } from '@/lib/supabase/server'
+import { redirect } from 'next/navigation'
+
+export default async function ProtectedPage() {
+ const supabase = await createClient()
+ const {
+ data: { user },
+ } = await supabase.auth.getUser()
+
+ if (!user) {
+ redirect('/auth/passwordless')
+ }
+
+ return (
+
+
+ )
+}
+```
+
+## Security Considerations
+
+1. **Rate Limiting**: Supabase enforces rate limits (1 request per 60 seconds by default)
+2. **Expiration**: Magic Links and OTPs expire after 1 hour
+3. **HTTPS Required**: Always use HTTPS in production
+4. **Environment Variables**: Never commit `.env` files to version control
+
+## Troubleshooting
+
+### Magic Link not working
+
+1. Check your email template includes the correct redirect URL
+2. Verify redirect URLs are configured in Supabase Dashboard
+3. Check email spam folder
+
+### OTP not arriving
+
+1. Verify email template is configured to show `{{ .Token }}`
+2. Check Supabase Auth email provider settings
+3. Check rate limiting (wait 60 seconds between requests)
+
+### Authentication errors
+
+1. Check browser console for detailed error messages
+2. Verify environment variables are set correctly
+3. Ensure Supabase client is initialized properly
+
+## Learn More
+
+- [Supabase Passwordless Auth Docs](https://supabase.com/docs/guides/auth/auth-email-passwordless)
+- [Magic Link Documentation](https://supabase.com/docs/guides/auth/auth-email-passwordless#with-magic-link)
+- [OTP Documentation](https://supabase.com/docs/guides/auth/auth-email-passwordless#with-otp)
diff --git a/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/USAGE.md b/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/USAGE.md
new file mode 100644
index 00000000000..10addd79a7d
--- /dev/null
+++ b/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/USAGE.md
@@ -0,0 +1,468 @@
+# Passwordless Authentication - Usage Guide
+
+This guide provides detailed instructions for implementing passwordless authentication in your Next.js application using Supabase Auth.
+
+## Table of Contents
+
+1. [Quick Start](#quick-start)
+2. [Authentication Methods](#authentication-methods)
+3. [Component API](#component-api)
+4. [Advanced Configuration](#advanced-configuration)
+5. [Best Practices](#best-practices)
+
+## Quick Start
+
+### Installation
+
+1. Copy the block to your project:
+
+```bash
+npx shadcn@latest add passwordless-auth-nextjs
+```
+
+2. Set up environment variables:
+
+```env
+NEXT_PUBLIC_SUPABASE_URL=your-project-url
+NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
+```
+
+3. Configure Supabase redirect URLs in your dashboard:
+ - `http://localhost:3000/auth/confirm` (development)
+ - `https://yourdomain.com/auth/confirm` (production)
+
+### Basic Implementation
+
+```tsx
+import { PasswordlessLoginForm } from '@/components/passwordless-login-form'
+
+export default function LoginPage() {
+ return Protected Content
+Welcome, {user.email}!
+
+
+ )
+}
+```
+
+**Email Template Configuration:**
+
+For implicit flow (default):
+
+```html
+Magic Link
+Follow this link to login:
+ +``` + +For PKCE flow: + +```html +Magic Link
+Follow this link to login:
+ +``` + +### 2. OTP (One-Time Password) + +OTPs are 6-digit codes sent to the user's email that they manually enter. + +**Advantages:** + +- More control (user types the code) +- Works better for mobile apps +- Familiar to users + +**Disadvantages:** + +- Extra step (user must type code) +- Possible typos +- Codes expire after 1 hour + +**Implementation:** + +```tsx +// Step 1: Request OTP +import { OTPRequestForm } from '@/components/otp-request-form' + +export default function RequestOTPPage() { + return ( +
+
+ )
+}
+
+// Step 2: Verify OTP
+import { OTPVerifyForm } from '@/components/otp-verify-form'
+import { Suspense } from 'react'
+
+export default function VerifyOTPPage() {
+ return (
+
+
+ One time login code
+Please enter this code: {{ .Token }}
+This code will expire in 1 hour.
+``` + +### 3. PasswordlessLoginForm (Recommended) + +A unified authentication form that supports both Magic Link and OTP. Use the `method` prop to specify which authentication method to use. + +```tsx +import { PasswordlessLoginForm } from '@/components/passwordless-login-form' + +export default function LoginPage() { + return ( +
+
+ )
+}
+```
+
+**With OTP:**
+
+```tsx
+
+ 
+ Your Login Code+Enter this code to sign in to your account: +
+ {{ .Token }}
+
+ + This code will expire in 1 hour. If you didn't request this, please ignore this email. + + |
+
+
+ )
+}
diff --git a/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/app/auth/magic-link/page.tsx b/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/app/auth/magic-link/page.tsx
new file mode 100644
index 00000000000..15429e0f7d8
--- /dev/null
+++ b/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/app/auth/magic-link/page.tsx
@@ -0,0 +1,11 @@
+import { MagicLinkForm } from '@/registry/default/blocks/passwordless-auth-nextjs/components/magic-link-form'
+
+export default function MagicLinkPage() {
+ return (
+
+
+
+ Authentication Error
+ There was an error authenticating your account
+
+
+
+
+
+
+
+ + The authentication link may have expired or is invalid. Please try requesting a new + one. +
+ +
+
+ )
+}
diff --git a/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/app/auth/otp/page.tsx b/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/app/auth/otp/page.tsx
new file mode 100644
index 00000000000..0c561e0a98e
--- /dev/null
+++ b/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/app/auth/otp/page.tsx
@@ -0,0 +1,11 @@
+import { OTPRequestForm } from '@/registry/default/blocks/passwordless-auth-nextjs/components/otp-request-form'
+
+export default function OTPRequestPage() {
+ return (
+
+
+
+
+ )
+}
diff --git a/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/app/auth/passwordless/page.tsx b/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/app/auth/passwordless/page.tsx
new file mode 100644
index 00000000000..4528e0aed05
--- /dev/null
+++ b/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/app/auth/passwordless/page.tsx
@@ -0,0 +1,11 @@
+import { PasswordlessLoginForm } from '@/registry/default/blocks/passwordless-auth-nextjs/components/passwordless-login-form'
+
+export default function PasswordlessLoginPage() {
+ return (
+
+
+
+
+ )
+}
diff --git a/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/app/auth/verify-otp/page.tsx b/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/app/auth/verify-otp/page.tsx
new file mode 100644
index 00000000000..90f1a17c678
--- /dev/null
+++ b/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/app/auth/verify-otp/page.tsx
@@ -0,0 +1,20 @@
+import { OTPVerifyForm } from '@/registry/default/blocks/passwordless-auth-nextjs/components/otp-verify-form'
+import { Suspense } from 'react'
+
+function OTPVerifyContent() {
+ return (
+
+
+
+
+ )
+}
+
+export default function OTPVerifyPage() {
+ return (
+
+
+
+
+ )
+}
diff --git a/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/components/magic-link-form.tsx b/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/components/magic-link-form.tsx
new file mode 100644
index 00000000000..6a6d1ab73ea
--- /dev/null
+++ b/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/components/magic-link-form.tsx
@@ -0,0 +1,92 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'
+import { Button } from '@/registry/default/components/ui/button'
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from '@/registry/default/components/ui/card'
+import { Input } from '@/registry/default/components/ui/input'
+import { Label } from '@/registry/default/components/ui/label'
+import { useState } from 'react'
+
+export function MagicLinkForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
+ const [email, setEmail] = useState('')
+ const [error, setError] = useState
+
+
+ Protected Page
+ You are logged in
+
+
+
+
+
+
+
+
+ Email
+
+ {user.email}
+
+
+
+ User ID
+{user.id}
+
+
+
+ Magic Link Login
+
+ Enter your email to receive a magic link for passwordless login
+
+
+
+ {isSuccess ? (
+
+
+
+ )
+}
diff --git a/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/components/otp-request-form.tsx b/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/components/otp-request-form.tsx
new file mode 100644
index 00000000000..2ef5b4bb732
--- /dev/null
+++ b/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/components/otp-request-form.tsx
@@ -0,0 +1,82 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'
+import { Button } from '@/registry/default/components/ui/button'
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from '@/registry/default/components/ui/card'
+import { Input } from '@/registry/default/components/ui/input'
+import { Label } from '@/registry/default/components/ui/label'
+import { useRouter } from 'next/navigation'
+import { useState } from 'react'
+
+export function OTPRequestForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
+ const [email, setEmail] = useState('')
+ const [error, setError] = useState
+
+ ) : (
+
+ )}
+ Check your email!
++ We've sent a magic link to {email}. Click the + link in the email to sign in. +
+
+
+
+ OTP Login
+
+ Enter your email to receive a one-time password for passwordless login
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/components/otp-verify-form.tsx b/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/components/otp-verify-form.tsx
new file mode 100644
index 00000000000..00b4065c265
--- /dev/null
+++ b/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/components/otp-verify-form.tsx
@@ -0,0 +1,122 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'
+import { Button } from '@/registry/default/components/ui/button'
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from '@/registry/default/components/ui/card'
+import { Input } from '@/registry/default/components/ui/input'
+import { Label } from '@/registry/default/components/ui/label'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { useState } from 'react'
+
+export function OTPVerifyForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
+ const searchParams = useSearchParams()
+ const email = searchParams.get('email') || ''
+ const [otp, setOTP] = useState('')
+ const [error, setError] = useState
+
+
+ Verify Your Email
+
+ Enter the 6-digit code sent to{' '}
+ {email}
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/components/passwordless-login-form.tsx b/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/components/passwordless-login-form.tsx
new file mode 100644
index 00000000000..23d38e6cf40
--- /dev/null
+++ b/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/components/passwordless-login-form.tsx
@@ -0,0 +1,130 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client'
+import { Button } from '@/registry/default/components/ui/button'
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from '@/registry/default/components/ui/card'
+import { Input } from '@/registry/default/components/ui/input'
+import { Label } from '@/registry/default/components/ui/label'
+import { useRouter } from 'next/navigation'
+import { useState } from 'react'
+
+type LoginMethod = 'magic-link' | 'otp'
+
+interface PasswordlessLoginFormProps extends React.ComponentPropsWithoutRef<'div'> {
+ method?: LoginMethod
+}
+
+export function PasswordlessLoginForm({
+ className,
+ method = 'magic-link',
+ ...props
+}: PasswordlessLoginFormProps) {
+ const [email, setEmail] = useState('')
+ const [error, setError] = useState
+
+
+ Sign up
+ Sign in or create a new account
+
+
+ {isMagicLinkSent ? (
+
+
+
+ )
+}
diff --git a/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/middleware.ts b/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/middleware.ts
new file mode 100644
index 00000000000..33077a02bb8
--- /dev/null
+++ b/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/middleware.ts
@@ -0,0 +1,46 @@
+import { createServerClient } from '@supabase/ssr'
+import { NextResponse, type NextRequest } from 'next/server'
+
+export async function middleware(request: NextRequest) {
+ let supabaseResponse = NextResponse.next({
+ request,
+ })
+
+ const supabase = createServerClient(
+ process.env.NEXT_PUBLIC_SUPABASE_URL!,
+ process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+ {
+ cookies: {
+ getAll() {
+ return request.cookies.getAll()
+ },
+ setAll(cookiesToSet) {
+ cookiesToSet.forEach(({ name, value, options }) => request.cookies.set(name, value))
+ supabaseResponse = NextResponse.next({
+ request,
+ })
+ cookiesToSet.forEach(({ name, value, options }) =>
+ supabaseResponse.cookies.set(name, value, options)
+ )
+ },
+ },
+ }
+ )
+
+ const {
+ data: { user },
+ } = await supabase.auth.getUser()
+
+ // Protect /protected route
+ if (request.nextUrl.pathname.startsWith('/protected') && !user) {
+ const url = request.nextUrl.clone()
+ url.pathname = '/auth/passwordless'
+ return NextResponse.redirect(url)
+ }
+
+ return supabaseResponse
+}
+
+export const config = {
+ matcher: ['/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)'],
+}
diff --git a/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/registry-item.json b/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/registry-item.json
new file mode 100644
index 00000000000..281bcf29220
--- /dev/null
+++ b/apps/ui-library/registry/default/blocks/passwordless-auth-nextjs/registry-item.json
@@ -0,0 +1,66 @@
+{
+ "name": "passwordless-auth-nextjs",
+ "type": "registry:block",
+ "title": "Passwordless Auth for Next.js and Supabase",
+ "description": "Passwordless authentication for Next.js using Supabase Auth. Supports both Magic Link and OTP (One-Time Password) login methods.",
+ "registryDependencies": ["button", "card", "input", "label", "link"],
+ "dependencies": ["@supabase/ssr@latest", "@supabase/supabase-js@latest"],
+ "files": [
+ {
+ "path": "registry/default/blocks/passwordless-auth-nextjs/components/magic-link-form.tsx",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-nextjs/components/otp-request-form.tsx",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-nextjs/components/otp-verify-form.tsx",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-nextjs/components/passwordless-login-form.tsx",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-nextjs/app/auth/magic-link/page.tsx",
+ "type": "registry:page",
+ "target": "app/auth/magic-link/page.tsx"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-nextjs/app/auth/otp/page.tsx",
+ "type": "registry:page",
+ "target": "app/auth/otp/page.tsx"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-nextjs/app/auth/verify-otp/page.tsx",
+ "type": "registry:page",
+ "target": "app/auth/verify-otp/page.tsx"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-nextjs/app/auth/passwordless/page.tsx",
+ "type": "registry:page",
+ "target": "app/auth/passwordless/page.tsx"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-nextjs/app/auth/confirm/route.ts",
+ "type": "registry:page",
+ "target": "app/auth/confirm/route.ts"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-nextjs/app/auth/error/page.tsx",
+ "type": "registry:page",
+ "target": "app/auth/error/page.tsx"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-nextjs/app/protected/page.tsx",
+ "type": "registry:page",
+ "target": "app/protected/page.tsx"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-nextjs/middleware.ts",
+ "type": "registry:file",
+ "target": "middleware.ts"
+ }
+ ]
+}
diff --git a/apps/ui-library/registry/default/blocks/passwordless-auth-react-router/app/routes/auth.confirm.tsx b/apps/ui-library/registry/default/blocks/passwordless-auth-react-router/app/routes/auth.confirm.tsx
new file mode 100644
index 00000000000..4e159979b8b
--- /dev/null
+++ b/apps/ui-library/registry/default/blocks/passwordless-auth-react-router/app/routes/auth.confirm.tsx
@@ -0,0 +1,27 @@
+import { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'
+import { type EmailOtpType } from '@supabase/supabase-js'
+import { type LoaderFunctionArgs, redirect } from 'react-router'
+
+export async function loader({ request }: LoaderFunctionArgs) {
+ const requestUrl = new URL(request.url)
+ const token_hash = requestUrl.searchParams.get('token_hash')
+ const type = requestUrl.searchParams.get('type') as EmailOtpType | null
+ const _next = requestUrl.searchParams.get('next')
+ const next = _next?.startsWith('/') ? _next : '/protected'
+
+ if (token_hash && type) {
+ const { supabase, headers } = createClient(request)
+ const { error } = await supabase.auth.verifyOtp({
+ type,
+ token_hash,
+ })
+ if (!error) {
+ return redirect(next, { headers })
+ } else {
+ return redirect(`/auth/error?error=${error?.message}`)
+ }
+ }
+
+ // redirect the user to an error page with some instructions
+ return redirect(`/auth/error?error=No token hash or type`)
+}
diff --git a/apps/ui-library/registry/default/blocks/passwordless-auth-react-router/app/routes/auth.error.tsx b/apps/ui-library/registry/default/blocks/passwordless-auth-react-router/app/routes/auth.error.tsx
new file mode 100644
index 00000000000..13321b70361
--- /dev/null
+++ b/apps/ui-library/registry/default/blocks/passwordless-auth-react-router/app/routes/auth.error.tsx
@@ -0,0 +1,35 @@
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from '@/registry/default/components/ui/card'
+import { Button } from '@/registry/default/components/ui/button'
+import { Link } from 'react-router'
+
+export default function AuthErrorPage() {
+ return (
+
+
+ ) : (
+
+ )}
+ Check your email!
++ We've sent a magic link to {email}. Click + the link in the email to sign in. +
+ +
+
+ )
+}
diff --git a/apps/ui-library/registry/default/blocks/passwordless-auth-react-router/app/routes/passwordless.tsx b/apps/ui-library/registry/default/blocks/passwordless-auth-react-router/app/routes/passwordless.tsx
new file mode 100644
index 00000000000..6f0dc9badc8
--- /dev/null
+++ b/apps/ui-library/registry/default/blocks/passwordless-auth-react-router/app/routes/passwordless.tsx
@@ -0,0 +1,11 @@
+import { PasswordlessLoginForm } from '@/registry/default/blocks/passwordless-auth-react-router/components/passwordless-login-form'
+
+export default function PasswordlessPage() {
+ return (
+
+
+
+ Authentication Error
+ There was an error authenticating your account
+
+
+
+
+
+
+
+ + The authentication link may have expired or is invalid. Please try requesting a new + one. +
+ +
+
+ )
+}
diff --git a/apps/ui-library/registry/default/blocks/passwordless-auth-react-router/app/routes/protected.tsx b/apps/ui-library/registry/default/blocks/passwordless-auth-react-router/app/routes/protected.tsx
new file mode 100644
index 00000000000..0ecd6b4e8a8
--- /dev/null
+++ b/apps/ui-library/registry/default/blocks/passwordless-auth-react-router/app/routes/protected.tsx
@@ -0,0 +1,55 @@
+import { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'
+import { Button } from '@/registry/default/components/ui/button'
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from '@/registry/default/components/ui/card'
+import { type LoaderFunctionArgs, redirect, useLoaderData } from 'react-router'
+
+export const loader = async ({ request }: LoaderFunctionArgs) => {
+ const { supabase } = createClient(request)
+
+ const { data, error } = await supabase.auth.getUser()
+ if (error || !data?.user) {
+ return redirect('/passwordless')
+ }
+
+ return data
+}
+
+export default function ProtectedPage() {
+ let data = useLoaderData
+
+
+
+ )
+}
diff --git a/apps/ui-library/registry/default/blocks/passwordless-auth-react-router/app/routes/verify-otp.tsx b/apps/ui-library/registry/default/blocks/passwordless-auth-react-router/app/routes/verify-otp.tsx
new file mode 100644
index 00000000000..95ea73144a4
--- /dev/null
+++ b/apps/ui-library/registry/default/blocks/passwordless-auth-react-router/app/routes/verify-otp.tsx
@@ -0,0 +1,11 @@
+import { OTPVerifyForm } from '@/registry/default/blocks/passwordless-auth-react-router/components/otp-verify-form'
+
+export default function VerifyOTPPage() {
+ return (
+
+
+
+ Protected Page
+ You are logged in
+
+
+
+
+
+
+
+
+ Email
+
+ {data.user.email}
+
+
+
+ User ID
+{data.user.id}
+
+
+ )
+}
diff --git a/apps/ui-library/registry/default/blocks/passwordless-auth-react-router/components/magic-link-form.tsx b/apps/ui-library/registry/default/blocks/passwordless-auth-react-router/components/magic-link-form.tsx
new file mode 100644
index 00000000000..3b8de4622e0
--- /dev/null
+++ b/apps/ui-library/registry/default/blocks/passwordless-auth-react-router/components/magic-link-form.tsx
@@ -0,0 +1,92 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { createClient } from '@/registry/default/clients/react-router/lib/supabase/client'
+import { Button } from '@/registry/default/components/ui/button'
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from '@/registry/default/components/ui/card'
+import { Input } from '@/registry/default/components/ui/input'
+import { Label } from '@/registry/default/components/ui/label'
+import { useState } from 'react'
+
+export function MagicLinkForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
+ const [email, setEmail] = useState('')
+ const [error, setError] = useState
+
+
+
+
+ Magic Link Login
+
+ Enter your email to receive a magic link for passwordless login
+
+
+
+ {isSuccess ? (
+
+
+
+ )
+}
diff --git a/apps/ui-library/registry/default/blocks/passwordless-auth-react-router/components/otp-request-form.tsx b/apps/ui-library/registry/default/blocks/passwordless-auth-react-router/components/otp-request-form.tsx
new file mode 100644
index 00000000000..dd946513166
--- /dev/null
+++ b/apps/ui-library/registry/default/blocks/passwordless-auth-react-router/components/otp-request-form.tsx
@@ -0,0 +1,82 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { createClient } from '@/registry/default/clients/react-router/lib/supabase/client'
+import { Button } from '@/registry/default/components/ui/button'
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from '@/registry/default/components/ui/card'
+import { Input } from '@/registry/default/components/ui/input'
+import { Label } from '@/registry/default/components/ui/label'
+import { useNavigate } from 'react-router'
+import { useState } from 'react'
+
+export function OTPRequestForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
+ const [email, setEmail] = useState('')
+ const [error, setError] = useState
+
+ ) : (
+
+ )}
+ Check your email!
++ We've sent a magic link to {email}. Click the + link in the email to sign in. +
+
+
+
+ OTP Login
+
+ Enter your email to receive a one-time password for passwordless login
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/ui-library/registry/default/blocks/passwordless-auth-react-router/components/otp-verify-form.tsx b/apps/ui-library/registry/default/blocks/passwordless-auth-react-router/components/otp-verify-form.tsx
new file mode 100644
index 00000000000..513e3adb314
--- /dev/null
+++ b/apps/ui-library/registry/default/blocks/passwordless-auth-react-router/components/otp-verify-form.tsx
@@ -0,0 +1,121 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { createClient } from '@/registry/default/clients/react-router/lib/supabase/client'
+import { Button } from '@/registry/default/components/ui/button'
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from '@/registry/default/components/ui/card'
+import { Input } from '@/registry/default/components/ui/input'
+import { Label } from '@/registry/default/components/ui/label'
+import { useNavigate, useSearchParams } from 'react-router'
+import { useState } from 'react'
+
+export function OTPVerifyForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
+ const [searchParams] = useSearchParams()
+ const email = searchParams.get('email') || ''
+ const [otp, setOTP] = useState('')
+ const [error, setError] = useState
+
+
+ Verify Your Email
+
+ Enter the 6-digit code sent to{' '}
+ {email}
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/ui-library/registry/default/blocks/passwordless-auth-react-router/components/passwordless-login-form.tsx b/apps/ui-library/registry/default/blocks/passwordless-auth-react-router/components/passwordless-login-form.tsx
new file mode 100644
index 00000000000..868611efe90
--- /dev/null
+++ b/apps/ui-library/registry/default/blocks/passwordless-auth-react-router/components/passwordless-login-form.tsx
@@ -0,0 +1,130 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { createClient } from '@/registry/default/clients/react-router/lib/supabase/client'
+import { Button } from '@/registry/default/components/ui/button'
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from '@/registry/default/components/ui/card'
+import { Input } from '@/registry/default/components/ui/input'
+import { Label } from '@/registry/default/components/ui/label'
+import { useNavigate } from 'react-router'
+import { useState } from 'react'
+
+type LoginMethod = 'magic-link' | 'otp'
+
+interface PasswordlessLoginFormProps extends React.ComponentPropsWithoutRef<'div'> {
+ method?: LoginMethod
+}
+
+export function PasswordlessLoginForm({
+ className,
+ method = 'magic-link',
+ ...props
+}: PasswordlessLoginFormProps) {
+ const [email, setEmail] = useState('')
+ const [error, setError] = useState
+
+
+ Sign up
+ Sign in or create a new account
+
+
+ {isMagicLinkSent ? (
+
+
+
+ )
+}
diff --git a/apps/ui-library/registry/default/blocks/passwordless-auth-react-router/registry-item.json b/apps/ui-library/registry/default/blocks/passwordless-auth-react-router/registry-item.json
new file mode 100644
index 00000000000..4df86835838
--- /dev/null
+++ b/apps/ui-library/registry/default/blocks/passwordless-auth-react-router/registry-item.json
@@ -0,0 +1,55 @@
+{
+ "name": "passwordless-auth-react-router",
+ "type": "registry:block",
+ "title": "Passwordless Auth for React Router and Supabase",
+ "description": "Passwordless authentication for React Router using Supabase Auth. Supports both Magic Link and OTP (One-Time Password) login methods.",
+ "registryDependencies": ["button", "card", "input", "label"],
+ "dependencies": [
+ "@supabase/ssr@latest",
+ "@react-router/dev@latest",
+ "@react-router/fs-routes@latest"
+ ],
+ "files": [
+ {
+ "path": "registry/default/blocks/passwordless-auth-react-router/components/passwordless-login-form.tsx",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-react-router/components/magic-link-form.tsx",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-react-router/components/otp-request-form.tsx",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-react-router/components/otp-verify-form.tsx",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-react-router/app/routes/auth.confirm.tsx",
+ "type": "registry:file",
+ "target": "app/routes/auth.confirm.tsx"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-react-router/app/routes/auth.error.tsx",
+ "type": "registry:file",
+ "target": "app/routes/auth.error.tsx"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-react-router/app/routes/passwordless.tsx",
+ "type": "registry:file",
+ "target": "app/routes/passwordless.tsx"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-react-router/app/routes/verify-otp.tsx",
+ "type": "registry:file",
+ "target": "app/routes/verify-otp.tsx"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-react-router/app/routes/protected.tsx",
+ "type": "registry:file",
+ "target": "app/routes/protected.tsx"
+ }
+ ]
+}
diff --git a/apps/ui-library/registry/default/blocks/passwordless-auth-react/components/magic-link-form.tsx b/apps/ui-library/registry/default/blocks/passwordless-auth-react/components/magic-link-form.tsx
new file mode 100644
index 00000000000..d20d9316492
--- /dev/null
+++ b/apps/ui-library/registry/default/blocks/passwordless-auth-react/components/magic-link-form.tsx
@@ -0,0 +1,92 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { createClient } from '@/registry/default/clients/react/lib/supabase/client'
+import { Button } from '@/registry/default/components/ui/button'
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from '@/registry/default/components/ui/card'
+import { Input } from '@/registry/default/components/ui/input'
+import { Label } from '@/registry/default/components/ui/label'
+import { useState } from 'react'
+
+export function MagicLinkForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
+ const [email, setEmail] = useState('')
+ const [error, setError] = useState
+
+ ) : (
+
+ )}
+ Check your email!
++ We've sent a magic link to {email}. Click + the link in the email to sign in. +
+ +
+
+
+ Magic Link Login
+
+ Enter your email to receive a magic link for passwordless login
+
+
+
+ {isSuccess ? (
+
+
+
+ )
+}
diff --git a/apps/ui-library/registry/default/blocks/passwordless-auth-react/components/otp-request-form.tsx b/apps/ui-library/registry/default/blocks/passwordless-auth-react/components/otp-request-form.tsx
new file mode 100644
index 00000000000..32d6e3af2d1
--- /dev/null
+++ b/apps/ui-library/registry/default/blocks/passwordless-auth-react/components/otp-request-form.tsx
@@ -0,0 +1,86 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { createClient } from '@/registry/default/clients/react/lib/supabase/client'
+import { Button } from '@/registry/default/components/ui/button'
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from '@/registry/default/components/ui/card'
+import { Input } from '@/registry/default/components/ui/input'
+import { Label } from '@/registry/default/components/ui/label'
+import { useState } from 'react'
+
+interface OTPRequestFormProps extends React.ComponentPropsWithoutRef<'div'> {
+ onOtpRequested?: (email: string) => void
+}
+
+export function OTPRequestForm({ className, onOtpRequested, ...props }: OTPRequestFormProps) {
+ const [email, setEmail] = useState('')
+ const [error, setError] = useState
+
+ ) : (
+
+ )}
+ Check your email!
++ We've sent a magic link to {email}. Click the + link in the email to sign in. +
+
+
+
+ OTP Login
+
+ Enter your email to receive a one-time password for passwordless login
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/ui-library/registry/default/blocks/passwordless-auth-react/components/otp-verify-form.tsx b/apps/ui-library/registry/default/blocks/passwordless-auth-react/components/otp-verify-form.tsx
new file mode 100644
index 00000000000..a90b3d3c503
--- /dev/null
+++ b/apps/ui-library/registry/default/blocks/passwordless-auth-react/components/otp-verify-form.tsx
@@ -0,0 +1,124 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { createClient } from '@/registry/default/clients/react/lib/supabase/client'
+import { Button } from '@/registry/default/components/ui/button'
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from '@/registry/default/components/ui/card'
+import { Input } from '@/registry/default/components/ui/input'
+import { Label } from '@/registry/default/components/ui/label'
+import { useState } from 'react'
+
+interface OTPVerifyFormProps extends React.ComponentPropsWithoutRef<'div'> {
+ email: string
+ onVerified?: () => void
+}
+
+export function OTPVerifyForm({ className, email, onVerified, ...props }: OTPVerifyFormProps) {
+ const [otp, setOTP] = useState('')
+ const [error, setError] = useState
+
+
+ Verify Your Email
+
+ Enter the 6-digit code sent to{' '}
+ {email}
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/ui-library/registry/default/blocks/passwordless-auth-react/components/passwordless-login-form.tsx b/apps/ui-library/registry/default/blocks/passwordless-auth-react/components/passwordless-login-form.tsx
new file mode 100644
index 00000000000..4b3fe54979e
--- /dev/null
+++ b/apps/ui-library/registry/default/blocks/passwordless-auth-react/components/passwordless-login-form.tsx
@@ -0,0 +1,132 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { createClient } from '@/registry/default/clients/react/lib/supabase/client'
+import { Button } from '@/registry/default/components/ui/button'
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from '@/registry/default/components/ui/card'
+import { Input } from '@/registry/default/components/ui/input'
+import { Label } from '@/registry/default/components/ui/label'
+import { useState } from 'react'
+
+type LoginMethod = 'magic-link' | 'otp'
+
+interface PasswordlessLoginFormProps extends React.ComponentPropsWithoutRef<'div'> {
+ method?: LoginMethod
+ onOtpRequested?: (email: string) => void
+}
+
+export function PasswordlessLoginForm({
+ className,
+ method = 'magic-link',
+ onOtpRequested,
+ ...props
+}: PasswordlessLoginFormProps) {
+ const [email, setEmail] = useState('')
+ const [error, setError] = useState
+
+
+ Sign up
+ Sign in or create a new account
+
+
+ {isMagicLinkSent ? (
+
+
+
+ )
+}
diff --git a/apps/ui-library/registry/default/blocks/passwordless-auth-react/registry-item.json b/apps/ui-library/registry/default/blocks/passwordless-auth-react/registry-item.json
new file mode 100644
index 00000000000..6dbf26c4357
--- /dev/null
+++ b/apps/ui-library/registry/default/blocks/passwordless-auth-react/registry-item.json
@@ -0,0 +1,26 @@
+{
+ "name": "passwordless-auth-react",
+ "type": "registry:block",
+ "title": "Passwordless Auth for React and Supabase",
+ "description": "Passwordless authentication for React using Supabase Auth. Supports both Magic Link and OTP (One-Time Password) login methods. Components only, no routing included.",
+ "registryDependencies": ["button", "card", "input", "label"],
+ "dependencies": ["@supabase/supabase-js@latest"],
+ "files": [
+ {
+ "path": "registry/default/blocks/passwordless-auth-react/components/passwordless-login-form.tsx",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-react/components/magic-link-form.tsx",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-react/components/otp-request-form.tsx",
+ "type": "registry:component"
+ },
+ {
+ "path": "registry/default/blocks/passwordless-auth-react/components/otp-verify-form.tsx",
+ "type": "registry:component"
+ }
+ ]
+}
diff --git a/apps/ui-library/registry/default/blocks/passwordless-auth-tanstack/components/magic-link-form.tsx b/apps/ui-library/registry/default/blocks/passwordless-auth-tanstack/components/magic-link-form.tsx
new file mode 100644
index 00000000000..5ce9e9c7ded
--- /dev/null
+++ b/apps/ui-library/registry/default/blocks/passwordless-auth-tanstack/components/magic-link-form.tsx
@@ -0,0 +1,92 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { createClient } from '@/registry/default/clients/tanstack/lib/supabase/client'
+import { Button } from '@/registry/default/components/ui/button'
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from '@/registry/default/components/ui/card'
+import { Input } from '@/registry/default/components/ui/input'
+import { Label } from '@/registry/default/components/ui/label'
+import { useState } from 'react'
+
+export function MagicLinkForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
+ const [email, setEmail] = useState('')
+ const [error, setError] = useState
+
+ ) : (
+
+ )}
+ Check your email!
++ We've sent a magic link to {email}. Click + the link in the email to sign in. +
+ +
+
+
+ Magic Link Login
+
+ Enter your email to receive a magic link for passwordless login
+
+
+
+ {isSuccess ? (
+
+
+
+ )
+}
diff --git a/apps/ui-library/registry/default/blocks/passwordless-auth-tanstack/components/otp-request-form.tsx b/apps/ui-library/registry/default/blocks/passwordless-auth-tanstack/components/otp-request-form.tsx
new file mode 100644
index 00000000000..9570ee1839c
--- /dev/null
+++ b/apps/ui-library/registry/default/blocks/passwordless-auth-tanstack/components/otp-request-form.tsx
@@ -0,0 +1,82 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { createClient } from '@/registry/default/clients/tanstack/lib/supabase/client'
+import { Button } from '@/registry/default/components/ui/button'
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from '@/registry/default/components/ui/card'
+import { Input } from '@/registry/default/components/ui/input'
+import { Label } from '@/registry/default/components/ui/label'
+import { useNavigate } from '@tanstack/react-router'
+import { useState } from 'react'
+
+export function OTPRequestForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
+ const [email, setEmail] = useState('')
+ const [error, setError] = useState
+
+ ) : (
+
+ )}
+ Check your email!
++ We've sent a magic link to {email}. Click the + link in the email to sign in. +
+
+
+
+ OTP Login
+
+ Enter your email to receive a one-time password for passwordless login
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/ui-library/registry/default/blocks/passwordless-auth-tanstack/components/otp-verify-form.tsx b/apps/ui-library/registry/default/blocks/passwordless-auth-tanstack/components/otp-verify-form.tsx
new file mode 100644
index 00000000000..d4fbd52372a
--- /dev/null
+++ b/apps/ui-library/registry/default/blocks/passwordless-auth-tanstack/components/otp-verify-form.tsx
@@ -0,0 +1,121 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { createClient } from '@/registry/default/clients/tanstack/lib/supabase/client'
+import { Button } from '@/registry/default/components/ui/button'
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from '@/registry/default/components/ui/card'
+import { Input } from '@/registry/default/components/ui/input'
+import { Label } from '@/registry/default/components/ui/label'
+import { useNavigate, useSearch } from '@tanstack/react-router'
+import { useState } from 'react'
+
+export function OTPVerifyForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
+ const search = useSearch({ strict: false })
+ const email = (search as { email?: string })?.email || ''
+ const [otp, setOTP] = useState('')
+ const [error, setError] = useState
+
+
+ Verify Your Email
+
+ Enter the 6-digit code sent to{' '}
+ {email}
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/ui-library/registry/default/blocks/passwordless-auth-tanstack/components/passwordless-login-form.tsx b/apps/ui-library/registry/default/blocks/passwordless-auth-tanstack/components/passwordless-login-form.tsx
new file mode 100644
index 00000000000..199858f18b1
--- /dev/null
+++ b/apps/ui-library/registry/default/blocks/passwordless-auth-tanstack/components/passwordless-login-form.tsx
@@ -0,0 +1,130 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { createClient } from '@/registry/default/clients/tanstack/lib/supabase/client'
+import { Button } from '@/registry/default/components/ui/button'
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from '@/registry/default/components/ui/card'
+import { Input } from '@/registry/default/components/ui/input'
+import { Label } from '@/registry/default/components/ui/label'
+import { useNavigate } from '@tanstack/react-router'
+import { useState } from 'react'
+
+type LoginMethod = 'magic-link' | 'otp'
+
+interface PasswordlessLoginFormProps extends React.ComponentPropsWithoutRef<'div'> {
+ method?: LoginMethod
+}
+
+export function PasswordlessLoginForm({
+ className,
+ method = 'magic-link',
+ ...props
+}: PasswordlessLoginFormProps) {
+ const [email, setEmail] = useState('')
+ const [error, setError] = useState
+
+
+ Sign up
+ Sign in or create a new account
+
+
+ {isMagicLinkSent ? (
+
+
+
+ )
+}
diff --git a/apps/ui-library/registry/default/blocks/passwordless-auth-tanstack/lib/supabase/fetch-user-server-fn.ts b/apps/ui-library/registry/default/blocks/passwordless-auth-tanstack/lib/supabase/fetch-user-server-fn.ts
new file mode 100644
index 00000000000..9092fdd5a02
--- /dev/null
+++ b/apps/ui-library/registry/default/blocks/passwordless-auth-tanstack/lib/supabase/fetch-user-server-fn.ts
@@ -0,0 +1,19 @@
+import { createClient } from '@/registry/default/clients/tanstack/lib/supabase/server'
+import type { Factor, User } from '@supabase/supabase-js'
+import { createServerFn } from '@tanstack/react-start'
+type SSRSafeUser = User & {
+ factors: (Factor & { factor_type: 'phone' | 'totp' })[]
+}
+
+export const fetchUserServerFn: () => Promise
+
+ ) : (
+
+ )}
+ Check your email!
++ We've sent a magic link to {email}. Click + the link in the email to sign in. +
+ +
+
+ )
+}
diff --git a/apps/ui-library/registry/default/blocks/passwordless-auth-tanstack/routes/auth/confirm.ts b/apps/ui-library/registry/default/blocks/passwordless-auth-tanstack/routes/auth/confirm.ts
new file mode 100644
index 00000000000..4cb23b35752
--- /dev/null
+++ b/apps/ui-library/registry/default/blocks/passwordless-auth-tanstack/routes/auth/confirm.ts
@@ -0,0 +1,61 @@
+import { createClient } from '@/registry/default/clients/tanstack/lib/supabase/server'
+import { type EmailOtpType } from '@supabase/supabase-js'
+import { createFileRoute, redirect } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+import { getWebRequest } from '@tanstack/react-start/server'
+
+const confirmFn = createServerFn({ method: 'GET' })
+ .validator((searchParams: unknown) => {
+ if (
+ searchParams &&
+ typeof searchParams === 'object' &&
+ 'token_hash' in searchParams &&
+ 'type' in searchParams
+ ) {
+ return searchParams
+ }
+ throw new Error('Invalid search params')
+ })
+ .handler(async (ctx) => {
+ const request = getWebRequest()
+
+ if (!request) {
+ throw redirect({ to: `/auth/error`, search: { error: 'No request' } })
+ }
+
+ const searchParams = ctx.data
+ const token_hash = searchParams['token_hash'] as string
+ const type = searchParams['type'] as EmailOtpType | null
+ const _next = searchParams['next'] as string | undefined
+ const next = _next?.startsWith('/') ? _next : '/protected'
+
+ if (token_hash && type) {
+ const supabase = createClient()
+
+ const { error } = await supabase.auth.verifyOtp({
+ type,
+ token_hash,
+ })
+ if (!error) {
+ // redirect user to specified redirect URL or protected page
+ throw redirect({ href: next })
+ } else {
+ // redirect the user to an error page with some instructions
+ throw redirect({
+ to: `/auth/error`,
+ search: { error: error?.message },
+ })
+ }
+ }
+
+ // redirect the user to an error page with some instructions
+ throw redirect({
+ to: `/auth/error`,
+ search: { error: 'No token hash or type' },
+ })
+ })
+
+export const Route = createFileRoute('/auth/confirm')({
+ preload: false,
+ loader: (opts) => confirmFn({ data: opts.location.search }),
+})
diff --git a/apps/ui-library/registry/default/blocks/passwordless-auth-tanstack/routes/auth/error.tsx b/apps/ui-library/registry/default/blocks/passwordless-auth-tanstack/routes/auth/error.tsx
new file mode 100644
index 00000000000..6684d819435
--- /dev/null
+++ b/apps/ui-library/registry/default/blocks/passwordless-auth-tanstack/routes/auth/error.tsx
@@ -0,0 +1,39 @@
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from '@/registry/default/components/ui/card'
+import { Button } from '@/registry/default/components/ui/button'
+import { Link, createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/auth/error')({
+ component: AuthErrorPage,
+})
+
+function AuthErrorPage() {
+ return (
+
+
+
+ Protected Page
+ You are logged in
+
+
+
+
+
+
+
+
+ Email
+
+ {user.email}
+
+
+
+ User ID
+{user.id}
+
+
+ )
+}
diff --git a/apps/ui-library/registry/default/blocks/passwordless-auth-tanstack/routes/passwordless.tsx b/apps/ui-library/registry/default/blocks/passwordless-auth-tanstack/routes/passwordless.tsx
new file mode 100644
index 00000000000..84c633cf27d
--- /dev/null
+++ b/apps/ui-library/registry/default/blocks/passwordless-auth-tanstack/routes/passwordless.tsx
@@ -0,0 +1,16 @@
+import { PasswordlessLoginForm } from '@/registry/default/blocks/passwordless-auth-tanstack/components/passwordless-login-form'
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/passwordless')({
+ component: PasswordlessPage,
+})
+
+function PasswordlessPage() {
+ return (
+
+
+
+ Authentication Error
+ There was an error authenticating your account
+
+
+
+
+
+
+
+ + The authentication link may have expired or is invalid. Please try requesting a new + one. +
+ +
+
+ )
+}
diff --git a/apps/ui-library/registry/default/blocks/passwordless-auth-tanstack/routes/verify-otp.tsx b/apps/ui-library/registry/default/blocks/passwordless-auth-tanstack/routes/verify-otp.tsx
new file mode 100644
index 00000000000..20f1553b42f
--- /dev/null
+++ b/apps/ui-library/registry/default/blocks/passwordless-auth-tanstack/routes/verify-otp.tsx
@@ -0,0 +1,21 @@
+import { OTPVerifyForm } from '@/registry/default/blocks/passwordless-auth-tanstack/components/otp-verify-form'
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/verify-otp')({
+ component: VerifyOTPPage,
+ validateSearch: (search: Record
+
+
+
+ )
+}
diff --git a/apps/ui-library/registry/default/examples/magic-link-auth.tsx b/apps/ui-library/registry/default/examples/magic-link-auth.tsx
new file mode 100644
index 00000000000..ece69d9a266
--- /dev/null
+++ b/apps/ui-library/registry/default/examples/magic-link-auth.tsx
@@ -0,0 +1,13 @@
+import { MagicLinkForm } from '@/registry/default/blocks/passwordless-auth-nextjs/components/magic-link-form'
+
+const MagicLinkAuthDemo = () => {
+ return (
+
+
+
+
+ )
+}
+
+export default MagicLinkAuthDemo
diff --git a/apps/ui-library/registry/default/examples/otp-auth.tsx b/apps/ui-library/registry/default/examples/otp-auth.tsx
new file mode 100644
index 00000000000..a206d409e33
--- /dev/null
+++ b/apps/ui-library/registry/default/examples/otp-auth.tsx
@@ -0,0 +1,13 @@
+import { OTPRequestForm } from '@/registry/default/blocks/passwordless-auth-nextjs/components/otp-request-form'
+
+const OTPAuthDemo = () => {
+ return (
+
+
+
+
+ )
+}
+
+export default OTPAuthDemo
diff --git a/apps/ui-library/registry/default/examples/passwordless-auth.tsx b/apps/ui-library/registry/default/examples/passwordless-auth.tsx
new file mode 100644
index 00000000000..0c1f8ac073c
--- /dev/null
+++ b/apps/ui-library/registry/default/examples/passwordless-auth.tsx
@@ -0,0 +1,13 @@
+import { PasswordlessLoginForm } from '@/registry/default/blocks/passwordless-auth-nextjs/components/passwordless-login-form'
+
+const PasswordlessAuthDemo = () => {
+ return (
+
+
+
+
+ )
+}
+
+export default PasswordlessAuthDemo
diff --git a/apps/ui-library/registry/examples.ts b/apps/ui-library/registry/examples.ts
index c7a160cd627..31774d3f3f6 100644
--- a/apps/ui-library/registry/examples.ts
+++ b/apps/ui-library/registry/examples.ts
@@ -34,6 +34,39 @@ export const examples: RegistryItem[] = [
},
],
},
+ {
+ name: 'passwordless-auth-demo',
+ type: 'registry:example',
+ registryDependencies: [],
+ files: [
+ {
+ path: 'registry/default/examples/passwordless-auth.tsx',
+ type: 'registry:example',
+ },
+ ],
+ },
+ {
+ name: 'magic-link-auth-demo',
+ type: 'registry:example',
+ registryDependencies: [],
+ files: [
+ {
+ path: 'registry/default/examples/magic-link-auth.tsx',
+ type: 'registry:example',
+ },
+ ],
+ },
+ {
+ name: 'otp-auth-demo',
+ type: 'registry:example',
+ registryDependencies: [],
+ files: [
+ {
+ path: 'registry/default/examples/otp-auth.tsx',
+ type: 'registry:example',
+ },
+ ],
+ },
{
name: 'current-user-avatar-demo',
type: 'registry:example',
diff --git a/apps/www/public/images/solutions/convex/convex-hero-dark.svg b/apps/www/public/images/solutions/convex/convex-hero-dark.svg
index 918db4b7884..96b56fd04d6 100644
--- a/apps/www/public/images/solutions/convex/convex-hero-dark.svg
+++ b/apps/www/public/images/solutions/convex/convex-hero-dark.svg
@@ -1,4 +1,5 @@
diff --git a/apps/www/public/images/solutions/convex/convex-hero-light.svg b/apps/www/public/images/solutions/convex/convex-hero-light.svg
index 490312642ca..f192ae1d1a7 100644
--- a/apps/www/public/images/solutions/convex/convex-hero-light.svg
+++ b/apps/www/public/images/solutions/convex/convex-hero-light.svg
@@ -1,4 +1,5 @@
+
+