Better Auth

Instalación

bun add better-auth @drop-in/graffiti

Variable de entorno

.env

BETTER_AUTH_SECRET="abc"
BETTER_AUTH_URL=http://localhost:5432

Crear instancia del servidor de Better Auth

src/lib/auth.ts

import { betterAuth } from "better-auth";
import { drizzleAdapter } from "better-auth/adapters/drizzle";
import { db } from "$lib/server/db";
import { admin } from "better-auth/plugins";

export const auth = betterAuth({
emailAndPassword: {
enabled: true
},
database: drizzleAdapter(db, {
provider: "pg"
}),
plugins: [admin()]
});

Generar tablas para la base de datos

bunx @better-auth/cli generate

Ya que lo que se genera en el archivo son los esquemas de la base de datos para los usuarios, podemos cortar todo el contenido y pegarlo en el archivo de src/lib/server/db/schema.ts y borrar el archivo que se generó, auth-schema.ts.

Aplicar cambios en la base de datos

bun run db:push

Opcional. Ver base de datos con Studio

bun run db:studio

Generar instancia para usar del lado del cliente

• Verificar que la importación sea desde better-auth/svelte

src/lib/auth-client.ts

import { adminClient } from "better-auth/client/plugins";
import { createAuthClient } from "better-auth/svelte";

export const authClient = createAuthClient({
  plugins: [adminClient()]
});

Formulario de registro

Hooks/Middleware

• Para exponer las rutas de Better-Auth como sign-up

src/hooks.server.ts

import { building } from "$app/environment";
import { auth } from "$lib/auth";
import type { Handle } from "@sveltejs/kit";
import { sequence } from "@sveltejs/kit/hooks";
import { svelteKitHandler } from "better-auth/svelte-kit";

const authHandle: Handle = async ({ event, resolve }) => {
  return svelteKitHandler({ event, resolve, auth, building })
}

// Add session information to the event.locals
const sessionHandle: Handle = async ({ event, resolve }) => {
  const session = await auth.api.getSession({
    headers: event.request.headers
  });
  
  event.locals.user = session?.user;

  const response = await resolve(event);
  return response;
}

export const handle = sequence(authHandle, sessionHandler);

Agregar información del usuario a los locals

src/app.d.ts

// See https://svelte.dev/docs/kit/types#app.d.ts
// for information about these interfaces
declare global {
  namespace App {
    // interface Error {}
    interface Locals {
      user: typeof import("$lib/auth-client").authClient.$Infer.Session.user | undefined;
    }
    // interface PageData {}
    // interface PageState {}
    // interface Platform {}
  }
}

export { };

Proteger rutas auth

Utilizando la función de carga

• +layout.ts se ejecuta del lado del cliente
• +layout.server.ts se ejecuta del lado del servidor

src/routes/auth/+layout.server.ts

import { redirect } from '@sveltejs/kit';

export async function load({ locals }) {
  if (locals.user?.id) {
    throw redirect(302, "/");
  }
}