Login alojado (Authorization Code + PKCE)

import { AurisClient } from '@auris/js'
 
const auris = new AurisClient({
  domain: 'auth.tudominio.com',
  clientId: 'tu-client-id',
  redirectUri: 'http://localhost:3000/callback',
  // Opcional: persistir tokens de refresco entre sesiones
  autoRefresh: true,
})
 
// Iniciar sesión — redirige el navegador a la página de login alojada
await auris.loginWithRedirect()
 
// En tu página de callback (http://localhost:3000/callback)
// Llama a esto una vez cuando se carga la página
const result = await auris.handleRedirectCallback()
 
if (result.user) {
  console.log('Autenticado:', result.user)
  // result.user: { id, email, name, firstName, lastName, roles, ... }
}
 
// Comprobar estado de autenticación
const isAuthenticated = await auris.isAuthenticated()
 
// Obtener el usuario actual sin activar una redirección
const user = await auris.getUser()
 
// Obtener un token de acceso (se refresca automáticamente si expiró cuando autoRefresh: true)
const accessToken = await auris.getAccessToken()
 
// Cerrar sesión
await auris.logout({ returnTo: 'http://localhost:3000' })

import { AurisProvider, useAuris } from '@auris/react'
 
// Envuelve la raíz de tu app con AurisProvider
function App() {
  return (
    <AurisProvider
      domain="auth.tudominio.com"
      clientId="tu-client-id"
      redirectUri="http://localhost:3000/callback"
    >
      <MyApp />
    </AurisProvider>
  )
}
 
// Componente de botón de inicio de sesión
function LoginButton() {
  const { loginWithRedirect, logout, isAuthenticated, user, isLoading } = useAuris()
 
  if (isLoading) return <p>Cargando...</p>
 
  if (isAuthenticated) {
    return (
      <div>
        <p>Bienvenido, {user.name}</p>
        <button onClick={() => logout({ returnTo: window.location.origin })}>
          Cerrar sesión
        </button>
      </div>
    )
  }
 
  return <button onClick={loginWithRedirect}>Iniciar sesión</button>
}
 
// Página de callback — gestiona la redirección de vuelta desde Auris
// Coloca esto en la ruta de tu redirectUri
import { useEffect } from 'react'
import { useAuris } from '@auris/react'
import { useNavigate } from 'react-router-dom'
 
function CallbackPage() {
  const { handleRedirectCallback } = useAuris()
  const navigate = useNavigate()
 
  useEffect(() => {
    handleRedirectCallback().then(() => {
      navigate('/dashboard')
    })
  }, [])
 
  return <p>Completando inicio de sesión...</p>
}
 
// AuthGuard — protege rutas que requieren autenticación
import { AuthGuard } from '@auris/react'
 
function ProtectedPage() {
  return (
    <AuthGuard>
      <h1>Esta página requiere autenticación</h1>
    </AuthGuard>
  )
}

// middleware.ts — proteger rutas en el edge
import { aurisMiddleware } from '@auris/nextjs/middleware'
 
export default aurisMiddleware({
  protectedPaths: ['/dashboard(.*)'],
  publicPaths: ['/', '/about', '/pricing'],
  loginUrl: '/auth/login',
})
 
export const config = {
  matcher: ['/((?!_next|api|favicon).*)'],
}
 
// app/layout.tsx — proporcionar contexto Auris a los Client Components
import { AurisProvider } from '@auris/nextjs'
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <AurisProvider
          domain={process.env.NEXT_PUBLIC_AURIS_DOMAIN!}
          clientId={process.env.NEXT_PUBLIC_AURIS_CLIENT_ID!}
          redirectUri={`${process.env.NEXT_PUBLIC_APP_URL}/auth/callback`}
        >
          {children}
        </AurisProvider>
      </body>
    </html>
  )
}
 
// app/auth/login/page.tsx — iniciar la redirección de inicio de sesión
'use client'
import { useAuris } from '@auris/react'
import { useEffect } from 'react'
 
export default function LoginPage() {
  const { loginWithRedirect } = useAuris()
  useEffect(() => { loginWithRedirect() }, [])
  return <p>Redirigiendo al inicio de sesión...</p>
}
 
// app/auth/callback/page.tsx — gestionar la redirección de vuelta
'use client'
import { useAuris } from '@auris/react'
import { useRouter } from 'next/navigation'
import { useEffect } from 'react'
 
export default function CallbackPage() {
  const { handleRedirectCallback } = useAuris()
  const router = useRouter()
  useEffect(() => {
    handleRedirectCallback().then(() => router.push('/dashboard'))
  }, [])
  return <p>Completando inicio de sesión...</p>
}
 
// app/dashboard/page.tsx — Server Component con sesión
import { getSession } from '@auris/nextjs/server'
import { redirect } from 'next/navigation'
 
export default async function DashboardPage() {
  const session = await getSession()
  if (!session) redirect('/auth/login')
 
  return <h1>Bienvenido, {session.user.name}</h1>
}
 
// Ruta API — proteger endpoints del lado del servidor
import { withAuth } from '@auris/nextjs/server'
 
export const GET = withAuth(async (req, { session }) => {
  return Response.json({ userId: session.user.id })
})

<?php
use Auris\AurisClient;
use Auris\AurisConfig;
 
// composer require auris/sdk
require 'vendor/autoload.php';
 
$config = new AurisConfig(
    domain: 'auth.tudominio.com',
    clientId: 'tu-client-id',
    redirectUri: 'http://localhost:8000/callback.php'
);
$auris = new AurisClient($config);
 
// login.php — redirigir al login alojado
session_start();
header('Location: ' . $auris->getLoginUrl());
exit;
 
