vireal-js

SDK chính thức để tích hợp Login with Vireal vào ứng dụng React, Next.js hoặc vanilla JS.

Cài đặt

npm install vireal-js
# hoặc
yarn add vireal-js

React / Next.js

1. Bọc ứng dụng bằng VirealProvider

// app/layout.tsx hoặc _app.tsx
import { VirealProvider } from 'vireal-js';

export default function RootLayout({ children }) {
  return (
    <VirealProvider
      clientId="YOUR_CLIENT_ID"
      redirectUri="https://yoursite.com/callback"
      scope="profile email"
      apiKey="YOUR_API_KEY"
      onCallback={async (code) => {
        // Gọi server của bạn để exchange code → token → user
        const res = await fetch('/api/auth/vireal', {
          method: 'POST',
          body: JSON.stringify({ code }),
        });
        return res.json(); // trả về VirealUser
      }}
    >
      {children}
    </VirealProvider>
  );
}

2. Dùng button có sẵn

import { VirealLoginButton } from 'vireal-js';

export default function LoginPage() {
  return <VirealLoginButton theme="dark" />;
}

3. Hoặc tự tạo button

import { useVireal } from 'vireal-js';

export default function MyButton() {
  const { login, user, loading } = useVireal();

  if (user) return <p>Xin chào, {user.name}!</p>;

  return (
    <button onClick={login} disabled={loading}>
      Đăng nhập bằng Vireal
    </button>
  );
}

4. Route callback (Next.js App Router)

// app/callback/page.tsx
// VirealProvider tự xử lý callback nếu bạn truyền onCallback
// Chỉ cần tạo trang trống:
export default function CallbackPage() {
  return <div>Đang xử lý...</div>;
}

Vanilla JS

<script src="https://developers.vireal.vn/sdk/vireal-sdk.js"></script>

<div
  data-vireal-login
  data-client-id="YOUR_CLIENT_ID"
  data-redirect-uri="https://yoursite.com/callback"
></div>

Server-side: Exchange code lấy token

import { exchangeCode, getUser } from 'vireal-js';

// Trong API route của bạn
const tokens = await exchangeCode({
  code: req.body.code,
  clientId: process.env.VIREAL_CLIENT_ID,
  clientSecret: process.env.VIREAL_CLIENT_SECRET,
  redirectUri: 'https://yoursite.com/callback',
});

const user = await getUser({
  accessToken: tokens.access_token,
  apiKey: process.env.VIREAL_API_KEY,
});