1.1.21 • Published 6 months ago

@altanlabs/auth v1.1.21

Weekly downloads
-
License
MIT
Repository
-
Last release
6 months ago

✅ 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 to user, logout, and more via useAuth.
1.1.21

6 months ago

1.1.20

6 months ago

1.1.19

6 months ago

1.1.18

6 months ago

1.1.17

6 months ago

1.1.16

6 months ago

1.1.15

6 months ago

1.1.14

6 months ago

1.1.13

6 months ago

1.1.12

6 months ago

1.1.11

7 months ago

1.1.10

7 months ago

1.1.9

7 months ago

1.1.8

7 months ago

1.1.7

7 months ago

1.1.6

7 months ago

1.1.5

7 months ago

1.1.4

7 months ago

1.1.3

7 months ago

1.1.2

7 months ago

1.1.1

7 months ago

1.1.0

7 months ago

1.0.24

7 months ago

1.0.23

7 months ago

1.0.22

7 months ago

1.0.21

7 months ago

1.0.2

7 months ago

1.0.1

7 months ago

1.0.0

8 months ago

0.2.12

8 months ago

0.2.11

8 months ago

0.2.1

8 months ago

0.2.0

8 months ago

0.1.9

8 months ago

0.1.8

8 months ago

0.1.7

8 months ago

0.1.6

8 months ago

0.1.5

8 months ago

0.1.4

8 months ago

0.1.3

8 months ago

0.1.2

8 months ago

0.1.1

8 months ago

0.1.0

8 months ago