@altanlabs/auth v1.1.21
✅ Setup
Wrap your app with AuthProvider
and pass your Users Table ID:
IMPORTANT TO IMPORT THE STYLES!!!
import "@altanlabs/auth/dist/styles.css";
import { AuthProvider } from "@altanlabs/auth";
function App() {
return (
<AuthProvider tableId="your-users-table-id">
<YourApp />
</AuthProvider>
);
}
🛡️ Auth Guard (Best Practice)
To protect private routes, use an Auth Guard component:
import { useAuth } from '@altanlabs/auth';
import { Navigate, useLocation } from 'react-router-dom';
export function AuthGuard({ children }) {
const { user } = useAuth();
const location = useLocation();
if (!user) {
return <Navigate to="/sign-in" state={{ from: location }} replace />;
}
return <>{children}</>;
}
🔐 Sign In Page
The Sign In page should redirect authenticated users away automatically:
import { SignIn, useAuth } from "@altanlabs/auth";
import { Navigate } from "react-router-dom";
export default function SignInPage() {
const { user } = useAuth();
if (user) return <Navigate to="/" replace />;
return (
<div className="min-h-screen flex items-center justify-center bg-zinc-50 dark:bg-zinc-900">
<SignIn
appearance={{ theme: "dark" }}
companyName="Your Company"
signUpUrl="/sign-up"
withSignUp
routing="path"
/>
</div>
);
}
🆕 Sign Up Page
The Sign Up page should also redirect authenticated users automatically:
import { SignUp, useAuth } from "@altanlabs/auth";
import { Navigate } from "react-router-dom";
export default function SignUpPage() {
const { user } = useAuth();
if (user) return <Navigate to="/" replace />;
return (
<div className="min-h-screen flex items-center justify-center bg-zinc-50 dark:bg-zinc-900">
<SignUp
appearance={{ theme: "dark" }}
companyName="Your Company"
signInUrl="/sign-in"
withSignIn
routing="path"
/>
</div>
);
}
👤 User Profile
Protect your user profile page with the Auth Guard:
import { UserProfile } from "@altanlabs/auth";
import { AuthGuard } from "./AuthGuard";
export default function ProfilePage() {
return (
<AuthGuard>
<UserProfile
appearance={{ theme: "dark" }}
showCustomFields
editableFields={["name", "surname", "email"]}
hiddenFields={["password"]}
fallback={<div>Please log in</div>}
/>
</AuthGuard>
);
}
🚪 Logout Button
Add a logout button anywhere in your app:
import { Logout } from "@altanlabs/auth";
function NavBar() {
return (
<Logout
appearance={{ theme: "dark" }}
onLogout={() => console.log("User logged out")}
/>
);
}
🪝 Auth Hook
Access the current user and manage auth state:
import { useAuth } from "@altanlabs/auth";
function ProfileButton() {
const { user, logout } = useAuth();
if (!user) {
return <button onClick={() => (window.location.href = "/sign-in")}>Sign In</button>;
}
return (
<div>
<span>Welcome, {user.name}!</span>
<button onClick={logout}>Logout</button>
</div>
);
}
📌 Notes
- Always protect private routes with
AuthGuard
for consistent and secure user experiences. AuthProvider
automatically syncs auth state, providing easy access touser
,logout
, and more viauseAuth
.
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago