React components and hooks for Omnify SSO integration
npm install @famgia/sso-reactReact components and hooks for Omnify SSO integration.
``bash`
npm install @omnify/sso-reactor
yarn add @omnify/sso-reactor
pnpm add @omnify/sso-react
`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}
);
}
`
`tsx
// app/sso/callback/page.tsx
import { SsoCallback } from '@omnify/sso-react';
export default function CallbackPage() {
return (
onSuccess={(user) => console.log('Logged in:', user)}
onError={(error) => console.error('Login failed:', error)}
/>
);
}
`
`tsx
import { useAuth, useOrganization, useSso } from '@omnify/sso-react';
function Header() {
const { user, isAuthenticated, login, logout } = useAuth();
const { currentOrg } = useOrganization();
if (!isAuthenticated) {
return ;
}
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) => (
)}
renderOption={(org, isSelected) => (
{org.name}
)}
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
``MIT