@merediv/sso-sdk-react

React hooks + provider for "Sign in with mmadwn". The client half of @merediv/sso-sdk: it talks to the BFF /auth/* endpoints over same-origin fetch — tokens never touch the browser. Works in React and React Native. react is a peer dependency; zero other runtime deps.

Install

bun add @merediv/sso-sdk-react@^1.1.0 react

Usage

Wrap your app once, then read the session anywhere:

import { SsoProvider, useSession, SignedIn, SignedOut } from "@merediv/sso-sdk-react";

function Root() {
	return (
		<SsoProvider basePath="/auth">
			<Nav />
		</SsoProvider>
	);
}

function Nav() {
	const { status, user, signIn, signOut } = useSession();
	if (status === "loading") return <span>…</span>;
	return (
		<>
			<SignedOut>
				<button onClick={() => signIn(window.location.pathname)}>Sign in</button>
			</SignedOut>
			<SignedIn>
				<span>Hi, {user?.name ?? user?.email}</span>
				{user?.isAdmin ? <a href="/admin">Admin</a> : null}
				<button onClick={() => signOut()}>Sign out</button>
			</SignedIn>
		</>
	);
}

API

| Export | Purpose | | --- | --- | | <SsoProvider basePath? refetchOnFocus? onNavigate?> | Fetches /auth/me on mount (+ on window focus) and provides session state. | | useSession() | { status, user, refetch, signIn, signOut }. status ∈ loading \| authenticated \| unauthenticated. | | useSignIn() / useSignOut() | The signIn(returnTo?) / signOut() navigators. | | <SignedIn> / <SignedOut> | Conditionally render by auth state (not while loading). | | fetchSession, buildLoginUrl, buildLogoutUrl | The pure helpers, for custom flows. |

React Native

Pass onNavigate to control how sign-in/out navigates (the default uses window.location):

import * as Linking from "expo-linking";

<SsoProvider basePath="https://your-bff/auth" onNavigate={(url) => Linking.openURL(url)}>
	{/* … */}
</SsoProvider>;

License

MIT.