@space-santa/react-auth-kit

Reusable React auth UI (Google, Microsoft, credentials) with DI-based backend API.

Features

• AuthProvider and hooks to expose auth status and login helpers
• Components: OAuthLoginModal, GoogleOAuthLogin, MicrosoftOAuthLogin, UsernamePasswordLogin
• Backend decoupled via an AuthApi interface; includes a default fetch-based implementation
• Peer dependencies for UI and OAuth providers so host apps control versions

Install

npm install @space-santa/react-auth-kit
# peer deps you likely already have
npm install react react-dom react-bootstrap react-icons @react-oauth/google @azure/msal-react @azure/msal-browser

Usage

import { AuthProvider, OAuthLoginModal, makeHttpAuthApi } from "@space-santa/react-auth-kit";
import { GoogleOAuthProvider } from "@react-oauth/google";
import { MsalProvider, PublicClientApplication } from "@azure/msal-react";
import { makeMsalConfig } from "@space-santa/react-auth-kit";

const api = makeHttpAuthApi({ baseUrl: "" });
const msalInstance = new PublicClientApplication(makeMsalConfig({ clientId: "YOUR_MS_APP_ID", tenantId: "common" }));

export function Root() {
    return (
        <AuthProvider api={api}>
            <GoogleOAuthProvider clientId={import.meta.env.VITE_GOOGLE_CLIENT_ID}>
                <MsalProvider instance={msalInstance}>
                    <App />
                </MsalProvider>
            </GoogleOAuthProvider>
        </AuthProvider>
    );
}

function App() {
    const [show, setShow] = useState(false);
    return (
        <>
            <button onClick={() => setShow(true)}>Sign in</button>
            <OAuthLoginModal show={show} onHide={() => setShow(false)} onSuccess={() => console.log("Logged in")} />
        </>
    );
}

Custom API

You can inject your own API client by implementing AuthApi:

import type { AuthApi } from "@space-santa/react-auth-kit";

const api: AuthApi = {
    async fetchAuthStatus() {
        /* ... */
    },
    async logout() {
        /* ... */
    },
    async loginWithGoogleToken(token) {
        /* ... */ return { success: true };
    },
    async loginWithMicrosoftToken(token) {
        /* ... */ return { success: true };
    },
    async loginWithCredentials(u, p) {
        /* ... */ return { success: true };
    },
};

Notes

• Include Bootstrap CSS in your app for the default styling.
• The package does not access window at module scope (safe for SSR). For MSAL in SSR, prefer passing a pre-created instance.
• CSRF handling defaults to a csrftoken cookie; you can override via getCsrfToken in makeHttpAuthApi.