@omnify/sso-react

React components and hooks for Omnify SSO integration.

Installation

``bash
npm install @omnify/sso-react


or

yarn add @omnify/sso-react

or

pnpm add @omnify/sso-react
`

Quick Start

$3

`tsx
// app/layout.tsx or _app.tsx
import { SsoProvider } from '@omnify/sso-react';

const ssoConfig = {
apiUrl: process.env.NEXT_PUBLIC_API_URL!,
consoleUrl: process.env.NEXT_PUBLIC_SSO_CONSOLE_URL!,
serviceSlug: process.env.NEXT_PUBLIC_SSO_SERVICE_SLUG!,
};

export default function RootLayout({ children }) {
return (

{children}

);
}
`

$3

`tsx
// app/sso/callback/page.tsx
import { SsoCallback } from '@omnify/sso-react';

export default function CallbackPage() {
return (
redirectTo="/dashboard"
onSuccess={(user) => console.log('Logged in:', user)}
onError={(error) => console.error('Login failed:', error)}
/>
);
}
`

$3

`tsx
import { useAuth, useOrganization, useSso } from '@omnify/sso-react';

function Header() {
const { user, isAuthenticated, login, logout } = useAuth();
const { currentOrg } = useOrganization();

if (!isAuthenticated) {
return login()}>Login;
}

return (



);
}
`

Components

$3

Wraps your app and provides SSO context.

`tsx
config={{
apiUrl: 'https://api.yourservice.com',
consoleUrl: 'https://auth.console.com',
serviceSlug: 'your-service',
storage: 'localStorage', // or 'sessionStorage'
storageKey: 'sso_selected_org',
}}
onAuthChange={(isAuthenticated, user) => {
console.log('Auth changed:', isAuthenticated, user);
}}
>
{children}

`

$3

Handles the SSO callback and token exchange.

`tsx
redirectTo="/dashboard"
onSuccess={(user, organizations) => {}}
onError={(error) => {}}
loadingComponent={}
errorComponent={(error) => }
/>
`

$3

Dropdown for switching between organizations. Only renders if user has multiple orgs.

`tsx
// Basic


// Custom rendering
renderTrigger={(currentOrg, isOpen) => (
{currentOrg?.name} {isOpen ? '▲' : '▼'}
)}
renderOption={(org, isSelected) => (



)}
onChange={(org) => console.log('Switched to:', org.name)}
/>
`

$3

Wraps content that requires authentication.

`tsx
// Basic




// With role requirement




// Custom fallbacks
fallback={}
loginFallback={}
onAccessDenied={(reason) => console.log(reason)}
>


`

Hooks

$3

`tsx
const {
user, // SsoUser | null
isLoading, // boolean
isAuthenticated,// boolean
login, // (redirectTo?: string) => void
logout, // () => Promise
globalLogout, // (redirectTo?: string) => void
refreshUser, // () => Promise
} = useAuth();
`

$3

`tsx
const {
organizations, // SsoOrganization[]
currentOrg, // SsoOrganization | null
hasMultipleOrgs, // boolean
switchOrg, // (orgSlug: string) => void
currentRole, // string | null
hasRole, // (role: string) => boolean
} = useOrganization();
`

$3

Combined hook with all functionality.

`tsx
const {
// Auth
user, isLoading, isAuthenticated, login, logout, globalLogout, refreshUser,
// Organization
organizations, currentOrg, hasMultipleOrgs, switchOrg,
// Utilities
getHeaders, config,
} = useSso();
`

Making API Requests

Use getHeaders() to include the organization header in your requests:

`tsx
const { getHeaders } = useSso();

// With fetch
const response = await fetch('/api/data', {
headers: {
...getHeaders(),
'Content-Type': 'application/json',
},
credentials: 'include',
});

// With axios
const response = await axios.get('/api/data', {
headers: getHeaders(),
withCredentials: true,
});
`

Types

`tsx
interface SsoUser {
id: number;
consoleUserId: number;
email: string;
name: string;
}

interface SsoOrganization {
id: number;
slug: string;
name: string;
orgRole: string;
serviceRole: string | null;
}

interface SsoConfig {
apiUrl: string;
consoleUrl: string;
serviceSlug: string;
storage?: 'localStorage' | 'sessionStorage';
storageKey?: string;
}
`

Environment Variables

`env
NEXT_PUBLIC_API_URL=https://api.yourservice.com
NEXT_PUBLIC_SSO_CONSOLE_URL=https://auth.console.com
NEXT_PUBLIC_SSO_SERVICE_SLUG=your-service
``

License

MIT