onairos/src/components/OthentButton.jsx

The Onairos Library is a collection of functions that enable Applications to connect and communicate data with Onairos Identities via User Authorization. Integration for developers is designed to be seamless, simple and effective for all applications

import { useState } from 'react';
import { Othent, AppInfo } from "@othent/kms";
import getPin from '../getPin';
// Dynamic import for crypto-js's sha256
const loadSha256 = async () => {
    const module = await import(/* webpackChunkName: "sha256" */ 'crypto-js/sha256');
    return module.default;
  };

export default function OthentButton({ onSuccess, onLoginSuccess}) {
  const [loading, setLoading] = useState(false);

  const handleOthentLogin = async () => {
    setLoading(true);
    try {
        const appInfo = {
            name: "Onairos",
            version: "1.0.0",
            env: "production",
        };

        const getCallbackURL = () => {
            // Dynamically determine the base URL
            const baseUrl = window.location.origin; // e.g., https://internship.onairos.uk
            return `${baseUrl}/onairos-callback`;
        };
        
        
        const othent = new Othent({
            appInfo,
            throwErrors: false,
            auth0LogInMethod: "redirect",
            auth0RedirectURI: window.location.href, // The current page URL for redirection after login
            auth0ReturnToURI: window.location.href, // Same for logout
          });
    
        const userDetails = await othent.connect();
        if (!userDetails) {
        throw new Error('Othent connection failed');
        }

    //   // Get hashed sub and pin
    //   const sha256 = await loadSha256();
    //   const hashedOthentSub = sha256(userDetails.sub).toString();
    //   const encryptedPin = (await getPin(hashedOthentSub)).pin;
    //   onLoginSuccess(await getPin(hashedOthentSub)).username;
      


    //   // Call onSuccess with Othent details
    //   await onSuccess({
    //     type: 'othent',
    //     encryptedPin: encryptedPin,
    //     hashedOthentSub:hashedOthentSub,
    //     userDetails
    //   });

    } catch (error) {
      console.error('Othent login failed:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="flex flex-col items-center">
      <button
        onClick={handleOthentLogin}
        disabled={loading}
        className="w-12 h-12 rounded-full shadow-md hover:shadow-lg transition-shadow duration-200 flex items-center justify-center bg-white"
      >
        <img
          src="https://imagepng.org/google-icone-icon/google-icon/" // Replace with actual Othent icon
          alt="Othent"
          className="w-6 h-6"
        />
        {loading && (
          <div className="absolute inset-0 flex items-center justify-center bg-white bg-opacity-50 rounded-full">
            <div className="animate-spin h-4 w-4 border-2 border-blue-500 rounded-full border-t-transparent"></div>
          </div>
        )}
      </button>
      <span className="text-xs mt-2 text-gray-600">Google</span>
    </div>
  );
}