डॉक्स›गाइड›Next.js sign-in pages Next.js के लिए तैयार साइन-इन पेज
आठ छोटी फ़ाइलें Next.js ऐप को पूर्ण साइन-इन प्रवाह देती हैं, जिसमें वे पृष्ठ भी शामिल हैं जिन पर Aurabase ईमेल के लिंक इंगित करते हैं।
8 मि॰ पढ़ें·स्तर मध्यवर्ती·25 अक्टू॰ 2026 पर संशोधित
यह अंग्रेजी पाठ फ़्रेंच मूल से स्वचालित रूप से उत्पन्न हुआ था और अभी तक इसकी समीक्षा नहीं की गई है।
इस अनुवाद के बाद से अंग्रेजी स्रोत बदल गया है। कुछ जानकारी पुरानी हो सकती है.
यह पृष्ठ स्वचालित रूप से अनुवादित किया गया था. अंग्रेजी संस्करण प्रामाणिक है.
#स्थापित करना
1. ग्राहक और प्रॉक्सी
ये पेज कुकी सत्रों के साथ ऐप राउटर का उपयोग करते हैं (देखें Next.js SSR)। NEXT_PUBLIC_AURABASE_URL और NEXT_PUBLIC_AURABASE_ANON_KEY सेट करें, फिर सर्वर क्लाइंट और प्रॉक्सी जोड़ें। Next.js 15 पर फ़ाइल को middleware.ts और फ़ंक्शन को middleware नाम दें।
lib/aurabase/server.tstypescript
import { cookies } from 'next/headers'
import { createServerClient } from '@aurabase/aurabase-js/ssr'
export async function serverClient() {
const store = await cookies()
return createServerClient(process.env.NEXT_PUBLIC_AURABASE_URL!, process.env.NEXT_PUBLIC_AURABASE_ANON_KEY!, {
cookies: {
getAll: () => store.getAll(),
// सर्वर घटक कुकीज़ नहीं लिख सकते: नीचे दिया गया प्रॉक्सी इसके बजाय सत्र को ताज़ा करता है।
setAll(list) {
try {
list.forEach(({ name, value, options }) => store.set(name, value, options))
} catch {}
},
},
})
}
proxy.tstypescript
import { NextResponse, type NextRequest } from 'next/server'
import { createServerClient } from '@aurabase/aurabase-js/ssr'
const PROTECTED = ['/dashboard']
export async function proxy(request: NextRequest) {
const response = NextResponse.next({ request })
const aura = createServerClient(process.env.NEXT_PUBLIC_AURABASE_URL!, process.env.NEXT_PUBLIC_AURABASE_ANON_KEY!, {
cookies: {
getAll: () => request.cookies.getAll(),
setAll(list) {
list.forEach(({ name, value, options }) => {
request.cookies.set(name, value)
response.cookies.set(name, value, options)
})
},
},
})
// getUser() टोकन को ताज़ा करता है और सर्वर से पूछता है कि उपयोगकर्ता कौन है। GetSession() के साथ कभी भी अधिकृत न करें।
const { data: user } = await aura.auth.getUser()
if (!user && PROTECTED.some((p) => request.nextUrl.pathname.startsWith(p))) {
return NextResponse.redirect(new URL('/login', request.url))
}
return response
}
export const config = { matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'] }
#दाखिल करना
2. साइन इन करें और साइन अप करें
app/login/actions.tstypescript
'use server'
import { redirect } from 'next/navigation'
import { serverClient } from '@/lib/aurabase/server'
export async function login(formData: FormData) {
const aura = await serverClient()
const { data, error } = await aura.auth.signInWithPassword({
email: String(formData.get('email')),
password: String(formData.get('password')),
})
if (error) redirect(`/login?error=${encodeURIComponent(error.code ?? 'ERROR')}`)
// MFA सक्षम उपयोगकर्ता को सत्र के बजाय एक चुनौती मिलती है: यहां कोड मांगें।
if (data && 'mfa_required' in data) redirect(`/login?error=MFA_REQUIRED`)
redirect('/dashboard')
}
export async function sendMagicLink(formData: FormData) {
const aura = await serverClient()
await aura.auth.signInWithMagicLink({ email: String(formData.get('email')) })
redirect('/login?sent=1')
}
app/login/page.tsxtsx
import Link from 'next/link'
import { login, sendMagicLink } from './actions'
export default async function LoginPage({ searchParams }: { searchParams: Promise<{ error?: string; sent?: string }> }) {
const { error, sent } = await searchParams
return (
<main>
<h1>Sign in</h1>
{error && <p role="alert">Sign-in failed: {error}</p>}
{sent && <p>If this address has an account, a sign-in link was sent.</p>}
<form action={login}>
<input name="email" type="email" placeholder="Email" required />
<input name="password" type="password" placeholder="Password" required />
<button type="submit">Sign in</button>
</form>
<form action={sendMagicLink}>
<input name="email" type="email" placeholder="Email" required />
<button type="submit">Email me a sign-in link</button>
</form>
<p>
<Link href="/signup">Create an account</Link> · <Link href="/forgot-password">Forgot your password?</Link>
</p>
</main>
)
}
app/signup/actions.tstypescript
'use server'
import { redirect } from 'next/navigation'
import { serverClient } from '@/lib/aurabase/server'
export async function signup(formData: FormData) {
const aura = await serverClient()
const { data, error } = await aura.auth.signUp({
email: String(formData.get('email')),
password: String(formData.get('password')),
})
if (error) redirect(`/signup?error=${encodeURIComponent(error.message)}`)
// जब प्रोजेक्ट को ईमेल पुष्टिकरण की आवश्यकता होती है तो अभी तक कोई सत्र नहीं है: `data.session` शून्य है।
redirect(data?.session ? '/dashboard' : '/signup?check=1')
}
app/signup/page.tsxtsx
import Link from 'next/link'
import { signup } from './actions'
export default async function SignupPage({ searchParams }: { searchParams: Promise<{ error?: string; check?: string }> }) {
const { error, check } = await searchParams
return (
<main>
<h1>Create an account</h1>
{error && <p role="alert">{error}</p>}
{check && <p>Check your inbox: confirm your email address to finish.</p>}
<form action={signup}>
<input name="email" type="email" placeholder="Email" required />
<input name="password" type="password" placeholder="Password" required minLength={8} />
<button type="submit">Sign up</button>
</form>
<p>
<Link href="/login">Already have an account?</Link>
</p>
</main>
)
}
#रीसेट करें
3. पासवर्ड रीसेट
रीसेट ईमेल <Site URL>/reset-password?token=… से लिंक होता है। साइट URL को स्टूडियो › प्रमाणीकरण › कॉन्फ़िगरेशन में सेट करें।
app/forgot-password/actions.tstypescript
'use server'
import { redirect } from 'next/navigation'
import { serverClient } from '@/lib/aurabase/server'
export async function requestReset(formData: FormData) {
const aura = await serverClient()
await aura.auth.resetPasswordForEmail(String(formData.get('email')))
// वही उत्तर कि पते पर खाता है या नहीं (कोई खाता गणना नहीं)।
redirect('/forgot-password?sent=1')
}
app/forgot-password/page.tsxtsx
import { requestReset } from './actions'
export default async function ForgotPasswordPage({ searchParams }: { searchParams: Promise<{ sent?: string }> }) {
const { sent } = await searchParams
return (
<main>
<h1>Reset your password</h1>
{sent && <p>If this address has an account, a reset link was sent.</p>}
<form action={requestReset}>
<input name="email" type="email" placeholder="Email" required />
<button type="submit">Send the link</button>
</form>
</main>
)
}
app/reset-password/actions.tstypescript
'use server'
import { redirect } from 'next/navigation'
import { serverClient } from '@/lib/aurabase/server'
export async function resetPassword(formData: FormData) {
const token = String(formData.get('token'))
const aura = await serverClient()
const { error } = await aura.auth.resetPassword(token, String(formData.get('password')))
if (error) redirect(`/reset-password?token=${encodeURIComponent(token)}&error=${encodeURIComponent(error.message)}`)
// रीसेट उपयोगकर्ता को नए सत्र के साथ साइन इन करता है; पुराने सत्र निरस्त कर दिए गए।
redirect('/dashboard')
}
app/reset-password/page.tsxtsx
import { resetPassword } from './actions'
export default async function ResetPasswordPage({ searchParams }: { searchParams: Promise<{ token?: string; error?: string }> }) {
const { token, error } = await searchParams
if (!token) return <main><p role="alert">This link is incomplete. Request a new one.</p></main>
return (
<main>
<h1>Choose a new password</h1>
{error && <p role="alert">{error}</p>}
<form action={resetPassword}>
<input type="hidden" name="token" value={token} />
<input name="password" type="password" placeholder="New password" required minLength={8} />
<button type="submit">Save</button>
</form>
</main>
)
}
#लिंक
4. ईमेल और जादुई लिंक
पुष्टिकरण और मैजिक-लिंक ईमेल <Site URL>/verify-email?token=… और <Site URL>/magic-link/verify?token=… से लिंक होते हैं। एक रूट हैंडलर टोकन का उपभोग करता है, फिर रीडायरेक्ट करता है।
app/verify-email/route.tstypescript
import { NextResponse, type NextRequest } from 'next/server'
import { serverClient } from '@/lib/aurabase/server'
export async function GET(request: NextRequest) {
const token = request.nextUrl.searchParams.get('token')
if (token) {
const aura = await serverClient()
const { error } = await aura.auth.verifyOtp({ type: 'signup', token })
if (!error) return NextResponse.redirect(new URL('/dashboard', request.url))
}
return NextResponse.redirect(new URL('/login?error=LINK_INVALID', request.url))
}
app/magic-link/verify/route.tstypescript
import { NextResponse, type NextRequest } from 'next/server'
import { serverClient } from '@/lib/aurabase/server'
export async function GET(request: NextRequest) {
const token = request.nextUrl.searchParams.get('token')
if (token) {
const aura = await serverClient()
const { error } = await aura.auth.verifyMagicLink(token)
if (!error) return NextResponse.redirect(new URL('/dashboard', request.url))
}
return NextResponse.redirect(new URL('/login?error=LINK_INVALID', request.url))
}
#डैशबोर्ड
5. संरक्षित पृष्ठ
app/dashboard/actions.tstypescript
'use server'
import { redirect } from 'next/navigation'
import { serverClient } from '@/lib/aurabase/server'
export async function logout() {
const aura = await serverClient()
await aura.auth.signOut()
redirect('/login')
}
app/dashboard/page.tsxtsx
import { redirect } from 'next/navigation'
import { serverClient } from '@/lib/aurabase/server'
import { logout } from './actions'
export default async function DashboardPage() {
const aura = await serverClient()
const { data: user } = await aura.auth.getUser()
if (!user) redirect('/login')
return (
<main>
<h1>Dashboard</h1>
<p>Signed in as {user.email}</p>
<form action={logout}>
<button type="submit">Sign out</button>
</form>
</main>
)
}
#परीक्षा
6. इसे स्थानीय स्तर पर आज़माएं
स्थानीय स्टैक पर, ईमेल भेजे जाने के बजाय मेलपिट द्वारा कैप्चर कर लिए जाते हैं। इसके इनबॉक्स को kubectl -n aurabase-dev port-forward svc/aurabase-mailpit 8025:8025 से खोलें, फिर http://localhost:8025 से। अपने ऐप का मूल स्रोत (उदाहरण के लिए http://localhost:3000/*) को स्टूडियो › प्रमाणीकरण › कॉन्फ़िगरेशन › रीडायरेक्ट यूआरएल में जोड़ें और इसमें साइट यूआरएल सेट करें।
जानकारी
proxy.ts केवल PROTECTED में सूचीबद्ध मार्गों पर रीडायरेक्ट करता है; डैशबोर्ड पृष्ठ उपयोगकर्ता को getUser() के साथ फिर से जांचता है क्योंकि प्रॉक्सी अपने आप में एक प्राधिकरण सीमा नहीं है।
आखरी अपडेट · 25 अक्टू॰ 2026