React SDK

Componentes y hooks de Auris para aplicaciones React (Vite, CRA, etc).

Instalacion

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

Configuracion

Variables de entorno

Agrega las siguientes variables a tu archivo .env:

VITE_AURIS_PUBLISHABLE_KEY=pk_live_xxxxx
VITE_AURIS_API_URL=https://api.aurisid.com

Provider

Envuelve tu aplicacion con AurisProvider:

// main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { AurisProvider } from '@auris/react';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <AurisProvider
      publishableKey={import.meta.env.VITE_AURIS_PUBLISHABLE_KEY}
      apiUrl={import.meta.env.VITE_AURIS_API_URL}
    >
      <App />
    </AurisProvider>
  </React.StrictMode>
);

Componentes de UI

SignIn

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

function SignInPage() {
  return (
    <div className="auth-container">
      <SignIn
        redirectUrl="/dashboard"
        appearance={{
          variables: {
            colorPrimary: '#4f46e5',
          },
        }}
      />
    </div>
  );
}

SignUp

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

function SignUpPage() {
  return (
    <div className="auth-container">
      <SignUp
        redirectUrl="/dashboard"
        appearance={{
          variables: {
            colorPrimary: '#4f46e5',
          },
        }}
      />
    </div>
  );
}

UserButton

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

function Header() {
  return (
    <header>
      <nav>
        <Logo />
        <UserButton afterSignOutUrl="/" />
      </nav>
    </header>
  );
}

Hooks

useAuth

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

function ProtectedComponent() {
  const {
    isLoaded,
    isSignedIn,
    user,
    signOut,
    getToken
  } = useAuth();

  if (!isLoaded) {
    return <Spinner />;
  }

  if (!isSignedIn) {
    return <Navigate to="/sign-in" />;
  }

  const handleApiCall = async () => {
    const token = await getToken();
    // Usar token para llamadas a tu API
  };

  return (
    <div>
      <p>Bienvenido, {user.email}</p>
      <button onClick={handleApiCall}>Llamar API</button>
      <button onClick={() => signOut()}>Cerrar sesion</button>
    </div>
  );
}

useUser

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

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

  if (!isLoaded) return <Spinner />;
  if (!user) return null;

  return (
    <div>
      <img src={user.avatarUrl} alt="Avatar" />
      <h1>{user.firstName} {user.lastName}</h1>
      <p>{user.email}</p>
    </div>
  );
}

useSignIn

Para crear formularios de login personalizados:

import { useSignIn } from '@auris/react';

function CustomSignIn() {
  const { signIn, isLoading } = useSignIn();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    setError('');

    try {
      await signIn({ email, password });
      // Redirigir al dashboard
      navigate('/dashboard');
    } catch (err) {
      setError(err.message);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {error && <div className="error">{error}</div>}
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Contrasena"
      />
      <button type="submit" disabled={isLoading}>
        {isLoading ? 'Cargando...' : 'Iniciar sesion'}
      </button>
    </form>
  );
}

useSignUp

import { useSignUp } from '@auris/react';

function CustomSignUp() {
  const { signUp, isLoading } = useSignUp();

  const handleSubmit = async (data: SignUpData) => {
    try {
      await signUp({
        email: data.email,
        password: data.password,
        firstName: data.firstName,
        lastName: data.lastName,
      });
      navigate('/verify-email');
    } catch (err) {
      console.error(err);
    }
  };

  // ...
}

Proteger rutas

Con React Router

import { useAuth } from '@auris/react';
import { Navigate, Outlet } from 'react-router-dom';

function ProtectedRoute() {
  const { isLoaded, isSignedIn } = useAuth();

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

  if (!isSignedIn) {
    return <Navigate to="/sign-in" replace />;
  }

  return <Outlet />;
}

// En tu router
<Routes>
  <Route path="/sign-in" element={<SignInPage />} />
  <Route path="/sign-up" element={<SignUpPage />} />

  <Route element={<ProtectedRoute />}>
    <Route path="/dashboard" element={<Dashboard />} />
    <Route path="/settings" element={<Settings />} />
  </Route>
</Routes>

Llamadas a tu API

Incluir el token de autenticacion en las llamadas a tu backend:

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

function Dashboard() {
  const { getToken } = useAuth();
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const token = await getToken();

      const response = await fetch('/api/data', {
        headers: {
          'Authorization': `Bearer ${token}`,
        },
      });

      const result = await response.json();
      setData(result);
    };

    fetchData();
  }, [getToken]);

  return <div>{/* Renderizar datos */}</div>;
}