🔐 Qube Auth

Authentication library for React applications in QubeCinema.

✨ Features

• 🚀 Easy to integrate
• 🔄 Automatic token refresh
• 👤 User management
• 🛡️ Protected routes
• 🎯 Customizable authentication flow

IMPORTANT

• For user information retrieval, we recommend using UserProfileCustomUrl
• If you opt to use Qube Account's built-in user method instead:
  • Ensure your DEV, UAT, and PROD browser URLs are registered with Qube Account to prevent CORS errors
  • For local development, only localhost:3000 and localhost:3001 are pre-configured

📦 Installation

npm install qube-auth

🛠️ Setup

1. Environment Variables

Create a .env file in your project root and add the following variables:

REACT_APP_AUTH_BASE_URL="your-auth-base-url"
REACT_APP_CLIENT_ID="your-client-id"
REACT_APP_PRODUCT_ID="your-product-id"
# Optional: Custom user profile URL
REACT_APP_USER_PROFILE_URL="your-custom-profile-url"

2. Provider Setup

Wrap your application with the AuthProvider component:

import { AuthProvider } from "qube-auth";

function App() {
  const authConfig = {
    BaseUrl: process.env.REACT_APP_AUTH_BASE_URL,
    ClientId: process.env.REACT_APP_CLIENT_ID,
    ProductId: process.env.REACT_APP_PRODUCT_ID,
    OnLogOutRedirect: string;
    UserProfileCustomUrl: process.env.REACT_APP_USER_PROFILE_URL, // Optional
    RevalidateUser: 300, // In secs Optional
    AutoLoginOnTokenExpire: false // boolean Optional
  };

  return (
    <AuthProvider config={authConfig}>
      <YourApp />
    </AuthProvider>
  );
}

3. Auth Redirect Handler

Create a component in /auth to handle authentication redirects (e.g., AuthCallback.tsx):

export default function Auth() {
  const navigate = useNavigate();

  useAuthRedirect({
    redirectAuthenticated: "/",
    redirectUnauthenticated: "/login",
    navigate,
  });

  return (
    <div>
      <p>Authenticating...</p>
    </div>
  );
}

🚀 Usage Examples

Using the Auth Hook

import { useAuth } from "qube-auth";

function MyComponent() {
  const { user, isAuthenticated, login, logout, refresh } = useAuth();

 //pass false in logout fuction to stop auto redirect logout(false) and navigate to desired path
  if (!isAuthenticated) {
    return <button onClick={login}>Login</button>;
  }

  return (
    <div>
      <h1>Welcome, {user?.name}!</h1>
      <button onClick={logout(false)}>Logout</button>
    </div>
  );
}

Protected Route Example

import { useAuth } from "qube-auth";
import { Navigate } from "react-router-dom";

function ProtectedRoute({ children }) {
  const { isAuthenticated ,isAuthenticating} = useAuth();

  if(isAuthenticating){
    return null
  }
  if (!isAuthenticated && !isAuthenticating) {
    return <Navigate to="/login" replace />;
  }

  return children;
}

// Usage
<Routes>
  <Route
    path="/dashboard"
    element={
      <ProtectedRoute>
        <Dashboard />
      </ProtectedRoute>
    }
  />
</Routes>;

📝 Configuration Options

| Option | Type | Required | Description | | -------------------- | ------ | -------- | -------------------------------------------------------------------------- | | BaseUrl | string | Yes | Base URL for authentication service | | ClientId | string | Yes | Your application's client ID | | ProductId | string | Yes | Your product ID | | OnLogOutRedirect | string | Yes | On logout tou where you want to redirect | | UserProfileCustomUrl | string | No | Custom URL for fetching user profile | | RevalidateUser | number | No | After how many secs the re-fetching of the user will happen (default 5min) | | AutoLoginOnTokenExpire | boolean | No | It will auto promt to login on token expire default false |

🔄 Auth Flow

1. User clicks login
2. Redirected to authentication service
3. After successful authentication, user is redirected back to your application
4. Auth callback component handles the token
5. User session is established

📚 API Reference

useAuth Hook

• user: Current user object or null
• isAuthenticated: Boolean indicating authentication status
• isAuthenticating: Boolean to indicate authentication process
• login(): Initiates login flow
• logout(): Logs out the current user
• refresh(): Refreshes the user token and data

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. Currently (2025) SLATE team is the mentainer please feel free to do a PR for any addition to the library.