Authentication

Show the login and signup modal, handle OAuth providers, and react to auth state changes.

Open the modal

After calling init(), use these methods to open the auth modal from anywhere in your code.

typescript

// Open as login
Auther.login();

// Open as signup
Auther.signup();

// Mount to a button — opens login on click
Auther.mount('#login-btn');
Auther.mount(document.getElementById('login-btn'));

React to auth changes

Pass an onAuth callback to init(), or subscribe after the fact. Fires immediately with the current user (or null), then on every login/logout.

typescript

// Option A — inline with init()
Auther.init({
  clientId: 'req_live_...',
  onAuth: (user) => {
    if (user) showApp();
    else showLanding();
  },
});

// Option B — subscribe after init
const unsubscribe = Auther.onAuthStateChange((user) => {
  console.log(user ? 'Signed in' : 'Signed out');
});

// Stop listening when your component unmounts
unsubscribe();

OAuth providers

Google, GitHub, and Meta are supported. Enable them in the Auther dashboard under Settings → Social Providers and add your OAuth app credentials. The SDK picks up the config automatically — no extra code needed.

Log out

typescript

Auther.logout();
// Clears the local user, fires onAuthStateChange(null)

Cookies, not localStorage

Auther sets the access token as an HTTP-only cookie scoped to your domain. It is never readable by JavaScript — protecting against XSS token theft.