AbsoluteJS

absolutejs-auth-example

absolutejs-auth-examplev0.0.1betaDev Tools

OAuth2 authentication with @absolutejs/auth, demonstrated across all six AbsoluteJS frontends — React, Vue, Svelte, Angular, HTML, and HTMX — backed by one Elysia server, one JSON/OAuth API, and one shared CSS file.

#Installation

BASH
# Private workspace project: ~/abs/examples/auth

#Capabilities

Overview

OAuth2 authentication with @absolutejs/auth, demonstrated across all six AbsoluteJS frontends — React, Vue, Svelte, Angular, HTML, and HTMX — backed by one Elysia server, one JSON/OAuth API, and one shared CSS file.

What it shows

Every framework implements the same flows against the shared backend:

OAuth / accounts (every framework):

Sign in / sign up with any of 60 OAuth2 providers (one-tap buttons for a

Show 10 more

featured few, plus a full provider dropdown).

Protected page that renders the authenticated user record.

Settings — account overview, link additional login providers to the same

canonical user, search/sort linked identities, set a primary identity, remove identities, resolve account-merge requests, and delete the account.

Connectors — link Google (Gmail/Contacts) and Meta (Facebook/Instagram)

data connectors, then view and revoke the resulting OAuth grants and the external accounts discovered for them.

Post-OAuth surfaces (rolling out per framework — React first):

Credentials — email + password sign-up / sign-in via createAuthClient,

with HIBP breach check at register + login and disposable-domain rejection.

Passkeys — WebAuthn conditional-UI autofill + "upgrade to passkey" prompt

Run it

A Postgres database (e.g. Neon) is required — the session store and user data live there. providersConfiguration reads every provider's credentials from the environment, so set the providers you intend to demo.

Showcase env vars (optional but recommended)

Routes

Path — Framework

/ — Landing page (links to all six)

/react, /react/{protected,settings,connectors} — React (UniversalRouter)

Show 9 more

/vue, /vue/ — Vue (vue-router)

/svelte, /svelte/ — Svelte (@absolutejs/absolute/svelte/router)

/angular, /angular/ — Angular (provideRouter)

/html, /html/ — HTML (static page + fetch/DOM script)

/htmx, /htmx/ — HTMX (server-rendered fragments)

/oauth2/ — Auth library routes (authorize/callback/status/signout, IdP endpoints)

/auth/ — Credentials / MFA / passkeys / passwordless / sessions routes

/.well-known/openid-configuration — OIDC discovery (the example is an IdP)

/api/ — Shared JSON API (identities, linked providers, account)

Scripts

bun dev · bun start · bun run build · bun run typecheck · bun run lint · bun run format · bun db:push · bun db:studio

Outcomes

What you can build

Build on the supported package contract

Use absolutejs-auth-example through its supported public entry points.

Hardening checklist

Production guidance

Make every external boundary explicitPin the deployed absolutejs-auth-example version, replace example or memory-backed dependencies with durable implementations, bound external calls, protect credentials, and emit enough evidence to retry or recover safely.

Follow in order

Troubleshooting path

1
Trace from the first failed boundary
Reproduce the smallest canonical absolutejs-auth-example example, confirm the supported entry point and version in the API explorer, then inspect the first boundary that did not produce its documented result.

#Run it

Partial snippet

Working example for Run it.

BASH
bun install

# Configure secrets (.env): a Neon/Postgres DATABASE_URL, an
# OAUTH2_CALLBACK_URI=http://localhost:3000/oauth2/callback, and the provider
# client id/secret pairs you want to use (see .env.example).
bun db:push        # provision the auth + linked-provider tables
bun dev            # http://localhost:3000
Partial snippet

Working example for Showcase env vars (optional but recommended).

BASH
PUBLIC_ORIGIN=http://localhost:3000   # used for WebAuthn rpId + OIDC issuer
OIDC_SIGNING_KEY_JWK=                 # generated at boot if unset (logged with a warning)
MFA_ENCRYPTION_KEY=                   # generated at boot if unset (TOTP secrets lost on reboot)
AUDIT_INTEGRITY_SECRET=               # falls back to keyless SHA-256 chaining if unset

#Package commands

Scripts declared by this package manifest.

bun run buildabsolute build
bun run devabsolute dev
bun run formatabsolute prettier --write
bun run lintabsolute eslint
bun run startabsolute start
bun run typecheckabsolute typecheck
Private workspace project
This project is maintained inside the workspace and is not published as a standalone npm package.