Authentication operations with the HelloJohn JavaScript SDK — sign in, sign up, sign out, OAuth, and magic links in vanilla JS environments.

Auth Operations

The HelloJohn JavaScript SDK (@hellojohn/js) provides authentication operations for non-framework environments — Vanilla JS, Svelte, SolidJS, Qwik, or any environment without React.

Setup

import { HelloJohn } from "@hellojohn/js";

const hj = new HelloJohn({
  tenantId: "tnt_01HABCDEF654321",
  // Optional: custom API URL for self-hosted instances
  // apiUrl: "https://auth.example.com",
});

The client is a singleton — create it once and reuse it across your app.

const { data, error } = await hj.auth.signIn({
  email: "jane@example.com",
  password: "SecurePass123!",
});

if (error) {
  console.error(error.message);
} else {
  console.log("Signed in:", data.session.userId);
}

const { data, error } = await hj.auth.signUp({
  email: "jane@example.com",
  password: "SecurePass123!",
  firstName: "Jane",
  lastName: "Doe",
});

Sign Out

// Sign out current session
await hj.auth.signOut();

// Sign out all sessions
await hj.auth.signOut({ scope: "global" });

// Redirects the browser to the provider
await hj.auth.signInWithOAuth({
  provider: "google",
  redirectTo: window.location.origin + "/dashboard",
});

After the OAuth flow completes, HelloJohn redirects back to your app with session tokens. Call hj.session.getSession() to retrieve them.

Magic Link

const { error } = await hj.auth.sendMagicLink({
  email: "jane@example.com",
  redirectTo: window.location.origin + "/dashboard",
});

if (!error) {
  alert("Check your email for a sign-in link.");
}

Password Reset

// Send reset email
await hj.auth.sendPasswordReset({ email: "jane@example.com" });

// Confirm new password (after user clicks the link)
await hj.auth.confirmPasswordReset({
  token: new URLSearchParams(window.location.search).get("token")!,
  newPassword: "NewSecurePass456!",
});

Auth State Listener

React to sign-in and sign-out events anywhere in your app:

const { unsubscribe } = hj.auth.onAuthStateChange((event, session) => {
  switch (event) {
    case "SIGNED_IN":
      console.log("User signed in:", session?.userId);
      redirectToDashboard();
      break;
    case "SIGNED_OUT":
      console.log("User signed out");
      redirectToLogin();
      break;
    case "TOKEN_REFRESHED":
      console.log("Token refreshed");
      break;
  }
});

// Cleanup
unsubscribe();

MFA

If MFA is required after sign-in:

const { data, error } = await hj.auth.signIn({ email, password });

if (data?.mfaRequired) {
  // Show MFA challenge UI
  const { error: mfaError } = await hj.auth.verifyMFA({
    challengeId: data.challengeId,
    code: userEnteredCode,
  });
}

Auth Operations

On this page