misaradmin
Repositories
1
 Projects Packages
6
 Public activity Starred repositories

@misar/sso-client (1.0.0)

Published 2026-03-13 15:17:31 +00:00 by misaradmin

Installation

@misar:registry=
npm install @misar/sso-client@1.0.0
"@misar/sso-client": "1.0.0"

About this package

@misar/sso-client

Official SSO client SDK for integrating with Misar Identity (id.misar.io).

Installation

# npm
npm install @misar/sso-client

# pnpm
pnpm add @misar/sso-client

# yarn
yarn add @misar/sso-client

Quick Start

React (Recommended)

// app/providers.tsx
import { SSOProvider } from '@misar/sso-client/react';

export function Providers({ children }) {
  return (
    <SSOProvider
      platform="misar.ink" // Your platform identifier
      onLogin={(user) => console.log('Logged in:', user)}
      onLogout={() => console.log('Logged out')}
    >
      {children}
    </SSOProvider>
  );
}

// components/auth-button.tsx
import { useAuth, LoginButton, LogoutButton } from '@misar/sso-client/react';

export function AuthButton() {
  const { isAuthenticated, user, isLoading } = useAuth();

  if (isLoading) return <div>Loading...</div>;

  if (isAuthenticated) {
    return (
      <div>
        <span>Welcome, {user.email}</span>
        <LogoutButton options={{ federated: true }}>
          Sign out
        </LogoutButton>
      </div>
    );
  }

  return <LoginButton>Sign in with Misar</LoginButton>;
}

Callback Page

// app/auth/callback/page.tsx
'use client';

import { useSSOCallback } from '@misar/sso-client/react';
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';

export default function CallbackPage() {
  const { isProcessing, error, user, returnUrl } = useSSOCallback();
  const router = useRouter();

  useEffect(() => {
    if (user) {
      router.push(returnUrl);
    }
  }, [user, returnUrl, router]);

  if (isProcessing) return <div>Authenticating...</div>;
  if (error) return <div>Error: {error}</div>;
  return null;
}

Vanilla JavaScript/TypeScript

import { MisarSSO } from '@misar/sso-client';

const sso = new MisarSSO({
  platform: 'misar.ink',
  debug: true, // Enable debug logging
});

// Initiate login
await sso.login({
  returnUrl: window.location.href,
});

// Handle callback (after redirect from id.misar.io)
const session = await sso.handleCallback();
if (session) {
  console.log('Logged in as:', session.user.email);
}

// Get current user
const user = await sso.getUser();

// Check if authenticated
const isAuth = await sso.isAuthenticated();

// Get access token for API calls
const token = await sso.getAccessToken();

// Or get full auth header
const headers = await sso.getAuthHeader();
// { Authorization: 'Bearer xxx' }

// Logout
await sso.logout({
  federated: true, // Logout from all Misar platforms
  returnUrl: '/',
});

API Reference

MisarSSO

The main SSO client class.

Constructor Options

Option Type Default Description
platform string required Your platform identifier (e.g., 'misar.ink')
ssoBaseUrl string 'https://id.misar.io' SSO server URL
storage SSOStorage localStorage Custom storage implementation
debug boolean false Enable debug logging

Methods

Method Returns Description
login(options?) Promise<void> Initiates login flow (redirects to SSO)
handleCallback(token?, state?) Promise<SSOSession | null> Handles SSO callback
logout(options?) Promise<void> Logs out user
getUser() Promise<SSOUser | null> Gets current user
getSession() Promise<SSOSession | null> Gets current session
isAuthenticated() Promise<boolean> Checks auth status
getAccessToken() Promise<string | null> Gets access token
getAuthHeader() Promise<Record<string, string>> Gets Authorization header
refreshSession() Promise<SSOSession | null> Refreshes session
on(listener) () => void Subscribe to SSO events

React Hooks

Hook Returns Description
useAuth() { user, isAuthenticated, isLoading, login, logout } Main auth hook
useUser() { user, isLoading, isAuthenticated } Current user hook
useAccessToken() { token, getAccessToken, getAuthHeader } Token access hook
useSSOCallback() { isProcessing, error, user, returnUrl } Callback handler hook
useRequireAuth(options?) { user, isLoading } Protected route hook

React Components

Component Props Description
<SSOProvider> platform, children, onLogin?, onLogout?, onError? Context provider
<LoginButton> options?, loadingContent?, children? Pre-built login button
<LogoutButton> options?, loadingContent?, children? Pre-built logout button
<AuthButton> loginContent?, logoutContent?, loadingContent? Combined auth button
<UserAvatar> size?, fallback?, className? User avatar component
<IfAuthenticated> children, fallback? Conditional render
<IfNotAuthenticated> children, fallback? Conditional render

Events

Subscribe to SSO events:

const unsubscribe = sso.on((event) => {
  switch (event.type) {
    case 'login':
      console.log('User logged in:', event.payload);
      break;
    case 'logout':
      console.log('User logged out');
      break;
    case 'session_refresh':
      console.log('Session refreshed');
      break;
    case 'error':
      console.error('SSO error:', event.payload);
      break;
  }
});

// Cleanup
unsubscribe();

Custom Storage

For server-side rendering or custom storage needs:

import { MisarSSO, createMemoryStorage } from '@misar/sso-client';

// Use in-memory storage (useful for SSR)
const sso = new MisarSSO({
  platform: 'misar.ink',
  storage: createMemoryStorage(),
});

// Or implement custom storage
const customStorage = {
  getItem: async (key) => redis.get(key),
  setItem: async (key, value) => redis.set(key, value),
  removeItem: async (key) => redis.del(key),
};

const sso = new MisarSSO({
  platform: 'misar.ink',
  storage: customStorage,
});

Environment Variables

# Optional: Override default SSO URL
NEXT_PUBLIC_SSO_URL=https://id.misar.io

Platform Registration

Before using this SDK, your platform must be registered in the Misar SSO registry. Contact the Misar team to register your platform.

License

MIT © Misar AI

Dependencies

Dependencies

ID Version
jose ^5.2.0

Development dependencies

ID Version
@types/react ^19.0.0
react ^19.0.0
typescript ^5.7.3

Peer dependencies

ID Version
@supabase/supabase-js >=2.0.0
react >=18.0.0

Keywords

misar sso authentication oauth single-sign-on
Details
npm
2026-03-13 15:17:31 +00:00
2
Misar AI
Project website
MIT
latest
20 KiB
Assets (1)
sso-client-1.0.0.tgz 20 KiB
Versions (1) View all
1.0.0 2026-03-13