@watever/auth-js

Official Watever OAuth authentication library for JavaScript and React applications.

Installation

npm install @watever/auth-js
# or
yarn add @watever/auth-js

Quick Start

1. Setup (React)

import React from 'react';
import ReactDOM from 'react-dom/client';
import { WateverAuth, WateverAuthProvider } from '@watever/auth-js';
import App from './App';

// Initialize Watever Auth client
const wateverAuth = new WateverAuth({
  clientId: 'your_client_id',
  clientSecret: 'your_client_secret',
  redirectUri: 'http://localhost:3000/callback',
  scopes: ['profile.read', 'business.read', 'business.write']
});

ReactDOM.createRoot(document.getElementById('root')).render(
  <WateverAuthProvider client={wateverAuth}>
    <App />
  </WateverAuthProvider>
);

2. Create Callback Page

Create a callback route at /callback:

import { WateverAuthCallback } from '@watever/auth-js';

function CallbackPage() {
  return <WateverAuthCallback />;
}

export default CallbackPage;

3. Use in Components

import { useWateverAuth, WateverAuthButton } from '@watever/auth-js';

function MyComponent() {
  const { user, isAuthenticated, logout } = useWateverAuth();
  
  if (isAuthenticated) {
    return (
      <div>
        <h1>Welcome {user.first_name}!</h1>
        <button onClick={logout}>Logout</button>
      </div>
    );
  }
  
  return (
    <WateverAuthButton 
      method="popup" // or "redirect"
      onSuccess={() => console.log('Logged in!')}
      onError={(error) => console.error(error)}
    >
      Sign in with Watever
    </WateverAuthButton>
  );
}

API Reference

WateverAuth Class

const client = new WateverAuth(config);

Config Options:

• clientId (required): Your OAuth client ID
• clientSecret (required): Your OAuth client secret
• redirectUri (required): Callback URL
• apiBaseUrl (optional): API base URL (default: 'https://api.watever.co')
• scopes (optional): Array of permission scopes
• storageKey (optional): LocalStorage key (default: 'watever_auth')

Methods:

• loginWithPopup(): Opens popup for authentication
• loginWithRedirect(): Redirects to Watever login
• logout(): Logs out and clears tokens
• getUser(): Fetches current user data
• isAuthenticated(): Returns boolean
• getApiClient(): Returns axios instance with auth

useWateverAuth Hook

const {
  user,          // Current user object
  loading,       // Loading state
  error,         // Error object
  isAuthenticated, // Boolean
  login,         // Login function
  logout,        // Logout function
  getApiClient   // Get axios instance
} = useWateverAuth();

WateverAuthButton Component

<WateverAuthButton
  method="popup"        // or "redirect"
  onSuccess={() => {}}  // Success callback
  onError={(err) => {}} // Error callback
  className="custom-class"
  style={{}}
>
  Custom Button Text
</WateverAuthButton>

Advanced Usage

Making API Calls

const { getApiClient } = useWateverAuth();

async function fetchbusinessData() {
  const api = getApiClient();
  const response = await api.get('/api/v1/business/dashboard');
  return response.data;
}

Handle Redirect Callback

import { useEffect } from 'react';
import { useWateverAuth } from '@watever/auth-js';

function App() {
  const { loading } = useWateverAuth();
  
  useEffect(() => {
    // Check for auth code in URL after redirect
    const params = new URLSearchParams(window.location.search);
    const code = params.get('code');
    
    if (code) {
      // Code will be automatically handled by the provider
      // Clean up URL
      window.history.replaceState({}, document.title, window.location.pathname);
    }
  }, []);
  
  if (loading) return <div>Loading...</div>;
  
  return <YourApp />;
}

License

MIT © Watever