useAuth
Read the current auth state in React so your UI can show the right experience at every step.
useAuth(auth)
import { useAuth } from "@mvd/auth/react";Use useAuth when your component needs to decide what to show based on whether someone is signing in, signed out, or signed in.
No provider wrapper is required—just pass the shared auth instance.
What you receive
useAuth returns the current auth snapshot.
| Status | What it means for the UI |
|---|---|
"loading" | sign-in is still finishing |
"unauthenticated" | the person is not signed in |
"authenticated" | a valid access token is available |
When the status is "authenticated", you also get token and tokenData.
When to use it
Choose useAuth for components that need to show different screens or actions based on auth state.
Examples include:
- login buttons
- signed-out landing states
- loading messages during sign-in
- authenticated dashboards
Example
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 <Dashboard token={snapshot.token} />;
}If your component should only ever render after sign-in has already been confirmed, use useAuthRequired.