solid-auth0

⚠️ Warning: This library is not thoroughly tested. Use it at your own risk, especially in production environments. Contributions and feedback are welcome to improve the library's reliability and functionality.

solid-auth0 is a lightweight, SolidJS wrapper for the auth0-spa-js.

This library is designed to integrate Auth0 authentication capabilities while leveraging SolidJS's reactivity.

Features

• Fine-Grained Reactivity: Uses SolidJS Store for atomic state updates.
• Auto-Sync Engine: Automatically synchronises the UI state after logins, logouts, and token refreshes.
• Lightweight: Zero bloat—only exports what you actually need to build a Solid app

Installation

pnpm add solid-auth0

Usage Example

Wrap your application in the SolidAuthProvider. Note that v2.0.0 uses the options prop for configuration.

/* @refresh reload */
import { Auth0ClientOptions, SolidAuthProvider, useSolidAuth } from 'solid-auth0';
import { MyComponent } from './MyComponent';
import { render } from 'solid-js/web';

const root = document.getElementById('root');

if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
  throw new Error(
    'Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?',
  );
}

const options: Auth0ClientOptions = {
  domain: import.meta.env.VITE_APP_DOMAIN,
  clientId: import.meta.env.VITE_APP_CLIENT_ID,
  authorizationParams: {
    audience: import.meta.env.VITE_APP_AUDIENCE,
    redirect_uri: window.location.origin,
    max_age: 12 * 3600,
    ui_locales: 'en',
  },
};

render(
  () => (
    <SolidAuthProvider options={options}>
      <MyComponent />
    </SolidAuthProvider>
  ),
  root!,
);

Consuming Auth State

Use the useSolidAuth hook to access the reactive state and authentication methods.

const MyComponent: Component = () => {
  const { state, login, logout } = useSolidAuth();

  return (
    <Show when={!state.isLoading} fallback={<p>Checking session...</p>}>
      <Show when={state.isAuthenticated} fallback={<button onClick={login}>Log In</button>}>
        <div>
          <span>Welcome, {state.user?.name}</span>
          <img src={state.user?.picture} width="30" style={{ 'border-radius': '50%' }} />
          <button type="button" onClick={logout}>
            Log Out
          </button>
        </div>
      </Show>
    </Show>
  );
};

AuthOptions Interface

You can configure the authentication options by passing an object of type Auth0ClientOptions to the SolidAuthProvider. This object includes settings like domain, clientId, and authorizationParams.

API Reference

state Object (Reactive Store)

The state object provided by useSolidAuth() contains:

• user: The authenticated user object (or null).
• isAuthenticated: Boolean indicating if the session is active.
• isLoading: Boolean indicating if the SDK is initialising or processing a redirect.
• error: An OAuthError object if an operation failed.

Methods

• login(options?): Redirect to Auth0 Login.
• loginWithPopup(options?, config?): Open Auth0 Login in a popup.
• logout(options?): Log out the user.
• getToken(options?): Get an Access Token silently (cached).
• getTokenWithPopup(options?, config?): Get an Access Token via popup.

Custom Errors

The library exports an OAuthError class. You can use this to handle specific authentication failures:

if (state.error instanceof OAuthError) {
  console.error(state.error.error_description);
}

License

This project is licensed under the MIT License - see the LICENSE file for details.

Disclaimer

This library was developed for personal projects. It may not meet the quality or stability standards required for high-stakes production environments. Contributions are highly encouraged!