// callback.php — gestionar la redirección de vuelta
session_start();
$result = $auris->handleCallback(
    code: $_GET['code'],
    state: $_GET['state']
);
$user = $result->getUser();
 
echo 'Bienvenido, ' . htmlspecialchars($user->name);

import { AurisClient } from '@auris/js'
 
const auris = new AurisClient({
  domain: 'auth.yourdomain.com',
  clientId: 'your-client-id',
  redirectUri: 'http://localhost:3000/callback',
  // Optional: persist refresh tokens across sessions
  autoRefresh: true,
})
 
// Trigger login — redirects the browser to the hosted login page
await auris.loginWithRedirect()
 
// In your callback page (http://localhost:3000/callback)
// Call this once when the page loads
const result = await auris.handleRedirectCallback()
 
if (result.user) {
  console.log('Authenticated:', result.user)
  // result.user: { id, email, name, firstName, lastName, roles, ... }
}
 
// Check authentication state
const isAuthenticated = await auris.isAuthenticated()
 
// Get the current user without triggering a redirect
const user = await auris.getUser()
 
// Get an access token (auto-refreshes if expired when autoRefresh: true)
const accessToken = await auris.getAccessToken()
 
// Log out
await auris.logout({ returnTo: 'http://localhost:3000' })

import { AurisProvider, useAuris } from '@auris/react'
 
// Wrap your app root with AurisProvider
function App() {
  return (
    <AurisProvider
      domain="auth.yourdomain.com"
      clientId="your-client-id"
      redirectUri="http://localhost:3000/callback"
    >
      <MyApp />
    </AurisProvider>
  )
}
 
// Login button component
function LoginButton() {
  const { loginWithRedirect, logout, isAuthenticated, user, isLoading } = useAuris()
 
  if (isLoading) return <p>Loading...</p>
 
  if (isAuthenticated) {
    return (
      <div>
        <p>Welcome, {user.name}</p>
        <button onClick={() => logout({ returnTo: window.location.origin })}>
          Log out
        </button>
      </div>
    )
  }
 
  return <button onClick={loginWithRedirect}>Log in</button>
}
 
// Callback page — handles the redirect back from Auris
// Place this at your redirectUri path
import { useEffect } from 'react'
import { useAuris } from '@auris/react'
import { useNavigate } from 'react-router-dom'
 
function CallbackPage() {
  const { handleRedirectCallback } = useAuris()
  const navigate = useNavigate()
 
  useEffect(() => {
    handleRedirectCallback().then(() => {
      navigate('/dashboard')
    })
  }, [])
 
  return <p>Completing sign in...</p>
}
 
// AuthGuard — protect routes that require authentication
import { AuthGuard } from '@auris/react'
 
function ProtectedPage() {
  return (
    <AuthGuard>
      <h1>This page requires authentication</h1>
    </AuthGuard>
  )
}

// middleware.ts — protect routes at the edge
import { aurisMiddleware } from '@auris/nextjs/middleware'
 
export default aurisMiddleware({
  protectedPaths: ['/dashboard(.*)'],
  publicPaths: ['/', '/about', '/pricing'],
  loginUrl: '/auth/login',
})
 
export const config = {
  matcher: ['/((?!_next|api|favicon).*)'],
}
 
// app/layout.tsx — provide Auris context to Client Components
import { AurisProvider } from '@auris/nextjs'
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <AurisProvider
          domain={process.env.NEXT_PUBLIC_AURIS_DOMAIN!}
          clientId={process.env.NEXT_PUBLIC_AURIS_CLIENT_ID!}
          redirectUri={`${process.env.NEXT_PUBLIC_APP_URL}/auth/callback`}
        >
          {children}
        </AurisProvider>
      </body>
    </html>
  )
}
 
// app/auth/login/page.tsx — initiate the login redirect
'use client'
import { useAuris } from '@auris/react'
import { useEffect } from 'react'
 
export default function LoginPage() {
  const { loginWithRedirect } = useAuris()
  useEffect(() => { loginWithRedirect() }, [])
  return <p>Redirecting to sign in...</p>
}
 
// app/auth/callback/page.tsx — handle the redirect back
'use client'
import { useAuris } from '@auris/react'
import { useRouter } from 'next/navigation'
import { useEffect } from 'react'
 
export default function CallbackPage() {
  const { handleRedirectCallback } = useAuris()
  const router = useRouter()
  useEffect(() => {
    handleRedirectCallback().then(() => router.push('/dashboard'))
  }, [])
  return <p>Completing sign in...</p>
}
 
// app/dashboard/page.tsx — Server Component with session
import { getSession } from '@auris/nextjs/server'
import { redirect } from 'next/navigation'
 
export default async function DashboardPage() {
  const session = await getSession()
  if (!session) redirect('/auth/login')
 
  return <h1>Welcome, {session.user.name}</h1>
}
 
// API route — protect server-side endpoints
import { withAuth } from '@auris/nextjs/server'
 
export const GET = withAuth(async (req, { session }) => {
  return Response.json({ userId: session.user.id })
})

<?php
use Auris\AurisClient;
use Auris\AurisConfig;
 
// composer require auris/sdk
require 'vendor/autoload.php';
 
$config = new AurisConfig(
    domain: 'auth.yourdomain.com',
    clientId: 'your-client-id',
    redirectUri: 'http://localhost:8000/callback.php'
);
$auris = new AurisClient($config);
 
// login.php — redirect to hosted login
session_start();
header('Location: ' . $auris->getLoginUrl());
exit;
 
// callback.php — handle the redirect back
session_start();
$result = $auris->handleCallback(
    code: $_GET['code'],
    state: $_GET['state']
);
$user = $result->getUser();
 
echo 'Welcome, ' . htmlspecialchars($user->name);