Logotipo de Aurabase
aurabasedocumentos
documentos›Guías›Next.js sign-in pages

Páginas de inicio de sesión listas para usar para Next.js

Ocho archivos pequeños le dan a una aplicación Next.js un flujo de inicio de sesión completo, incluidas las páginas a las que apuntan los enlaces en los correos electrónicos Aurabase.

8 min leer·Nivel intermedio·Revisado el 25 oct 2026
Este texto en inglés se generó automáticamente a partir del original en francés y aún no ha sido revisado.
La fuente en inglés ha cambiado desde esta traducción. Es posible que parte de la información esté desactualizada.
Esta página fue traducida automáticamente. La versión en inglés es autorizada.
#
Configuración

1. Clientes y apoderados

Estas páginas utilizan App Router con sesiones de cookies (consulte Next.js SSR). Configure NEXT_PUBLIC_AURABASE_URL y NEXT_PUBLIC_AURABASE_ANON_KEY, luego agregue el cliente del servidor y el proxy. En Next.js 15, nombre el archivo middleware.ts y la función 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(),
      // Los componentes del servidor no pueden escribir cookies: en su lugar, el siguiente proxy actualiza la sesión.
      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() actualiza los tokens Y pregunta al servidor quién es el usuario. Nunca autorice con 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).*)'] }
#
Iniciar sesión

2. Inicia sesión y regístrate

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')}`)
  // Un usuario con MFA habilitado obtiene un desafío en lugar de una sesión: solicite el código aquí.
  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)}`)
  // Cuando el proyecto requiere confirmación por correo electrónico, todavía no hay sesión: `data.session` es nulo.
  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>
  )
}
#
Reiniciar

3. Restablecer contraseña

El correo electrónico de restablecimiento se vincula a <Site URL>/reset-password?token=…. Establezca la URL del sitio en Studio › Autenticación › Configuración.

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')))
  // La misma respuesta tenga o no una cuenta la dirección (sin enumeración de cuentas).
  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)}`)
  // El reinicio inicia la sesión del usuario con una nueva sesión; Las sesiones anteriores fueron revocadas.
  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>
  )
}

Los correos electrónicos de confirmación y enlace mágico enlazan a <Site URL>/verify-email?token=… y <Site URL>/magic-link/verify?token=…. Un controlador de ruta consume el token y luego lo redirige.

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))
}
#
Panel de control

5. Página protegida

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>
  )
}
#
prueba

6. Pruébalo localmente

En la pila local, Mailpit captura los correos electrónicos en lugar de enviarlos. Abra su bandeja de entrada con kubectl -n aurabase-dev port-forward svc/aurabase-mailpit 8025:8025, luego http://localhost:8025. Agregue el origen de su aplicación (por ejemplo, http://localhost:3000/*) a Studio › Autenticación › Configuración › Redirigir URL y establezca la URL del sitio.

Información

proxy.ts solo redirecciona en las rutas enumeradas en PROTECTED; la página del panel verifica al usuario nuevamente con getUser() porque un proxy no es un límite de autorización en sí mismo.

Última actualización · 25 oct 2026