XHub Auth

XHub Auth là một thư viện React/Next.js cung cấp các component và utilities để tích hợp xác thực với Keycloak/OpenID Connect. Hỗ trợ xác thực hiện đại với Passkey (WebAuthn), OAuth providers (Google, Apple).

🌟 Contact

• [email protected]
• [email protected]

🌟 Tính năng nổi bật

• ✅ Xác thực đa phương thức: Email/Password, OAuth (Google, Apple), WebAuthn/Passkey
• ✅ Passkey Management: Tạo, đổi tên, xóa passkey
• ✅ Password Recovery Flow: Quên mật khẩu và đặt lại mật khẩu

📦 Cài đặt

npm install xhub-auth
# hoặc
yarn add xhub-auth

🔧 Yêu cầu hệ thống

{
  "react": ">=16.8.0",
  "react-dom": ">=16.8.0",
  "next": ">=13.0.0",
  "next-auth": ">=4.0.0"
}

🚀 Bắt đầu nhanh

Bước 1: Cài đặt package

npm install xhub-auth
# hoặc
yarn add xhub-auth
# hoặc
pnpm add xhub-auth

Bước 2: Cấu hình NextAuth.js

Tạo file config:

import type { NextAuthOptions } from "next-auth";
import { XHubCredentials } from "xhub-auth";

interface CustomUser {
  accessToken?: string;
  refreshToken?: string;
}

export const authOptions: NextAuthOptions = {
  secret: process.env.NEXTAUTH_SECRET || "your-secret-key-here",
  providers: [
    XHubCredentials({
      ssoApi: process.env.NEXT_PUBLIC_SSO_API || "",
      clientId: process.env.NEXT_PUBLIC_CLIENT_ID || ""
    }),
  ],
  ... //các tuỳ chọn khác của next-auth
};

Tạo file app/api/auth/[...nextauth]/route.ts cho App Router):

import NextAuth from "next-auth";
import { authOptions } from "../../../auth.config";
import { handleCallBack, handleCallBackPOST } from "xhub-auth";
import { NextRequest } from "next/server";

const handler = NextAuth(authOptions);

export async function GET(request: NextRequest, ctx: any) {
  const url = request.url;
  const searchParams = new URL(url).searchParams;
  const dynamicRedirect = searchParams.get("dynamicRedirect");

  return handleCallBack(
    request,
    ctx,
    handler,
    process.env.NEXT_PUBLIC_SSO_API || "",
    "/",
    dynamicRedirect || "",
    process.env.NEXT_PUBLIC_CLIENT_ID || "",
    process.env.NEXT_PUBLIC_REALM || "",
    "/en/login"
  );
}

export async function POST(request: NextRequest, ctx: any) {
  return handleCallBackPOST(
    request,
    ctx,
    handler,
    process.env.NEXT_PUBLIC_SSO_API || "",
    process.env.NEXT_PUBLIC_CLIENT_ID || "",
    process.env.NEXT_PUBLIC_REALM || "",
    "/en/login"
  );
}

Thêm config vào file next.config.ts

import { rewritesPasskey } from "xhub-auth";
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  // Các config khác
  async rewrites() {
    return [rewritesPasskey(process.env.KEYCLOAK_URL || "", process.env.NEXT_PUBLIC_REALM || "")];
  },
};

export default nextConfig;

Bước 3: Sử dụng components

"use client";

import { useParams } from "next/navigation";
import {
  XHubLogin,
  XHubRegister,
  XHubForgotPassword,
  XHubResetPassword,
  XHubNotFound404,
  Multilingual,
  MultilingualLanguageCode,
  MultilingualKey,
} from "xhub-auth";
import styleForgotPassword from "xhub-auth/src/components/style/forgot-password.module.css";
import styleResetPassword from "xhub-auth/src/components/style/reset-password.module.css";
import styleLogin from "xhub-auth/src/components/style/login.module.css";
import styleRegister from "xhub-auth/src/components/style/register.module.css";

