Part of the Explita Cloud Auth Platform

A lightweight authentication library for React applications. Provides utilities to handle common authentication tasks like managing authentication tokens, verifying sessions, handling cookies, and supporting both OTP and token-based authentication.

✨ Features

• 📱 OTP-based login support
• 🔐 JWT token session handling
• ⚛️ React hooks for seamless UX
• 💼 Works with Next.js API and server functions
• 💅 Minimal styles with Tailwind support

🚀 Installation

npm install @explita/cloud-auth-client

or

yarn add @explita/cloud-auth-client

or

pnpm add @explita/cloud-auth-client

Add the CSS

import '@explita/cloud-auth-client/styles.css';

📜 Session Management

The cloud-auth-client library handles session management by automatically storing and retrieving authentication tokens using HTTP-only cookies for better security.

Authentication tokens are stored in cookies, with the HttpOnly flag to prevent JavaScript access.

The useAuth hook allows easy access to session data in any component.

🔐 Authentication Methods

Use JWT tokens for stateless authentication. The library provides helpers to manage tokens and sessions using cookies.

OTP-Based Authentication

The OTP is part of the cloud-auth-client library by default, all you have to do is install the cloud-otp-client library and users can enable OTP in their account settings.

Add the CSS

import '@explita/cloud-otp-client/styles.css';

Usage

"use client";

import { AuthProvider } from "@explita/cloud-auth-client";

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <AuthProvider
      config={{
        hostOverride: process.env.NEXT_PUBLIC_DOMAIN,
        dashboardPath: "/dashboard", //default is /dashboard
        loginPath: "/login", //default is /login
        signupPath: "/signup", //default is /signup
        resetPasswordPath: "/reset-password", //default is /reset-password
        cookieOverride: cookieOverrideHandler, //included in the server-side functions and only needed if your app needs to use anything from @explita/cloud-auth-client/server, e.g: getServerSession() - only in Next.js
        disableLoading: true, //default is false
        excludedPaths: [], //array of strings of relative paths, all the paths mentioned above are already excluded.
      }}
    >
      {children}
    </AuthProvider>
  );
}

"use client";

import { Login } from "@explita/cloud-auth-client/ui";
import { useEffect } from "react";

export default function LoginPage() {
  useEffect(() => {
    document.title = "Login";
  }, []);

  return (
    <>
      <div className="h-screen flex items-center justify-center">
        <Login />
      </div>
    </>
  );
}

"use client";

import { signup } from "@/app/actions";
import { Signup } from "@explita/cloud-auth-client/ui";
import { useEffect } from "react";

export default function SignupPage() {
  useEffect(() => {
    document.title = "Sign Up";
  }, []);

  return (
    <div className="flex items-center justify-center min-h-screen p-3">
      <Signup onSubmit={signup} />
    </div>
  );
}

"use client";

import { ResetPassword } from "@explita/cloud-auth-client/ui";
import { useEffect } from "react";

export default function ResetPasswordPage() {
  useEffect(() => {
    document.title = "Reset Password";
  }, []);

  return (
    <>
      <div className="h-screen flex items-center justify-center">
        <ResetPassword />
      </div>
    </>
  );
}

//other available components for logged-in users
ChangePassword;
UserCard; //shows currently logged-in user
Settings;
Toggle2FA; //toggle 2FA for logged-in users
ToggleAccountStatus; //suspend or unsuspend a user
LoggedIn; //check if user is logged in
LoggedOut; //check if user is logged out

Server-side functions

"use server";

import type {
  NewRole,
  ResetPasswordWithToken,
  ResetPasswordWithUserId,
  Signup,
} from "@explita/cloud-auth-client";
import {
  addRole,
  assignPermission,
  changePassword,
  getRoles,
  registerUser,
  resetPassword,
  setCookie,
  toggle2FA,
  toggleUserStatus,
  updateRole,
} from "@explita/cloud-auth-client/server";

export async function cookieOverrideHandler(cookie?: string) {
  await setCookie(cookie);
}

export async function resetUserPassword(data: ResetPasswordWithToken) {
  return resetPassword(data);
}

export async function changeUserPassword(data: ResetPasswordWithUserId) {
  return changePassword(data);
}

export async function signup(data: Signup) {
  return registerUser(data);
}

export async function toggleUser2FA() {
  return toggle2FA();
}

export async function toggleStatus(userId: string) {
  return toggleUserStatus(userId);
}

export async function getAllRoles() {
  return getRoles();
}

export async function addNewRole(data: NewRole) {
  return addRole(data);
}

export async function editRole(id: string, data: NewRole) {
  return updateRole(id, data);
}

export async function assignPermissions(roleId: string, permissions: string[]) {
  return assignPermission(roleId, permissions);
}

Using Node/Express Backend

If you're using a Node.js/Express backend and need to authenticate requests between your frontend and backend, use cloud-auth-express to verify tokens server-side.

Make sure your frontend sends the token along in each request:

import { getToken } from "@explita/cloud-auth-client";

const response = await fetch("/api/your-route", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${getToken()}`,
  },
  body: JSON.stringify(data),
});

⚠️ Note: This section only applies if you're doing separate frontend/backend communication. If you're building a fullstack app (e.g. with Next.js using Server Actions or API routes), you don't need to handle this manually — it's already managed internally by cloud-auth-client.

Getting started

Sign up for an account at Explita Cloud, create a project, add auth service and get your API key from the dashboard and add it to your environment variables.

📄 License

MIT — Made with ❤️ by Explita