@tspscale/react-login

Official React SDK for TSP Scale OAuth Login.

🚀 Quick Start (Zero-Config)

Add "Login with TSP Scale" to your React application in seconds.

Installation

npm install @tspscale/react-login

🛠️ Usage

Wrap your application with the provider and drop in the button component:

import React from 'react';
import { TSPAuthProvider, TSPLoginButton } from '@tspscale/react-login';

function App() {
  return (
    <TSPAuthProvider clientId="YOUR_CLIENT_ID">
      <div className="login-container">
        <h1>Welcome to My App</h1>
        
        {/* Renders a beautiful TSP Scale branded login button */}
        <TSPLoginButton 
          onSuccess={(token, user) => console.log('Logged in!', user)}
          onError={(err) => console.error(err)}
          theme="blue"
        />
      </div>
    </TSPAuthProvider>
  );
}

export default App;

Custom Hooks

You can also build your own custom UI using the useTSPAuth hook:

import { useTSPAuth } from '@tspscale/react-login';

function CustomButton() {
  const { login, logout, user, token } = useTSPAuth();
  
  if (user) {
    return <button onClick={logout}>Logout {user.email}</button>;
  }
  return <button onClick={login}>Sign In Custom</button>;
}