Auris
Comenzar gratis

Next.js SDK

Integracion completa de Auris para Next.js con soporte para App Router y Pages Router.

Instalacion

npm install @auris/nextjs
# o
yarn add @auris/nextjs
# o
pnpm add @auris/nextjs

Configuracion

Variables de entorno

Agrega las siguientes variables a tu archivo .env.local:

NEXT_PUBLIC_AURIS_PUBLISHABLE_KEY=pk_live_xxxxx
AURIS_API_KEY=sk_live_xxxxx
NEXT_PUBLIC_AURIS_API_URL=https://api.aurisid.com

Provider (App Router)

Envuelve tu aplicacion con AurisProvider:

// app/layout.tsx
import { AurisProvider } from '@auris/nextjs';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="es">
      <body>
        <AurisProvider>
          {children}
        </AurisProvider>
      </body>
    </html>
  );
}

Provider (Pages Router)

// pages/_app.tsx
import { AurisProvider } from '@auris/nextjs';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <AurisProvider>
      <Component {...pageProps} />
    </AurisProvider>
  );
}

Middleware

Protege tus rutas con el middleware de autenticacion:

// middleware.ts
import { authMiddleware } from '@auris/nextjs/server';

export default authMiddleware({
  // Rutas accesibles sin autenticacion
  publicRoutes: [
    '/',
    '/sign-in',
    '/sign-up',
    '/forgot-password',
    '/api/webhooks/(.*)',
  ],
  // Rutas que siempre ignoran autenticacion
  ignoredRoutes: [
    '/api/health',
    '/_next/(.*)',
    '/favicon.ico',
  ],
  // URL de redireccion al login
  signInUrl: '/sign-in',
  // URL despues de login exitoso
  afterSignInUrl: '/dashboard',
});

export const config = {
  matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
};

Componentes de UI

SignIn

Componente de inicio de sesion pre-construido:

import { SignIn } from '@auris/nextjs';

export default function SignInPage() {
  return (
    <SignIn
      appearance={{
        variables: {
          colorPrimary: '#4f46e5',
        },
      }}
      redirectUrl="/dashboard"
    />
  );
}

SignUp

Componente de registro:

import { SignUp } from '@auris/nextjs';

export default function SignUpPage() {
  return (
    <SignUp
      appearance={{
        variables: {
          colorPrimary: '#4f46e5',
        },
      }}
      redirectUrl="/dashboard"
    />
  );
}

UserButton

Menu de usuario con avatar y opciones:

import { UserButton } from '@auris/nextjs';

export default function Header() {
  return (
    <header>
      <nav>
        {/* ... */}
        <UserButton
          afterSignOutUrl="/"
          showName={true}
        />
      </nav>
    </header>
  );
}

Hooks

useAuth

Hook principal para acceder al estado de autenticacion:

'use client';

import { useAuth } from '@auris/nextjs';

export function ProfilePage() {
  const { user, isLoaded, isSignedIn, signOut } = useAuth();

  if (!isLoaded) {
    return <div>Cargando...</div>;
  }

  if (!isSignedIn) {
    return <div>No autenticado</div>;
  }

  return (
    <div>
      <h1>Hola, {user.firstName}!</h1>
      <p>Email: {user.email}</p>
      <button onClick={() => signOut()}>
        Cerrar sesion
      </button>
    </div>
  );
}

useUser

Acceso directo al usuario actual:

'use client';

import { useUser } from '@auris/nextjs';

export function UserInfo() {
  const { user, isLoaded } = useUser();

  if (!isLoaded || !user) return null;

  return (
    <div>
      <img src={user.avatarUrl} alt={user.firstName} />
      <span>{user.email}</span>
    </div>
  );
}

useOrganization

Acceso a la organizacion activa:

'use client';

import { useOrganization } from '@auris/nextjs';

export function OrgInfo() {
  const { organization, membership, isLoaded } = useOrganization();

  if (!isLoaded || !organization) return null;

  return (
    <div>
      <h2>{organization.name}</h2>
      <p>Tu rol: {membership.role}</p>
    </div>
  );
}

Server-side

auth() helper

Obtener informacion de autenticacion en Server Components:

// app/dashboard/page.tsx
import { auth } from '@auris/nextjs/server';

export default async function DashboardPage() {
  const { userId, sessionId } = await auth();

  if (!userId) {
    redirect('/sign-in');
  }

  return <div>Usuario autenticado: {userId}</div>;
}

currentUser() helper

Obtener el usuario completo en el servidor:

// app/profile/page.tsx
import { currentUser } from '@auris/nextjs/server';

export default async function ProfilePage() {
  const user = await currentUser();

  if (!user) {
    return <div>No autenticado</div>;
  }

  return (
    <div>
      <h1>{user.firstName} {user.lastName}</h1>
      <p>{user.email}</p>
    </div>
  );
}

API Routes

Proteger API routes con autenticacion:

// app/api/protected/route.ts
import { auth } from '@auris/nextjs/server';
import { NextResponse } from 'next/server';

export async function GET() {
  const { userId } = await auth();

  if (!userId) {
    return NextResponse.json(
      { error: 'No autorizado' },
      { status: 401 }
    );
  }

  return NextResponse.json({
    message: 'Datos protegidos',
    userId
  });
}

Personalizacion

Tema personalizado

<AurisProvider
  appearance={{
    variables: {
      colorPrimary: '#4f46e5',
      colorBackground: '#ffffff',
      colorText: '#111827',
      borderRadius: '0.75rem',
      fontFamily: 'Inter, sans-serif',
    },
    elements: {
      card: 'shadow-xl',
      formButtonPrimary: 'bg-indigo-600 hover:bg-indigo-700',
    },
  }}
>
  {children}
</AurisProvider>

Recursos adicionales