@tapstack/auth

Client-side SDK for Tapstack Auth. It wraps the existing Auth API routes and provides a small React integration.

Installation

npm install @tapstack/auth

Quick Start

import { createAuthClient, createLocalStorageTokenStore } from '@tapstack/auth';

const tokenStore = createLocalStorageTokenStore();

const auth = createAuthClient({
  // Base URL where the auth routes are mounted
  // Example for module routes: https://api.tapstack.com/api/m
  baseUrl: 'http://localhost:3001/api/m',
  getStoredTokens: tokenStore.getStoredTokens,
  setStoredTokens: tokenStore.setStoredTokens,
});

const result = await auth.login('[email protected]', 'password');
if (!('requiresMfa' in result)) {
  console.log('Logged in user:', result.account);
}

Magic Link Login

await auth.sendMagicLink('[email protected]', 'http://localhost:3000/auth/magic-link');

Handle the callback URL by extracting the token query param and verifying it:

const params = new URLSearchParams(window.location.search);
const token = params.get('token');
if (token) {
  const result = await auth.verifyMagicLink(token);
  console.log('Logged in with magic link:', result.account);
}

Notes:

• The redirectUrl you pass to sendMagicLink is used as the base URL, and the API appends ?token=....
• On success, verifyMagicLink stores the access and refresh tokens just like login.

OAuth Login URL

const url = auth.getSocialAuthUrl('google', 'http://localhost:3000/auth/callback');
// Redirect the browser
window.location.assign(url);

React Integration

import React from 'react';
import { AuthProvider, useAuth } from '@tapstack/auth';

function App() {
  const auth = createAuthClient({ baseUrl: 'http://localhost:3001/api/m' });

  return (
    <AuthProvider client={auth}>
      <LoginForm />
    </AuthProvider>
  );
}

function LoginForm() {
  const { signIn, signInWithOAuth, isLoading, error, user } = useAuth();

  if (isLoading) return <div>Loading...</div>;
  if (user) return <div>Welcome {user.email}</div>;

  return (
    <div>
      <button onClick={() => signIn('[email protected]', 'password')}>Sign in</button>
      <button onClick={() => signInWithOAuth('google', 'http://localhost:3000/auth/callback')}>
        Sign in with Google
      </button>
      {error && <div>{error.message}</div>}
    </div>
  );
}

Token Storage Helpers

import { createMemoryTokenStore, createLocalStorageTokenStore } from '@tapstack/auth';

const memoryStore = createMemoryTokenStore();
const localStore = createLocalStorageTokenStore({ key: 'tapstack_auth_tokens' });

Notes

• autoRefresh is enabled by default and will refresh access tokens before expiry if expiresAt is provided.
• The SDK expects Tapstack-style API responses: { success: true, data: ... }.

Publishing (maintainers)

First-time publish for @tapstack/auth requires:

1. Create the npm organization (one-time): Go to Create organization – npm and create an organization with the scope tapstack. Without this, npm publish returns 404 for @tapstack/auth.

2. Authenticate:

   • From your machine: Run npm login and sign in with an npm user that is a member of the tapstack org (or use a token in ~/.npmrc: //registry.npmjs.org/:_authToken=YOUR_TOKEN). Do not commit .npmrc or the token.
   • From GitHub Actions: Add an npm token as the repo secret NPM_TOKEN; the workflow uses it automatically.

3. Publish: From the repo root, npm publish --workspace packages/auth --access public.

License

MIT