@charmr/oauth-button

A lightweight, OAuth login button for React, designed to work seamlessly with the @charmr/oauth-core controller. Supports Google, Facebook (implicit flow), and GitHub (authorization code flow)

Install

npm install @charmr/oauth-button  

Usage

import { OAuthLoginButton, OAuthError, OAuthSuccess } from '@charmr/oauth-button';

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route
          path="/"
          element={
            <OAuthLoginButton
              provider="google"
              clientId=""
              redirectUri="http://localhost:5173/oauth/callback"
              onSuccess={(token: OAuthError) => console.log('Token:', token)}
              onError={(err: OAuthSuccess) => console.error('Error:', err)}
            />
          }
        />
      </Routes>
    </BrowserRouter>
  );
}

Examples

GitHub, Facebook, and Google

🔹 GitHub uses the authorization code flow, which requires a backend to exchange the code for an access token.
🔹 Facebook and Google use the implicit flow, where the access token is returned directly in the URL hash — no backend required.

• App.tsx Example
• OAuthCallbackHandler.tsx

License

MIT