Quick Start
Set up sign-in, show the right UI, and give people a clean way to log out.
1. Create one auth setup for your app
Start with a shared auth instance that points to your OAuth provider.
import { createAuth } from "@mvd/auth";
export const auth = createAuth({
clientId: "my-client-id",
authorizationEndpoint: "https://auth.example.com/authorize",
tokenEndpoint: "https://auth.example.com/token",
redirectUri: window.location.origin,
scope: "api:read offline_access",
autoLogin: false,
});This gives your app one place to start login, track session state, and sign people out.
2. Show the right screen at the right time
Use useAuth to decide what people should see while sign-in is in progress, when they are signed out, and after they are signed in.
import { useAuth } from "@mvd/auth/react";
import { auth } from "./auth";
function LoginGate() {
const snapshot = useAuth(auth);
if (snapshot.status === "loading") return <p>Signing you in…</p>;
if (snapshot.status === "unauthenticated") {
return <button onClick={() => auth.login()}>Log in</button>;
}
return <AuthenticatedPanel />;
}3. Use token details where they improve the experience
When someone is already signed in, useAuthRequired gives you the authenticated data directly.
import { useAuthRequired } from "@mvd/auth/react";
function AuthenticatedPanel() {
const { tokenData } = useAuthRequired(auth);
return <p>Welcome back, {tokenData.name ?? "friend"}.</p>;
}If your access token includes useful claims, you can use them to personalize the UI or choose what to show next.
4. Let your callback route load the app normally
After login, your provider sends people back to the redirectUri you registered.
Make sure that URL loads your app, and sign-in will continue from there without a special callback page to maintain.
5. Give people a clear sign-out action
<button onClick={() => auth.logout()}>Log out</button>This clears the current session in your app. If you also configured a provider logout URL, people can be sent there too.