Skip to main content

Examples

Auth Flow

Login, token refresh with countdown, constraint ordering, and session management.

Try it

Loading example…

Click “Sign In” to authenticate. Watch the token countdown and auto-refresh. Use “Force Expire” or adjust fail rates to explore error handling.

How it works

An authentication flow with token refresh, constraint ordering, and session management – all driven by Directive’s constraint–resolver pattern.

  1. Facts token, refreshToken, expiresAt, user, status, and a ticking now fact updated every 1s
  2. Derivations isExpiringSoon auto-tracks now and expiresAt, driving the refreshNeeded constraint reactively
  3. Constraints refreshNeeded (priority 90) fires when the token is expiring soon. needsUser (priority 80) uses after: ['refreshNeeded'] to ensure the user profile is fetched with a fresh token
  4. Resolvers login handles authentication, refreshToken retries with exponential backoff, fetchUser loads the user profile
  5. Effects logStatusChange records status transitions to the event timeline for observability

Summary

What: An authentication flow with login, automatic token refresh, user profile fetching, and logout – all with configurable failure rates and token lifetimes.

How: A ticking now fact drives isExpiringSoon, which triggers refreshNeeded automatically. The after ordering on needsUser ensures the user profile is always fetched with a valid token.

Why it works: Auth flows are full of timing-dependent, ordered operations. Directive’s constraint ordering (after) and auto-tracked derivations eliminate manual timers and race conditions.

Source code

// Source file "auth-flow.ts" not found

Stay in the loop. Sign up for our newsletter.

We care about your data. We'll never share your email.

Powered by Directive. This signup uses a Directive module with facts, derivations, constraints, and resolvers – zero useState, zero useEffect. Read how it works