const PageAuth = () => {
  const params = useParams();
  const pageAuth = params.pageAuth || [];
  const clientId = process.env.NEXT_PUBLIC_CLIENT_ID || "";
  const ssoApi = process.env.NEXT_PUBLIC_SSO_API || "";
  const languageCode = MultilingualLanguageCode.VN;

  switch (pageAuth[0]) {
    case "register":
      return (
        <div
          style={{
            width: "100dvw",
            height: "100dvh",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            backgroundColor: "#fff",
          }}
        >
          <div style={{ width: "100%", height: "100%" }}>
            <XHubRegister
              ssoApi={ssoApi}
              clientId={clientId}
              pathToLogin="/login"
              pathToNext="/profile"
              title={Multilingual.default[languageCode][MultilingualKey.register_title]}
              content={Multilingual.default[languageCode][MultilingualKey.register_content]}
              style={styleRegister}
              contentTermsOfService={[]}
              multilingual={Multilingual.register[languageCode]}
              multilingualKey={MultilingualKey}
              languageCode={languageCode}
              name="Hii"
            />
          </div>
        </div>
      );
    case "login":
      return (
        <div
          style={{
            width: "100dvw",
            height: "100dvh",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <div style={{ width: "100%", height: "100%" }}>
            <XHubLogin
              ssoApi={ssoApi}
              clientId={clientId}
              pathRegister="/register"
              pathToNext="/abc"
              title={Multilingual.default[languageCode][MultilingualKey.login_title]}
              pathForgotPassword="/forgot-password"
              style={styleLogin}
              loginPasskey={true}
              multilingual={Multilingual.login[languageCode]}
              multilingualKey={MultilingualKey}
              languageCode={languageCode}
              name="Hii"
            />
          </div>
        </div>
      );
    case "forgot-password":
      return (
        <div
          style={{
            width: "100dvw",
            height: "100dvh",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <XHubForgotPassword
            ssoApi={ssoApi}
            style={styleForgotPassword}
            pathLogin="/login"
            title={Multilingual.default[languageCode][MultilingualKey.forgot_password_title]}
            content={Multilingual.default[languageCode][MultilingualKey.forgot_password_content]}
            clientId={clientId}
            multilingual={Multilingual.forgotPassword[languageCode]}
            multilingualKey={MultilingualKey}
            languageCode={languageCode}
            name="Hii"
            pathPageResetPassword="/reset-password"
          />
        </div>
      );
    case "reset-password":
      return (
        <div
          style={{
            width: "100dvw",
            height: "100dvh",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <XHubResetPassword
            style={styleResetPassword}
            pathLogin="/login"
            title={Multilingual.default[languageCode][MultilingualKey.reset_password_title]}
            content={Multilingual.default[languageCode][MultilingualKey.reset_password_content]}
            ssoApi={ssoApi}
            multilingual={Multilingual.resetPassword[languageCode]}
            multilingualKey={MultilingualKey}
            languageCode={languageCode}
            name="Hii"
          />
        </div>
      );
    default:
      return (
        <div
          style={{
            width: "100dvw",
            height: "100dvh",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <XHubNotFound404 />
        </div>
      );
  }
};

export default PageAuth;

Features:

• Hiển thị danh sách passkey
• Xóa passkey
• Đổi tên passkey
• Tạo passkey mới

XHubPasskey - Quản lý passkey

import { XHubCreatePasskey, MultilingualKey, Multilingual, MultilingualLanguageCode } from "xhub-auth";

export default function CreatePasskeyPage() {
  const languageCode = MultilingualLanguageCode.EN;

  return (
    <XHubPasskey
      style={stylePasskey}
      title="Passkey (Non-biometric)"
      ssoApi={ssoApi}
      onShowModal={setShowModal}
      showModal={showModal}
      realm={realm}
      styleRenamePasskey={styleRenamePasskey}
      styleConfirmDeletePasskey={styleConfirmDeletePasskey}
      token={token}
      multilingual={Multilingual.passkey[languageCode]}
      multilingualKey={MultilingualKey}
      languageCode={languageCode}
      styleCss={{}}
    />
  );
}

Import CSS Files Directly

import "xhub-auth/dist/styles/login.module.css";
import "xhub-auth/dist/styles/register.module.css";
import "xhub-auth/dist/styles/forgot-password.module.css";
import "xhub-auth/dist/styles/reset-password.module.css";
import "xhub-auth/dist/styles/passkey.module.css";
import "xhub-auth/dist/styles/rename-passkey.module.css";
import "xhub-auth/dist/styles/confirm-delete-passkey.module.css";

📞 Hỗ trợ

• 📧 Email: [email protected]