React Mode Integration

npm install @rootauth/react react react-dom

// RootAuth.tsx
import { RootAuthClient, RootAuthMount, type RootAuthClientConfig } from "@rootauth/react";

const options: RootAuthClientConfig = {
  app_id: "******",
  base_path: "/auth",
}
const client = new RootAuthClient(options);

function AuthPage() {
  return <RootAuthMount client={client} />;
}

export default AuthPage;

interface RootAuthClientConfig {
  app_id: string // Required: obtained from the workspace application configuration
  /** Base path for routes in hosted mode, e.g., '/auth' results in routes like /auth/login, /auth/register, /auth/reset-password, etc.; if omitted, routes start from site root / */
  base_path?: string
  api_base_url?: string // Backend API endpoint path, defaults to https://rootauth-api.rootauth.com
  redirect_uri?: string // Redirect path after successful login, defaults to location.origin
  state?: string // Custom parameter, returned as-is by the API
  locale?: string // Current language, defaults to zh-CN; currently supports zh-CN, en-US
  scope?: string[]  // Scope mapping, defaults to ['openid']; add fields like email, username here to retrieve avatar, username, etc.
  grant_type?: string // Authorization mode, defaults to authorization_code
  enable_google_one_tap?: boolean // Enable Google One Tap login, defaults to false
  /** Hosted mode login success callback; returns false to prevent default redirect */
  onLoginSuccess?: LoginSuccessCallback;
  /** Hosted mode registration success callback; returns false to prevent default redirect */
  onRegisterSuccess?: RegisterSuccessCallback;
}

// App.tsx
import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
import AuthPage from "./RootAuth";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/auth/*" element={<AuthPage />} /> // Add the /auth route
      </Routes>
    </BrowserRouter>
  );
}

export default App;